Motion

Motion adapteris izmanto Motion DOM animāciju secības. Instalējiet publisko pakotni un 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>

Šai iestatīšanai GSAP nav vajadzīgs. Abiem dzinējiem ir kopīga pamatparsēšana, noklusējuma vērtības, selektori, sākotnējie iestatījumi, novērošana un dzīves cikla metodes.

Motion 14.6 DOM deklarācijās ir atsauce uz tipu, ko nodrošina @types/react. Stingriem TypeScript projektiem, kas pārbauda atkarību deklarācijas, instalējiet šos tipus arī kā izstrādes atkarību. Pats React nav vajadzīgs:

pnpm add -D @types/react

Iekļaujiet "react" failā compilerOptions.types, ja jūsu TypeScript konfigurācija ierobežo globāli pieejamos tipu pakotņu nosaukumus.

Atbalstītās vērtības

• Motion DOM īpašības ar skaitliskām vai virknes vērtībām, tostarp necaurspīdīgums, transformācijas un krāsas.
• from, to un pārī savienoti stāvokļi from/to. from animācija beidzas elementa dabiskajā stilā, ja nav norādīta vērtība to.
• Skaitliskas vērtības duration, delay, repeatDelay un stagger sekundēs.
• Elementa vērtības repeat no 0 līdz 19 un Būla vērtība yoyo. Ilgākai vai bezgalīgai atkārtošanai izmantojiet laika skalas atkārtojumu.
• Laika skalas vērtības defaults, delay, repeatDelay, repeat un yoyo; laika skala repeat--1 atkārtojas bezgalīgi.
• Skaitliskas laika skalas pozīcijas, secīga izvietošana, <, > un relatīvie nobīdījumi, piemēram, +=0.2, -=0.2 un <+=0.2.
• Motion nosauktie atvieglošanas veidi, linear/none un biežākie GSAP atvieglošanas nosaukumi: no power0 līdz power4, sine, expo, circ un back, ar sufiksiem .in, .out vai .inOut.
• GSAP rotācijas aizstājvārdi, piemēram, rotation, kas tiek kartēts uz Motion rotate.

Piemēram, animējiet bērnelementus secīgi ar pārklāšanos:

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

Dzinējam specifiskie ierobežojumi

Adapteris rada kļūdu iestatījumiem, kas pieejami tikai GSAP, tostarp ScrollTrigger, spraudņiem GSAP, autoAlpha, procentuālām transformācijām, piemēram, xPercent, atzvanīšanas funkciju utilītām, iegultiem objektiem attr/css un relatīvām īpašību vērtībām, piemēram, x-+=100. Procentuālās laika skalas pozīcijas un objektu formāta pakāpeniskā izvietošana arī netiek atbalstīta. Ja šīs funkcijas ir vajadzīgas, izmantojiet adapteri GSAP.

Atbalstītās utilītas nenozīmē, ka abos dzinējos interpolācija ir identiska. Motion pats pārvalda animāciju atskaņošanu un īpašību interpolāciju.

Tīrīšana

Izmantojiet animations.refresh() pēc DOM atjauninājumiem vai iespējojiet watch. Noņemot, izsauciet animations.destroy(). Tas atceļ Motion atskaņošanu, noņem multivides vaicājumu klausītājus un novērotājus, kā arī atjauno sākotnējos iekļautos stilus.