Back

Donnez vie à votre interface utilisateur avec les animations ScrollTrigger dans GSAP

OpenReplay Team OpenReplay Team

Jul 26, 2025 · 6 min read

Donnez vie à votre interface utilisateur avec les animations ScrollTrigger dans GSAP

Les animations basées sur le défilement peuvent transformer un site web statique en une expérience interactive et engageante. Bien que les animations CSS soient utiles pour des effets de base, créer des animations sophistiquées pilotées par le défilement nécessite un outil plus puissant. Le plugin ScrollTrigger de GSAP est exactement cet outil—il vous permet de créer des animations soignées et performantes déclenchées par la position de défilement.

Dans ce guide, vous apprendrez comment implémenter des animations ScrollTrigger qui répondent naturellement au défilement de l’utilisateur, avec des exemples pratiques que vous pouvez utiliser dans vos projets dès aujourd’hui.

Points clés à retenir

  • ScrollTrigger connecte les animations à la position de défilement pour des expériences interactives
  • Utilisez scrub pour lier directement le progrès de l’animation à la position de défilement
  • Épinglez des éléments pour créer des effets avancés basés sur le défilement
  • Configurez start et end pour contrôler précisément quand les animations se déclenchent
  • Utilisez markers pendant le développement pour visualiser les points de déclenchement

Qu’est-ce que ScrollTrigger et pourquoi l’utiliser ?

ScrollTrigger est un plugin GSAP qui connecte les animations à la position de défilement. Contrairement aux bibliothèques “on-scroll” de base qui déclenchent simplement les animations lorsque les éléments entrent dans la zone d’affichage, ScrollTrigger offre un contrôle précis sur :

  • Quand les animations commencent et se terminent en fonction de la position de défilement
  • Comment les animations progressent lorsque les utilisateurs font défiler (scrubbing)
  • L’épinglage d’éléments pendant que les utilisateurs font défiler au-delà d’eux
  • La création d’interactions complexes basées sur le défilement

Le résultat ? Des animations qui semblent connectées au défilement de l’utilisateur plutôt que de simplement se jouer lorsqu’elles sont déclenchées.

Premiers pas avec ScrollTrigger

D’abord, configurons les bases :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ScrollTrigger Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        
        section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .spacer {
            height: 100vh;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="spacer"></div>
    
    <section>
        <div class="box"></div>
    </section>
    
    <div class="spacer"></div>
    
    <!-- GSAP and ScrollTrigger -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    
    <script>
        // Register the plugin
        gsap.registerPlugin(ScrollTrigger);
        
        // Your animations will go here
    </script>
</body>
</html>

Animation ScrollTrigger de base

Commençons par une animation simple qui se déclenche lorsqu’un élément entre dans la zone d’affichage :

gsap.to(".box", {
    scrollTrigger: ".box", // Élément qui déclenche l'animation
    x: 300, // Déplacer de 300px vers la droite
    rotation: 360, // Rotation de 360 degrés
    duration: 1.5, // Durée de l'animation
    ease: "power2.out" // Fonction d'accélération
});

Ce code déplace et fait tourner la boîte lorsqu’elle entre dans la zone d’affichage. Mais ce n’est que la surface.

Comprendre la configuration de ScrollTrigger

Pour débloquer tout le potentiel de ScrollTrigger, nous devons comprendre ses options de configuration :

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box", // Élément qui déclenche l'animation
        start: "top center", // Commencer quand le haut de la boîte atteint le centre de la zone d'affichage
        end: "bottom center", // Terminer quand le bas de la boîte atteint le centre de la zone d'affichage
        toggleActions: "play pause reverse reset", // Actions à l'entrée, sortie, entrée arrière, sortie arrière
        markers: true, // Affiche les marqueurs pour le débogage (à supprimer en production)
    },
    x: 300,
    rotation: 360,
    duration: 2
});

