Interactions et animations

Les interactions animent votre page avec GSAP et ses plugins (ScrollTrigger, SplitText, ScrambleText, MotionPath, CustomEase), le moteur de nombreux sites primés. Chaque interaction a un déclencheur et une timeline d’étapes.

Partir d’un préréglage

Sélectionnez un élément, ouvrez l’onglet Interactions de l’inspecteur, cliquez sur Add et choisissez un préréglage.

Déclencheurs

N’importe quelle interaction peut aussi être jouée depuis un workflow avec l’étape Play interaction, quel que soit son déclencheur.

Déclencheurs au défilement

Un déclencheur Scroll into view utilise GSAP ScrollTrigger. On est l’élément qui le lance.

• Start et End prennent deux mots : un point de l’élément, puis un point de la fenêtre. top 80% démarre quand le haut de l’élément atteint 80 % de la hauteur de la fenêtre. bottom top se termine quand son bas sort par le haut de la fenêtre. Les décalages comme top bottom-=100 fonctionnent aussi. Laissez End vide pour une fin automatique.
• Scrub lie l’animation à la position de défilement : elle avance quand vous descendez et recule quand vous remontez, entre Start et End. Le parallax l’utilise.
• Sans scrub, l’animation se joue une fois quand l’élément atteint Start et reste dans son état final.

Construire la timeline

Ouvrez une interaction pour voir ses étapes. Chaque étape comporte ces lignes :

Valeurs des propriétés

Chaque propriété reçoit un champ adapté, avec l’unité affichée :

Faites glisser l’icône d’un champ numérique pour faire varier sa valeur. Une étape marquée d’un avertissement contient une valeur qui ne peut pas être jouée ; ouvrez-la pour voir le problème indiqué sous les étapes.

Décalages

Une étape anime chaque élément qu’elle cible : chaque élément d’une liste de collection, ou chaque morceau d’un texte découpé. Stagger échelonne leurs départs.

• Each définit le nombre de secondes entre un élément et le suivant. Total définit le nombre de secondes pour l’ensemble, quel que soit leur nombre.
• From choisit où commence la cascade : Start, Center, End, Edges ou Random.
• Grid échelonne selon la distance dans une grille d’éléments, comme des cartes en rangées : la cascade se propage dans deux directions à partir de From.

"ix_cards": {
  "trigger": { "type": "scroll", "target": "n_list", "start": "top 80%" },
  "timeline": [
    { "target": "n_card", "from": { "y": 60, "autoAlpha": 0 }, "stagger": { "each": 0.08, "from": "center", "grid": "auto" }, "duration": 0.6 }
  ]
}

Un décalage avec seulement Each depuis Start est enregistré comme un nombre ("stagger": 0.1).

Effets

Effect ajoute un plugin GSAP à l’étape. Choisissez-en un par étape :

Un texte révélé caractère par caractère :

{ "target": "n_h1", "from": { "yPercent": 100 }, "split": { "type": "chars", "mask": true }, "stagger": 0.03, "duration": 0.6 }

Easings

Ease définit comment la vitesse évolue pendant l’étape. La liste propose les easings de GSAP (power2.out, back.out(1.7), elastic.out(1, 0.3) et d’autres), plus :

• rough : un mouvement saccadé et tremblant.
• slow(0.7, 0.7, false) : rapide, puis lent au milieu, puis rapide.
• expoScale(0.5, 7) : pour des changements d’échelle qui doivent paraître réguliers, comme un zoom.
• Custom curve… : affiche une ligne Curve. Saisissez une cubic-bezier sous forme de quatre nombres (0.25, 0.1, 0.25, 1, comme cubic-bezier() en CSS) ou des données de tracé SVG issues de l’ease visualizer de GSAP. Choisissez un easing nommé pour revenir en arrière.

Aperçu

En mode conception, les éléments sont dans leur état final pour que vous puissiez les modifier. Utilisez le bouton de lecture d’une interaction pour l’afficher en aperçu, ou appuyez sur ⌘↵ pour lancer l’aperçu de toute la page.

