Transform-свойства в браузере представляют собой основу высокопроизводительных анимаций, поскольку работают напрямую с композитным слоем и не вызывают перерасчёт макета. В Motion One они становятся центральным инструментом для создания плавных переходов, синхронизаций и сложных сценических эффектов без перегрузки рендеринга.
В отличие от изменения геометрических свойств (width, height, top, left), transform не влияет на поток документа. Это делает его предпочтительным для любых интерактивных и непрерывных анимаций.
Motion One использует декларативный API, где трансформации задаются через объект свойств. Основной метод — animate:
import { animate } from "motion"
animate(".box", {
transform: "translateX(200px)"
})Однако библиотека позволяет работать с transform на более высоком уровне, разделяя его на логические составляющие:
animate(".box", {
x: 200,
y: 100,
rotate: 45,
scale: 1.2
})Внутри Motion One эти значения автоматически компилируются в единое CSS transform-выражение, например:
transform: translateX(200px) translateY(100px) rotate(45deg) scale(1.2);Такой подход исключает ручное управление строкой transform и снижает вероятность конфликтов между отдельными трансформациями.
Translate — наиболее часто используемая операция. В Motion One она
представлена через свойства x, y и
z.
animate(".card", {
x: 300,
y: -50
})Пример с процентами:
animate(".modal", {
x: "50%"
})Это полезно для адаптивных интерфейсов, где смещение зависит от размера контейнера.
Scale позволяет изменять размер элемента без перерасчёта layout.
animate(".icon", {
scale: 1.5
})Motion One поддерживает несколько уровней масштабирования:
animate(".panel", {
scaleX: 1.2,
scaleY: 0.8
})Или универсальную форму:
animate(".panel", {
scale: [1, 1.2, 1]
})При комбинировании с translate и rotate порядок имеет значение. Motion One автоматически нормализует порядок трансформаций, но логика остаётся эквивалентной CSS:
Это важно при создании сложных анимаций интерфейса, где элементы должны двигаться относительно собственного центра.
Rotate в Motion One задаётся в градусах, радианах или turns:
animate(".loader", {
rotate: 180
})Поддерживаются альтернативные единицы:
animate(".loader", {
rotate: "0.5turn"
})или
animate(".loader", {
rotate: "3.14rad"
})По умолчанию используется transform-origin: center. Это
означает вращение вокруг центра элемента. Однако поведение можно
изменить:
animate(".needle", {
rotate: 90,
transformOrigin: "bottom center"
})Изменение origin критично при моделировании стрелок, рычагов и интерфейсных индикаторов.
Skew используется реже, но полезен для создания динамических эффектов перспективы.
animate(".tile", {
skewX: 20,
skewY: 10
})Искажение применяется без влияния на layout, что позволяет создавать визуально сложные интерфейсы без перерасчёта сетки.
Skew часто комбинируется с scale для создания эффекта «наклона при нажатии»:
animate(".button", {
scale: 0.95,
skewX: -5
})Одно из ключевых преимуществ Motion One — автоматическая композиция transform. Вместо ручной строки:
transform: translateX(100px) rotate(30deg) scale(1.1);используется декларативный объект:
animate(".element", {
x: 100,
rotate: 30,
scale: 1.1
})Motion One группирует значения в единый transform-вычислитель. Это обеспечивает:
Если одновременно анимируются разные части transform, библиотека объединяет их без потери промежуточных значений.
Transform считается одним из самых дешёвых типов анимации в браузере, поскольку:
Motion One дополнительно оптимизирует выполнение через requestAnimationFrame и batching.
Для сложных сцен можно заранее указать:
animate(".layer", {
x: 500
}, {
willChange: true
})Это подсказывает браузеру, что элемент будет часто изменяться, и он может заранее подготовить отдельный слой композиции.
Motion One позволяет задавать ключевые кадры:
animate(".box", {
x: [0, 200, 0],
rotate: [0, 180, 360],
scale: [1, 1.5, 1]
}, {
duration: 2
})Здесь transform-параметры синхронизируются по временной шкале.
Motion One автоматически интерполирует:
Это позволяет комбинировать разные типы transform без ручного пересчёта.
Timeline используется для координации нескольких transform-анимаций:
import { timeline } from "motion"
timeline([
[".box", { x: 200 }, { duration: 0.5 }],
[".box", { rotate: 180 }, { duration: 0.5 }],
[".box", { scale: 1.2 }, { duration: 0.5 }]
])Хотя transform-свойства разные, визуально они воспринимаются как единый переход.
Motion One поддерживает работу с 3D-пространством через
z и rotateX, rotateY,
rotateZ.
animate(".cube", {
rotateY: 180,
z: 100
})Для корректного отображения требуется включение перспективы:
.scene {
perspective: 1000px;
}z смещает элемент вдоль оси камерыrotateX/Y создаёт эффект объёмного вращенияTransform-origin влияет на точку применения всех трансформаций.
animate(".element", {
rotate: 45,
transformOrigin: "top left"
})Возможные значения:
Изменение origin критично при создании сложных UI-анимаций, где элемент должен вращаться относительно края или угла.
При одновременной анимации нескольких свойств возможны конфликты, например:
animate(".box", { x: 100 })
animate(".box", { translateX: 200 })Motion One нормализует такие случаи, но логика приоритетов следующая:
x, y,
scale) имеют приоритетРекомендуется избегать смешивания низкоуровневого и высокоуровневого API.
Transform часто используется вместе с pointer events:
element.addEventListener("pointermove", (e) => {
animate(element, {
x: e.clientX,
y: e.clientY
}, { duration: 0 })
})Такая схема позволяет создавать:
Transform используется для построения слоёв UI:
animate(".background", { x: 50 })
animate(".foreground", { x: 150, scale: 1.05 })Это создаёт эффект глубины без 3D-моделей.
Каждая из этих ошибок приводит к снижению производительности и нестабильности анимации.
При большом количестве элементов рекомендуется:
Transform остаётся наиболее стабильным инструментом для масштабируемых анимационных систем благодаря своей изоляции от layout-логики и прямому взаимодействию с композитным слоем браузера