ScrollTrigger Intermédiaire
Scrub
La 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
:
Pin 📌
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:
PinSpacing
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:
Callbacks
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 ⬆️onLeave
dé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
retournetrue
si l'animation est en cours etfalse
dans le cas contraire..direction
retourne1
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.