7-ScrollTrigger intermédiaireLa propriété scrub permet de synchroniser la progression d'une animation avec le défilement de la page (scroll). Ainsi, l'animation débutera lorsque le marqueur start croisera scroller-start et progressera proportionellement jusqu'à ce que le marqueur end croise scroller-end.
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:
Lorsque la roulette d'une souris 🖱️ est utilisée pour effectuer un défilement de page (scroll), l'animation est parfois saccadée. Ce comportement est normal, puisque certaines souris incrémentent le défilement en utilisant un très grand intervalle. Cependant, il est possible de remédier à ce problème en spécifiant à la propriété scrub une valeur en secondes ⏲️ . Ainsi, une interpolation correspondant à la durée est générée entre chaque étape de l'animation.
Par exemple, reprenons le précédent exemple, mais avec une interpolation d'une seconde scrub: 1:
La propriété pin permet de fixer verticalement un élément durant son animation, de sorte qu'elle reste visible tout au long de sa progression.
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:
Afin d'effectuer un pin, ScrollTrigger ajoute un div englobant l'élément animé et lui donne temporairement une position: fixed; afin d'éviter que le défilement de la page l'affecte.
Afin de visualiser ce comportement, revoici le précédent exemple, mais avec une bordure pointillée autour du div créé par ScrollTrigger:
Par défaut, la propriété pin crée un espace vide afin que l'élément animé reste toujours entre l'élément qui le précède et celui qui le suit. Cependant, la propriété pinSpacing permet de contrôler ce comportement, si cet espace est jugé indésirable.
Par défaut, la valeur de cette propriété est a true, ce qui crée l'espace mentionné. Pour le désactiver, il faut lui donner la valeur false, comme dans l'exemple suivant:
Les callbacks permettent de déclencher une fonction JavaScript à différents moments clés d'une animation synchronisée avec ScrollTrigger et d'obtenir des informations relatives à cette dernière.
Par exemple, pour déclencher un événement lorsque le marqueur start croise le marqueur scroller-start, il est possible d'utiliser onEnter.
Pour déclencher des événements tant et aussi longtemps que l'animation est en cours, il est possible d'utiliser onUpdate, comme dans l'exemple ci-dessous. Dès que l'animation est mise-à-jours (update) la valeur de la propriété direction (1 ou -1) est affichée dans le carré bleu 🟦
Callbacks disponibles
-
onEnter déclenché lorsque start dépasse scroller-start en montant ⬆️
-
onLeavedéclenché lorsque end dépasse scroller-end en montant ⬆️
-
onEnterBack déclenché lorsque end dépasse scroller-end en descendant ⬇️
-
onLeaveBack déclenché lorsque start dépasse scroller-start en descendant ⬇️
-
onUpdate déclenché à de multiple reprises, tant que l'animation est en cours de progression.
-
Etc.
Informations associées aux callbacks
Il est possible de spécifier un paramètre à un callback ScrollTrigger. Ce paramètre contiendra un objet JavaScript constitué d'informations sur le callback en question.
-
.isActive retourne true si l'animation est en cours et false dans le cas contraire.
-
.direction retourne 1 si l'animation monte ⬆️ et -1 si l'animation descend ⬇️.
-
.progress retourne un chiffre entre 0 et 1 correspondant au pourcentage de progression de l'animation.
-
etc.