Работа с анимациями в Motion One строится вокруг единой модели: свойства трансформируются во времени, а движок синхронизирует их с браузерным кадром. Сила подхода раскрывается именно при комбинировании разных типов анимации — transform, opacity, SVG-параметров, scroll-связанных значений и временных последовательностей.
Наиболее производительный класс анимаций в Motion One опирается на
свойства, которые не вызывают перерасчёт layout: transform
и opacity. При комбинировании нескольких трансформаций
важно понимать, что Motion One агрегирует их в единую матрицу
преобразования.
import { animate } from "motion";
animate(".box", {
x: 200,
rotate: 180,
scale: 1.2,
opacity: 0.5
}, {
duration: 1
});Внутренне такие свойства не конфликтуют, но порядок визуального
восприятия может зависеть от исходного состояния элемента. При
комбинировании с другими типами анимации важно избегать параллельного
изменения top/left, так как это переводит браузер в режим
layout recalculation.
Ключевой момент — transform-группа всегда обрабатывается как единый
слой, что позволяет безопасно совмещать несколько независимых анимаций в
одном вызове animate.
Motion One поддерживает ключевые кадры как массив значений, что позволяет комбинировать дискретные состояния с плавными переходами физических величин.
animate(".dot", {
x: [0, 100, 50, 200],
scale: [1, 1.5, 0.8, 1],
opacity: [1, 0.6, 1, 0.2]
}, {
duration: 2,
easing: "ease-in-out"
});При комбинировании keyframes с другими типами анимации важно учитывать приоритет источников значений: ключевые кадры всегда переопределяют базовое состояние на временной оси. Это означает, что одновременное использование статических значений и массива keyframes фактически превращает статическое значение в стартовую точку, если не задано иначе.
SVG в Motion One не выделяется в отдельный режим — используются те же принципы анимации, что и для DOM. Это позволяет комбинировать геометрические параметры SVG с transform-анимациями контейнера.
animate("svg circle", {
r: 80,
fill: "#ff0055",
strokeWidth: 4
}, {
duration: 1
});
animate("svg", {
rotate: 360,
scale: 1.1
}, {
duration: 2,
repeat: Infinity
});Комбинация этих двух уровней создаёт эффект многослойного движения: внутренние параметры формы изменяются независимо от трансформации всего SVG-узла. Важно учитывать, что SVG-атрибуты обрабатываются как отдельный поток значений и не участвуют в transform-matrix.
При одновременной анимации path-параметров и transform контейнера необходимо избегать конфликта визуальной логики: изменение геометрии может восприниматься иначе при вращении или масштабировании.
Одним из мощных механизмов Motion One является привязка прогресса анимации к прокрутке. При комбинировании scroll-driven анимаций с обычными временными важно разделять источники управления.
import { scroll } from "motion";
scroll(
animate(".panel", {
y: [-100, 0],
opacity: [0, 1]
}, { duration: 1 })
);Здесь scroll выступает как внешний контроллер прогресса. Если одновременно существует таймлайновая анимация этого же свойства, возникает конкуренция за управление значением.
Корректный подход — разделение свойств: scroll управляет позиционными параметрами, а timeline — визуальными эффектами вроде opacity или scale.
Motion One допускает одновременное существование нескольких анимационных потоков на одном элементе. Каждый поток управляет своим набором свойств, и конфликт возникает только при пересечении ключей.
animate(".card", {
x: 300
}, { duration: 1 });
animate(".card", {
opacity: 0.3
}, { duration: 2 });В этом случае браузер и библиотека объединяют результаты в итоговый стиль. Но при пересечении свойств последний вызов начинает доминировать, так как происходит перезапись интерполируемого значения.
Поэтому при комбинировании анимаций важно соблюдать принцип разделения ответственности: один анимационный поток — один набор свойств.
Motion One позволяет задавать easing на уровне каждой анимации, но при комбинировании нескольких эффектов возникает суммарное восприятие движения.
animate(".dot", {
x: 400
}, {
easing: "ease-out",
duration: 1
});
animate(".dot", {
scale: 1.5
}, {
easing: "ease-in-out",
duration: 1
});Хотя easing применяется отдельно к каждому свойству, визуально они накладываются, создавая сложную траекторию поведения объекта. При проектировании таких сцен важно учитывать, что человеческое восприятие интерпретирует движение как единый вектор, даже если математически это разные кривые.
Motion One может сосуществовать с CSS transitions, однако такое сочетание требует строгого разделения зон влияния. CSS transitions работают на уровне каскада стилей, тогда как Motion One напрямую управляет inline-значениями.
.box {
transition: background-color 0.3s ease;
}animate(".box", {
x: 200,
scale: 1.2
}, {
duration: 1
});В этом случае CSS управляет только цветом, а Motion One — трансформацией. Если оба механизма начинают управлять одним свойством, результат становится недетерминированным, так как inline-стили имеют более высокий приоритет.
Timeline в Motion One позволяет объединять несколько анимаций в единую последовательность, сохраняя возможность их параллельного исполнения.
import { timeline } from "motion";
timeline([
[".box", { x: 200 }, { duration: 1 }],
[".box", { rotate: 180 }, { duration: 1 }],
[".box", { scale: 1.5 }, { duration: 1 }]
]);Несмотря на последовательную запись, свойства могут перекрываться во времени. Это позволяет комбинировать независимые трансформации без создания отдельной анимации для каждого свойства.
При смешивании timeline и отдельных animate-вызовов важно учитывать, что timeline управляет временной шкалой, но не блокирует параллельные анимации вне своей области.
Motion One поддерживает функции в качестве значений, что открывает возможность динамического комбинирования нескольких типов анимаций в зависимости от состояния системы.
animate(".box", {
x: (latest, info) => latest + info.velocity * 0.1,
scale: (latest) => Math.max(1, latest)
});При сочетании функциональных значений с keyframes или timeline происходит приоритет вычисляемых значений. Это означает, что функция становится финальным слоем над всеми промежуточными интерполяциями.
Такой подход часто используется для комбинирования физически основанных эффектов с классическими анимациями, где velocity и инерция накладываются на базовую траекторию.
При комбинировании разных типов анимаций основная проблема заключается в пересечении свойств. Motion One не использует глобальный менеджер приоритетов, поэтому конфликт решается на уровне последнего источника изменения.
Практически это означает три устойчивых стратегии:
При соблюдении этих принципов система остаётся предсказуемой даже при большом количестве параллельных анимационных потоков.