Les propriétés start et end définissent quand l’animation s’active et se désactive. Le format est "[position de l'élément déclencheur] [position de la zone d'affichage]".

toggleActions contrôle comment l’animation se comporte à quatre moments clés :

  1. Lors de l’entrée dans la zone de déclenchement
  2. Lors de la sortie de la zone de déclenchement
  3. Lors de l’entrée à nouveau dans la zone de déclenchement en défilant vers le haut
  4. Lors de la sortie de la zone de déclenchement en défilant vers le haut

Les options incluent : play, pause, resume, reverse, restart, reset, complete, et none.

Créer des animations pilotées par le défilement avec Scrub

La vraie magie se produit avec la propriété scrub, qui lie le progrès de l’animation directement à la position de défilement :

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box",
        start: "top center",
        end: "bottom center",
        scrub: true, // Lie le progrès de l'animation à la position de défilement
        markers: true
    },
    x: 300,
    rotation: 360,
    backgroundColor: "#e74c3c"
});

Avec scrub: true, l’animation progresse lorsque l’utilisateur fait défiler, et même s’inverse lors du défilement vers le haut. Pour une animation plus fluide, utilisez une valeur numérique comme scrub: 0.5 pour ajouter un léger délai.

Épingler des éléments pendant le défilement

L’une des fonctionnalités les plus puissantes de ScrollTrigger est l’épinglage d’éléments en place pendant que l’utilisateur fait défiler :

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box",
        start: "center center",
        end: "+=300", // Terminer 300px après la position de départ
        pin: true, // Épingler la boîte en place pendant l'animation
        scrub: 1,
        markers: true
    },
    x: 300,
    rotation: 360,
    scale: 1.5,
    backgroundColor: "#9b59b6"
});

Ceci épingle la boîte en place pendant que l’animation se joue, créant un effet de type parallaxe. Le end: "+=300" signifie que l’animation se termine après avoir défilé 300 pixels au-delà du point de départ.

Créer une animation de révélation

Créons une animation de révélation pratique pour du texte ou des images :

<div class="spacer"></div>

<section class="reveal-section">
    <div class="reveal-container">
        <h1 class="reveal-text">Animations pilotées par le défilement</h1>
        <p class="reveal-text">Créez des expériences utilisateur engageantes avec GSAP ScrollTrigger</p>
    </div>
</section>

<div class="spacer"></div>
.reveal-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reveal-container {
    max-width: 800px;
    text-align: center;
    overflow: hidden;
}

.reveal-text {
    opacity: 0;
    transform: translateY(50px);
}
// Animation de révélation
gsap.utils.toArray('.reveal-text').forEach(text => {
    gsap.to(text, {
        scrollTrigger: {
            trigger: text,
            start: "top 80%", // Commencer quand le haut du texte est à 80% du haut de la zone d'affichage
            toggleActions: "play none none none"
        },
        y: 0,
        opacity: 1,
        duration: 1,
        ease: "power2.out"
    });
});

Ceci crée un effet de révélation propre lorsque chaque élément de texte entre dans la zone d’affichage.

Créer un effet de parallaxe

Les effets de parallaxe ajoutent de la profondeur à votre site web. Voici comment en créer un :

<div class="parallax-container">
    <div class="parallax-bg"></div>
    <div class="parallax-content">
        <h1>Effet de parallaxe</h1>
    </div>
</div>
.parallax-container {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%; /* Hauteur supplémentaire pour le mouvement */
    background-image: url('your-background-image.jpg');
    background-size: cover;
    background-position: center;
}

.parallax-content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
}
// Effet de parallaxe
gsap.to(".parallax-bg", {
    scrollTrigger: {
        trigger: ".parallax-container",
        start: "top bottom",
        end: "bottom top",
        scrub: true
    },
    y: -100, // Déplacer l'arrière-plan vers le haut de 100px pendant le défilement
    ease: "none"
});

Ceci crée un effet de parallaxe simple où l’arrière-plan se déplace à un rythme différent du premier plan.

