ScrollTrigger

ScrollTrigger est un plugiciel (plugin) développé par GreenSock permettant de déclencher ou synchroniser une animation avec le défilement de la page.

Installation

Comme pour tout plugiciel (plugin) GreenSock, afin d'avoir accès à ses fonctionnalités, il est nécessaire d'avoir incorporé la librairie GSAP préalablement et d'ajouter ensuite le plugiciel dans le projet.

Pour ce faire, il est possible:

Une fois chargée, il est conseillé d'indiquer à GSAP que ScrollTrigger est disponible en inscrivant la ligne de code suivante:

gsap.registerPlugin(ScrollTrigger);

Utilisation de base

Il est possible d'utiliser ScrollTrigger de façon très minimaliste. Pour ce faire, il suffit d'ajouter la propriété scrollTrigger à une animation et de lui attribuer comme valeur le sélecteur devant déclencher l'animation (communément appelé le "trigger").

Par exemple, si un carré bleu 🟦 possède une animation, mais que le carré n'est visible qu'après avoir fait défiler la page, il est possible que son animation se termine avant même que l'utilisateur puisse la voir.

Heureusement, l'utilisation de ScrollTrigger permet de retarder le déclenchement de l'animation au moment où la partie supérieure du carré devient visible.

CodePen | smnarnold 👀

Utilisation d'un objet

Il est possible de raffiner le comportement d'une animation ScrollTrigger. Pour ce faire, il faut utiliser un objet JavaScript pouvant contenir plusieurs propriétés et valeurs plutôt qu'une valeur texte comme dans l'exemple précédent.

Par exemple, convertissons la valeur textuelle de l'exemple en objet.

CodePen | smnarnold 👀

On remarque que la propriété permettant de déclencher l'animation est maintenant spécifiée et s'appelle trigger.

Markers

La propriété markers permet de simplifier le débogage d'une animation en affichant les marqueurs utilisés pour contrôler l'animation. Par défaut, la valeur de cette propriété est à false.

Pour l'activer, il faut lui donner la valeur true, comme dans l'exemple suivant:

CodePen | smnarnold 👀

scroller-start et scroller-end sont des marqueurs positionnés en lien avec la fenêtre, tandis que start et end sont des marqueurs positionnés en lien avec le trigger spécifié.

On remarque que l'animation du carré bleu 🟦 débute uniquement lorsque le marqueur start croise le marqueur scroll-start.

Start et End

Les propriétés start et end de l'objet ScrollTrigger sont constituées de deux valeurs. Une première correspondant au marqueur associé au trigger et une deuxième au marqueur associé à la fenêtre.

Il est possible de modifier ces valeurs en passant une chaine de caractères constituée soit de:

  • Positions sous forme de texte: top, center, bottom

  • Pourcentage, ex: 50%

  • Unité absolue, ex: 200px

  • Unité relative, ex:  +=200

Start

Par défaut la propriété start à la valeur "top bottom", indiquant que le marqueur start doit être positionné au sommet de l'élément trigger et le marqueur scroller-start au bas de la fenêtre.

Par exemple, pour déclencher l'animation non pas quand elle entre dans la fenêtre, mais bien lorsque le milieu de l'élément atteint 75% de la page, il est possible de spécifier "center 75%" comme dans l'exemple suivant:

CodePen | smnarnold 👀

End

La propriété end se comporte exactement comme la propriété start à la différence bien sur qu'elle contrôle les marqueurs end et scroller-end.

ToggleActions

La propriété toggleActions permet de spécifier des actions qui seront déclenchées lors de moments précis.

Moments

  1. onEnter: lorsque la page défile vers le haut ⬆️ et que le marqueur start croise le marqueur scroller-start

  2. onLeave: lorsque la page défile vers le haut ⬆️ et que le marqueur end croise le marqueur scroller-end

  3. onEnterBack: lorsque la page défile vers le bas ⬇️ et que le marqueur end croise à nouveau le marqueur scroller-end

  4. onLeaveBack: lorsque la page défile vers le bas ⬇️ et que le marqueur start croise à nouveau le marqueur scroller-start

Actions

  • play: déclenche l'animation

  • pause: met l'animation sur pause

  • resume: continue l'animation en fonction de sa progression actuelle

  • reset: ramène l'animation à son état de départ

  • restart: ramène l'animation à son état de départ et la déclenche

  • complete: amène l'animation à son état de fin

  • reverse: joue l'animation en sens inverse en à partir de sa progression actuelle

  • none: rien ne se produit

Par défaut, toggleAction à une valeur de "play none none none".

Autrement dit:

  1. onEnter l'animation est déclenchée.

  2. onLeave rien ne se produit

  3. onEnterBack rien ne se produit

  4. onLeaveBack rien ne se produit

Il est possible de modifier ces comportements.

Par exemple, pour qu'une animation:

  • Se déclenche à chaque fois que le marqueur start croise scroller-start.

  • Se complète lorsque le marqueur end croise scroller-end.

  • Joue à l'envers lorsque le marqueur end croise scroller-end dans la direction opposée.

  • Retourne à son état initial lorsque le marqueur start croise scroller-start dans la direction opposée.

il est possible de spécifier "restart complete reverse reset" comme dans l'exemple suivant:

CodePen | smnarnold 👀

Avec une Timeline

Il est possible de combiner ScrollTrigger à une timeline GSAP. Pour ce faire il suffit de passer un objet ScrollTrigger comme propriété dans l'objet de configurations de la timeline en question.

Par exemple:

CodePen | smnarnold 👀