6-ScrollTriggerScrollTrigger est un plugiciel (plugin) développé par GSAP permettant de déclencher ou synchroniser une animation avec le défilement de la page.
Exemples d'utilisation
Comme pour tout plugiciel (plugin) pour GSAP, 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 d'utiliser une des 3 techniques ci-bas :
-
De le télécharger sur le site de
GSAP (bouton Get GSAP), 📥 l'inclure dans votre dossier de projet et ajouter à la fois le fichier
gsap-public/minified/gsap.min.js si ce n'était pas déjà fait. De plus, vous ajouterez le plugiciel
scrollTrigger avec gsap-public/minified/ScrollTrigger.min.js.
Prioriser toujours les versions minifiées qui sont plus performantes lors du chargement de la page. - D'utiliser un Content Delivery Network (CDN) (onglet CDN), comme vous avez l'habitude de faire. Vous devez y cocher la boîte à cocher du plugiciel ScrollTrigger, et plus bas, aller copier les 2 balises script générées (une pour le coeur de gsap et l'autre pour le plugiciel ScrollTrigger) et les coller dans votre/vos page(s) HTML qui contiendront des animations GSAP.
- De partir des gabarits de base CodePen. Vous devez copier le lien de GSAP Core et celui SrollTrigger et, sur votre CodePen via Settings/JS/Add External Scripts, y coller successivement les liens.
Pensez "Optimisation Web" ! 📈 🎯 ⚡
Une fois chargée, il est conseillé d'indiquer à GSAP que ScrollTrigger est disponible en inscrivant la ligne de code suivante:
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.
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.
On remarque que la propriété permettant de déclencher l'animation est maintenant spécifiée et s'appelle trigger.
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:
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.
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 a la valeur "top bottom", indiquant que:
- top: le marqueur start est positionné au sommet (top) de l'élément déclencheur (trigger)
- bottom: le marqueur scroller-start est positionné au bas (bottom) de la fenêtre du navigateur
Donc la première valeur de ce duo (exemple "top bottom") correspont à la postion du marqueur de l'élément déclencheur (trigger) et la deuxième valeur correspont à la position du marqueur de la fenêtre du navigateur.
Autre exemple: à la place de déclencher l'animation quand elle entre dans la fenêtre, on pourrait la déclencher lorsque le milieu de l'élément déclencheur (trigger) atteint 75% de la page, en changeant la valeur de start pour "center 75%".
- center: le marqueur start est positionné au centre (center) de l'élément déclencheur (trigger)
- 75%: le marqueur scroller-start est positionné à 75% de la hauteur de la fenêtre du navigateur
En voici l'exemple:
End
Par défaut la propriété end a la valeur "bottom top".
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.
La propriété toggleActions permet de spécifier des actions qui seront déclenchées lors de moments précis.
Moments
-
onEnter: lorsque la page défile vers le haut ⬆️ et que le marqueur start croise le marqueur scroller-start
-
onLeave: lorsque la page défile vers le haut ⬆️ et que le marqueur end croise le marqueur scroller-end
-
onEnterBack: lorsque la page défile vers le bas ⬇️ et que le marqueur end croise à nouveau le marqueur scroller-end
-
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
ToggleActions par défaut
Par défaut, toggleAction à une valeur de "play none none none".
Autrement dit:
- onEnter l'animation est déclenchée.
- onLeave rien ne se produit
- onEnterBack rien ne se produit
- onLeaveBack rien ne se produit
Modifier les valeurs par défaut de ToggleActions
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 faudra changer la valeur de toggleActions pour
"restart complete reverse reset"
En voici l'exemple:
Pour bien visualiser et comprendre chaque moment et chaque action disponible, je vous suggère de regarder cette démo.
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: