Движение

Адаптерът за Motion използва последователностите за DOM анимации на Motion. Инсталирайте публичния пакет и Motion:

pnpm add glazejs motion

import glaze from "glazejs"
import { createMotionAdapter } from "glazejs/motion"
import { animate, stagger } from "motion"

const animations = glaze({
  adapter: createMotionAdapter({ animate, stagger }),
  breakpoints: { md: "(min-width: 768px)" },
  defaults: { element: "duration-0.6" },
  presets: { rise: "from:opacity-0|y-24" },
})

<div data-animate="preset-rise"></div>
<div data-animate="from:opacity-0 to:opacity-1|x-120"></div>
<div data-animate="@md:from:rotate-180|scale-0.5"></div>

За тази настройка не е необходим GSAP. Основното парсване, стойностите по подразбиране, селекторите, предварителните настройки, наблюдението и методите за жизнения цикъл са общи за двата енджина.

Декларациите за DOM на Motion 14.6 препращат към тип, предоставен от @types/react. За проекти със строг режим на TypeScript, които проверяват декларациите на зависимостите, инсталирайте типовете и като зависимост за разработка. Самият React не е необходим:

pnpm add -D @types/react

Включете "react" в compilerOptions.types, когато конфигурацията на TypeScript ограничава глобално достъпните пакети с типове.

Поддържани стойности

• DOM свойства на Motion с числови или низови стойности, включително прозрачност, трансформации и цветове.
• from, to и сдвоени състояния from/to. Анимация с from завършва с естествения стил на елемента, ако не е зададена стойност за to.
• Числови стойности за duration, delay, repeatDelay и stagger в секунди.
• Стойности за repeat на елемент от 0 до 19 и булева стойност за yoyo. За по-дълго или безкрайно повторение използвайте повторение на времевата линия.
• defaults, delay, repeatDelay, repeat и yoyo на времевата линия; repeat--1 я повтаря безкрайно.
• Числови позиции във времевата линия, последователно разполагане, <, > и относителни отмествания като +=0.2, -=0.2 и <+=0.2.
• Именувани функции за плавност в Motion, linear/none и често срещани имена за GSAP плавност: от power0 до power4, sine, expo, circ и back, със суфикси .in, .out или .inOut.
• GSAP псевдоними за завъртане, като rotation, съпоставени с rotate на Motion.

Например, анимирайте дъщерните елементи последователно с припокриване:

<div data-animate="tl defaults:duration-0.6">
  <div data-animate="from:opacity-0|y-24"></div>
  <div data-animate="from:opacity-0|y-24 tl:[-=0.2]"></div>
</div>

Ограничения, специфични за енджина

Адаптерът извежда грешка при настройки, предназначени само за GSAP, включително ScrollTrigger, плъгини за GSAP, autoAlpha, процентни трансформации като xPercent, помощни функции за обратни извиквания, вложени обекти attr/css и относителни стойности на свойства като x-+=100. Позиции във времевата линия, базирани на проценти, и разместване във формата на обект също не се поддържат. Когато тези функции са необходими, използвайте адаптера за GSAP.

Поддържаните помощни функции не означават, че двата енджина интерполират по един и същ начин. Motion управлява възпроизвеждането на анимациите и интерполацията на свойствата.

Почистване

Използвайте animations.refresh() след актуализации на DOM или активирайте watch. При унищожаване извикайте animations.destroy(). Това отменя възпроизвеждането в Motion, премахва слушателите за медийни заявки и наблюдателите и възстановява първоначалните вградени стилове.