Motion

Motion-sovitin käyttää Motionin DOM-animaatiosekvenssejä. Asenna julkinen paketti ja 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>

Et tarvitse GSAP tähän määritykseen. Ydintoiminnot jäsentämiseen, oletuksiin, valitsimiin, esiasetuksiin, tarkkailuun ja elinkaarimenetelmiin ovat yhteisiä molemmille moottoreille.

Motion 14.6:n DOM-tyypitykset viittaavat tyyppeihin, jotka tarjoaa @types/react. Jos TypeScript-projektisi tarkistavat myös riippuvuuksien tyypitykset, asenna nämä tyypit kehitysriippuvuutena. Itse React ei ole tarpeen:

pnpm add -D @types/react

Sisällytä "react" kohteeseen compilerOptions.types, kun TypeScript-määrityksesi rajoittaa ympäristön tyyppipaketteja.

Tuetut arvot

• Motionin DOM-ominaisuudet, joiden arvot ovat numeroita tai merkkijonoja, kuten peittävyys, muunnokset ja värit.
• from, to sekä paritetut from/to-tilat. from-animaatio päättyy elementin luonnolliseen tyyliin, jos arvoa to ei ole annettu.
• Numeeriset duration-, delay-, repeatDelay- ja stagger-arvot sekunteina.
• Elementin repeat-arvot väliltä 0–19 ja boolean-yoyo. Käytä aikajanan toistoa pidempään tai äärettömään toistoon.
• Aikajanan defaults, delay, repeatDelay, repeat ja yoyo; aikajanan repeat--1 toistuu loputtomasti.
• Numeeriset aikajanasijainnit, peräkkäinen sijoittelu, <, > ja suhteelliset siirtymät, kuten +=0.2, -=0.2 ja <+=0.2.
• Motionin nimetyt kevennykset, linear/none sekä yleiset GSAP-kevennysten nimet: power0–power4, sine, expo, circ ja back, sekä jälkiliitteet .in, .out tai .inOut.
• GSAP-kierron aliakset, kuten rotation, jotka muunnetaan Motionin rotate-arvoksi.

Animoidaan esimerkiksi lapset peräkkäin niin, että animaatiot menevät osittain päällekkäin:

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

Moottorikohtaiset rajoitukset

Sovitin antaa virheen asetuksista, joita tukee vain GSAP, kuten ScrollTrigger, GSAP-laajennukset, autoAlpha, prosenttimuunnokset, kuten xPercent, takaisinkutsufunktiot, sisäkkäiset attr/css-objektit ja suhteelliset ominaisuusarvot, kuten x-+=100. Prosenttipohjaisia aikajanasijainteja ja objektimuotoista porrastusta ei myöskään tueta. Käytä GSAP-sovitinta, kun näitä ominaisuuksia tarvitaan.

Tuetut apufunktiot eivät tarkoita, että moottorit interpoloisivat arvot samalla tavalla. Motion hallitsee animaation toistoa ja ominaisuuksien interpolointia.

Siivous

Käytä animations.refresh() DOM-päivitysten jälkeen tai ota käyttöön watch. Kutsu animations.destroy() purkamisen yhteydessä. Se peruuttaa Motion-toiston, poistaa media query -kuuntelijat ja tarkkailijat sekä palauttaa alkuperäiset inline-tyylit.