Scroll Trigger
L’utilisation de ScrollTrigger, un plugin de la bibliothèque GreenSock Animation Platform (GSAP), peut être extrêmement bénéfique pour un creative coder travaillant sur des interfaces UX/UI pour plusieurs raisons :
Animations Déclenchées par le Défilement
ScrollTrigger permet de déclencher des animations au moment précis où certains éléments entrent dans la zone visible de l’écran (viewport). Ceci est crucial pour créer des expériences interactives et dynamiques où le contenu s’anime en réponse aux actions de l’utilisateur.
Contrôle Précis de l’Animation
Avec ScrollTrigger, les développeurs ont un contrôle précis sur le timing et la durée des animations. Ils peuvent définir des points de départ et d’arrêt spécifiques, ajuster la vitesse des animations, et synchroniser les animations avec le défilement de la page.
Création d’Effets Visuels Impressionnants
Pour un creative coder, ScrollTrigger offre la possibilité d’explorer et d’implémenter des effets visuels avancés, tels que des animations parallaxe.
Exemple d’Implémentation
Ce code reprends l’idée d’un storytelling basé sur le scroll (Seul le 2nd texte est animé).
See the Pen Scroll Trigger by Jerome Mercier (@jmercier) on CodePen.0
Le code commenté
La partie « scroll trigger » de la page HTML utilise la bibliothèque GSAP (GreenSock Animation Platform) avec son plugin ScrollTrigger, ainsi que Lenis pour le défilement doux (smooth scrolling)…
- Bibliothèques Externes :
- GSAP (GreenSock Animation Platform) : Une bibliothèque JavaScript puissante pour créer des animations complexes.
- ScrollTrigger : Un plugin de GSAP pour déclencher des animations lors du défilement.
- Lenis : Une bibliothèque pour créer des défilements fluides et personnalisés.
- Initialisation de Lenis :
const lenis = new Lenis()crée une nouvelle instance de Lenis pour gérer le défilement.function raf(time) { lenis.raf(time); requestAnimationFrame(raf); }: Une fonction récursive utilisantrequestAnimationFramepour mettre à jour Lenis à chaque frame. Cela assure un défilement lisse et synchronisé avec la fréquence de rafraîchissement de l’écran.
- Animation avec GSAP et ScrollTrigger :
gsap.from("#two", {...}): Cette ligne crée une animation sur l’élément avec l’ID#two.scrollTrigger: {...}: Cette partie configure le déclencheur de défilement pour l’animation. Les options sont les suivantes :trigger: "#two": L’animation se déclenche lorsque l’élément#twoentre dans la vue.start: "0% 66%"etend: "50% 33%": Définit quand l’animation commence et se termine en fonction de la position de l’écran."0% 66%"signifie que l’animation commence quand le haut de l’élément#twoatteint 66% de la hauteur de la fenêtre de visualisation, et se termine lorsque 50% de l’élément est à 33% de la hauteur de la fenêtre.scrub: false: Indique que l’animation ne se synchronise pas avec le défilement. Siscrubétaittrue, l’animation progresserait en fonction de la position de défilement.markers: true: Affiche des marqueurs visuels pour aider à déboguer les points de départ et de fin de l’animation.toggleActions: "play reverse play reverse": Définit ce qui se passe lorsque le déclencheur est activé et désactivé (l’animation se joue et se joue en sens inverse).- Note sur ToggleAction:
- onEnter: L’action à effectuer lorsque l’élément déclencheur (trigger) entre dans la zone de déclenchement pour la première fois.
- onLeave: L’action à effectuer lorsque l’élément déclencheur quitte la zone d’affichage.
- onEnterBack: L’action à effectuer lorsque l’élément déclencheur entre à nouveau dans la zone d’affichage en venant de la direction opposée (par exemple, lors du défilement vers le haut après avoir déjà défilé vers le bas).
- onLeaveBack: L’action à effectuer lorsque l’élément déclencheur quitte la zone d’affichage en venant de la direction opposée.
- Paramètres d’Animation :
scale: 0.5etopacity: 0: L’élément commence à une échelle de 0.5 et une opacité de 0.duration: .5: La durée de l’animation est de 0.5 secondes.
En résumé, lorsque l’utilisateur fait défiler la page, l’élément #two s’anime (se développe et devient visible) en fonction de sa position à l’écran, déclenchée par les paramètres définis dans ScrollTrigger.