Motion

Adapter Motion menggunakan urutan animasi DOM Motion. Instal paket publik dan 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>

Anda tidak memerlukan GSAP untuk penyiapan ini. Penguraian inti, nilai default, selector, preset, pemantauan, dan metode siklus hidup digunakan bersama oleh kedua engine.

Deklarasi DOM Motion 14.6 merujuk pada tipe yang disediakan oleh @types/react. Untuk proyek TypeScript yang ketat dan memeriksa deklarasi dependensi, instal juga tipe tersebut sebagai dependensi pengembangan. React itu sendiri tidak diperlukan:

pnpm add -D @types/react

Sertakan "react" di compilerOptions.types jika konfigurasi TypeScript Anda membatasi paket tipe ambient.

Nilai yang didukung

• Properti DOM Motion dengan nilai numerik atau string, termasuk opasitas, transformasi, dan warna.
• from, to, dan status berpasangan from/to. Animasi from berakhir pada gaya alami elemen jika nilai to tidak diberikan.
• Nilai numerik duration, delay, repeatDelay, dan stagger dalam detik.
• Nilai elemen repeat dari 0 hingga 19 dan yoyo boolean. Gunakan pengulangan timeline untuk repetisi yang lebih panjang atau tanpa batas.
• defaults, delay, repeatDelay, repeat, dan yoyo timeline; repeat--1 timeline diulang tanpa batas.
• Posisi timeline numerik, penempatan berurutan, <, >, dan offset relatif seperti +=0.2, -=0.2, dan <+=0.2.
• Nama easing Motion, linear/none, dan nama easing GSAP umum: power0 hingga power4, sine, expo, circ, dan back, dengan sufiks .in, .out, atau .inOut.
• GSAP alias rotasi, seperti rotation, yang dipetakan ke rotate Motion.

Contohnya, animasikan elemen turunan secara berurutan dengan tumpang tindih:

<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>

Batas khusus engine

Adapter akan menampilkan kesalahan untuk pengaturan khusus GSAP, termasuk ScrollTrigger, plugin GSAP, autoAlpha, transformasi persentase seperti xPercent, utilitas callback, objek attr/css bertingkat, dan nilai properti relatif seperti x-+=100. Posisi timeline berbasis persentase dan stagger berbentuk objek juga tidak didukung. Gunakan adapter GSAP jika fitur tersebut diperlukan.

Utilitas yang didukung tidak berarti interpolasi kedua engine identik. Motion mengelola pemutaran animasi dan interpolasi propertinya sendiri.

Pembersihan

Gunakan animations.refresh() setelah pembaruan DOM, atau aktifkan watch. Panggil animations.destroy() saat pembongkaran. Ini membatalkan pemutaran Motion, menghapus listener kueri media dan observer, serta memulihkan gaya inline asli.