Section de défilement horizontal

Créer une section de défilement horizontal est un autre effet impressionnant :

<div class="spacer"></div>

<section class="horizontal-scroll">
    <div class="horizontal-container">
        <div class="panel">Panneau 1</div>
        <div class="panel">Panneau 2</div>
        <div class="panel">Panneau 3</div>
        <div class="panel">Panneau 4</div>
    </div>
</section>

<div class="spacer"></div>
.horizontal-scroll {
    overflow: hidden;
    height: 100vh;
}

.horizontal-container {
    display: flex;
    width: 400%; /* 100% * nombre de panneaux */
    height: 100%;
}

.panel {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

.panel:nth-child(1) { background-color: #3498db; }
.panel:nth-child(2) { background-color: #2ecc71; }
.panel:nth-child(3) { background-color: #e74c3c; }
.panel:nth-child(4) { background-color: #9b59b6; }
// Défilement horizontal
gsap.to(".horizontal-container", {
    scrollTrigger: {
        trigger: ".horizontal-scroll",
        start: "top top",
        end: "+=3000", // Distance de défilement
        pin: true,
        scrub: 1,
    },
    x: () => -(document.querySelector(".horizontal-container").offsetWidth - window.innerWidth),
    ease: "none"
});

Ceci crée une section qui défile horizontalement lorsque l’utilisateur fait défiler verticalement.

Conseils d’optimisation des performances

Les animations ScrollTrigger peuvent impacter les performances si elles ne sont pas implémentées avec soin. Voici quelques conseils :

  1. Utilisez will-change avec parcimonie : Appliquez-le uniquement aux éléments qui s’animent réellement
  2. Évitez d’animer les propriétés de mise en page : Restez sur transform et opacity quand c’est possible
  3. Groupez les animations similaires : Utilisez gsap.utils.toArray() et parcourez les éléments en boucle
  4. Détruisez les ScrollTriggers quand ils ne sont pas nécessaires : Utilisez scrollTrigger.kill() pour les applications single-page
  5. Réduisez l’utilisation des marqueurs : Supprimez markers: true en production

Dépannage des problèmes courants

L’animation commence trop tôt/tard

Si votre animation se déclenche à des moments inattendus, vérifiez vos valeurs start et end. Utilisez markers: true pour visualiser les points de déclenchement.

Animations saccadées

Pour des animations plus fluides, utilisez scrub: 0.5 ou plus au lieu de scrub: true pour ajouter un léger délai.

Problèmes de compatibilité mobile

Les navigateurs mobiles gèrent les événements de défilement différemment. Testez minutieusement sur les appareils mobiles et considérez l’utilisation de ScrollTrigger.matchMedia() pour créer différentes animations pour différentes tailles d’écran.

Conclusion

Avec ces techniques, vous pouvez créer des animations de défilement qui répondent naturellement à l’interaction de l’utilisateur, améliorant votre interface utilisateur sans submerger les utilisateurs. Commencez par des effets simples et incorporez progressivement des techniques plus avancées à mesure que vous devenez à l’aise avec les capacités de ScrollTrigger.

FAQ

Oui, mais vous devez correctement configurer et nettoyer les instances ScrollTrigger quand les composants se montent/démontent.

ScrollTrigger est conçu pour GSAP, mais vous pouvez utiliser ses fonctions de rappel pour déclencher d'autres bibliothèques.

Utilisez des pourcentages pour le positionnement, et rafraîchissez ScrollTrigger lors du redimensionnement de la fenêtre avec ScrollTrigger.refresh().

Les fonctionnalités de base sont gratuites, mais certaines fonctionnalités avancées nécessitent un abonnement GreenSock Club.

Utilisez markers: true pour visualiser les points de déclenchement et console.log dans les fonctions de rappel pour suivre le progrès.

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Self-Host Try Cloud Free
Loved by thousands of developers

More articles from OpenReplay Blog