Panneau timeline

Le panneau timeline affiche les étapes d’une interaction sous forme de barres sur une règle graduée en secondes : vous voyez et modifiez le minutage d’un coup d’œil. Il fonctionne en mode conception ; en aperçu, ce sont les vraies interactions qui s’exécutent.

• Ouvrez-le avec le bouton Timeline de la barre d’outils ou ⌥T. Dans l’onglet Interactions de l’inspecteur, le bouton Open in timeline d’une interaction ouvre le panneau sur cette interaction. Le panneau s’ancre sous le canevas ; faites glisser son bord supérieur pour l’agrandir ou le réduire, et il mémorise la hauteur.
• Choisissez l’interaction dans le menu en haut à gauche. Un badge à côté indique son déclencheur.
• Parcourez. Appuyez ou faites glisser sur la règle ou sur un espace vide des pistes pour déplacer la tête de lecture : le canevas affiche l’animation à cet instant. Quand la règle a le focus, les flèches déplacent la tête de lecture de 0,01 s (maintenez ⇧ pour 0,1 s), et Home / End sautent au début ou à la fin.
• Lancez la lecture. Les contrôles de lecture affichent le temps actuel et le total, avec Go to start, Play, Go to end, Loop et la vitesse de lecture (0.25x, 0.5x, 1x ou 2x ; cliquez pour la changer).
• Zoomez avec les boutons Zoom in, Zoom out et Fit timeline, ou ⌘ + défilement sur les pistes.

Modifier les étapes sur la timeline

• Faites glisser une barre pour déplacer l’étape dans le temps, et faites glisser son bord droit pour changer sa durée. Les bords s’aimantent à 0, à la tête de lecture et aux autres barres ; maintenez ⌥ pour désactiver le magnétisme. Un glissement correspond à une étape d’annulation.
• La colonne des calques à gauche nomme la cible de chaque étape. Cliquez sur un nom pour sélectionner ce calque (Shift ou ⌘ + clic l’ajoute à la sélection). Les lignes des calques sélectionnés sont mises en évidence.
• Au clavier, cliquez sur une barre ou atteignez-la avec Tab, puis utilisez ← / → pour déplacer l’étape de 0,01 s (maintenez ⇧ pour 0,1 s), ⌥← / ⌥→ pour la redimensionner et ⌥↑ / ⌥↓ pour la monter ou la descendre dans la liste. ↵ sélectionne son calque, ⌦ ou ⌫ supprime l’étape et ⌘D la duplique. Les appuis sur les flèches pour une même barre comptent comme une seule étape d’annulation.
• Faites un clic droit sur une barre pour Select layer, Duplicate step, Move up, Move down et Delete step.
• Les outils d’étape dans l’en-tête du panneau : Add step ajoute une étape pour le calque sélectionné (ou pour le calque de l’étape active quand rien n’est sélectionné), et pour l’étape active vous pouvez régler l’easing, Duplicate step ou Delete step. Une interaction garde toujours au moins une étape.
• Les décalages apparaissent comme une traîne après la barre, dimensionnée pour le nombre réel d’éléments animés par l’étape, comme les éléments d’une liste de collection ou les morceaux d’un texte découpé. La traîne d’un décalage Grid est une estimation.

Tester le déclencheur

• Les interactions Hover disposent de Hover in, qui joue la timeline en avant, et de Hover out, qui la joue à l’envers depuis la tête de lecture.
• Les interactions Click disposent de Simulate click, qui joue la timeline en avant ; une fois la tête de lecture à la fin, il la joue à l’envers, comme un deuxième clic.
• Les interactions Scroll calées sur le défilement affichent la tête de lecture en pourcentage de défilement.

Par point de rupture

Une interaction peut être limitée à certains points de rupture, par exemple un parallax uniquement sur desktop.

Vous voulez qu’une interaction démarre depuis la logique, par exemple après l’envoi d’un formulaire ? Utilisez l’étape de workflow Play interaction.