Motion

L'adaptateur Motion utilise les séquences d'animation DOM de Motion. Installez le package public et 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>

Vous n'avez pas besoin de GSAP pour cette configuration. L'analyse syntaxique, les valeurs par défaut, les sélecteurs, les préréglages, la surveillance et les méthodes de cycle de vie sont partagés par les deux moteurs.

Les déclarations DOM de Motion 14.6 font référence à un type fourni par @types/react. Pour les projets TypeScript stricts qui vérifient les déclarations des dépendances, installez également les types comme dépendance de développement. React lui-même n'est pas nécessaire :

pnpm add -D @types/react

Incluez "react" dans compilerOptions.types lorsque votre configuration TypeScript limite les packages de types ambiants.

Valeurs prises en charge

• Propriétés DOM de Motion avec des valeurs numériques ou textuelles, notamment l'opacité, les transformations et les couleurs.
• États from, to et from/to associés. Une animation from se termine avec le style naturel de l'élément si aucune valeur to n'est fournie.
• Valeurs numériques duration, delay, repeatDelay et stagger en secondes.
• Valeurs repeat d'élément comprises entre 0 et 19, et yoyo booléen. Utilisez la répétition de la timeline pour une répétition plus longue ou infinie.
• Valeurs de timeline defaults, delay, repeatDelay, repeat et yoyo ; repeat--1 répète la timeline indéfiniment.
• Positions numériques dans la timeline, placement séquentiel, <, > et décalages relatifs tels que +=0.2, -=0.2 et <+=0.2.
• Noms d'accélération prédéfinis de Motion, linear/none et noms d'accélération courants GSAP : de power0 à power4, sine, expo, circ et back, avec les suffixes .in, .out ou .inOut.
• GSAP alias de rotation tels que rotation, mappés sur rotate de Motion.

Par exemple, animez les éléments enfants en séquence avec un chevauchement :

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

Limites propres au moteur

L'adaptateur génère une erreur pour les paramètres propres à GSAP, notamment ScrollTrigger, les extensions GSAP, autoAlpha, les transformations en pourcentage telles que xPercent, les utilitaires de rappel, les objets attr/css imbriqués et les valeurs de propriété relatives telles que x-+=100. Les positions de timeline basées sur des pourcentages et le décalage progressif sous forme d'objet ne sont pas non plus pris en charge. Utilisez l'adaptateur GSAP si ces fonctionnalités sont nécessaires.

Les utilitaires pris en charge n'impliquent pas une interpolation identique entre les deux moteurs. Motion gère la lecture des animations et l'interpolation des propriétés.

Nettoyage

Utilisez animations.refresh() après les mises à jour du DOM, ou activez watch. Appelez animations.destroy() lors du démontage. Cette méthode annule la lecture de Motion, supprime les écouteurs de requêtes média et les observateurs, puis restaure les styles intégrés d'origine.