Tuto : Créer un scroll horizontal fluide avec GSAP

Les sections de défilement horizontal sont devenues incontournables dans les designs web modernes. Elles captivent l’utilisateur, créent une expérience interactive mémorable et permettent de valoriser vos contenus de manière élégante. Que ce soit pour une galerie de projets, un portfolio ou une présentation de services, cette technique transforme une simple liste en expérience visuelle engageante.

Mais comment réaliser cet effet sans alourdir votre site avec des plugins massifs (pour ne pas dire lourds) ?
La réponse : GSAP (GreenSock Animation Platform).

Dans cet article, nous vous montrerons comment implémenter un défilement horizontal performant et léger, avec une compréhension complète des paramètres clés.

Spoiler alert : vous n’avez pas besoin de Elementor ou d’extensions lourdes pour y parvenir.

Qu’est-ce que GSAP ?

GSAP est une bibliothèque JavaScript puissante créée par GreenSock, spécialisée dans les animations fluides et les effets de défilement. Elle est utilisée par les plus grandes agences et sites web du monde entier.

Contrairement aux plugins lourds basés sur des page builders, GSAP est :

• Minuscule : seulement ~40KB (gzippé)
• Rapide : optimisée pour des performances maximum
• Flexible : fonctionne n’importe où, sans dépendances

Le composant clé pour notre cas d’usage est ScrollTrigger, un plugin GSAP qui déclenche des animations basées sur la position de défilement.

Les Avantages de GSAP

Légèreté et Performance

GSAP charge rapidement et n’impacte pas la vitesse de votre site. Contrairement aux page builders qui chargent des centaines de lignes de code inutilisé, GSAP ne charge que ce dont vous avez besoin.

Impact sur le Core Web Vitals : Négligeable. Vos scores Lighthouse restent intacts.

Contrôle Total

Chaque pixel, chaque milliseconde, chaque paramètre est entre vos mains. Vous pouvez ajuster l’animation exactement comme vous la souhaitez.

Pas de Verrouillage Propriétaire

Le code que vous écrivez n’est pas enfermé dans un système de page builder. Il fonctionne partout, est maintenable, et sera pertinent dans 5 ans.

Animations Fluides sur Tous les Appareils

GSAP utilise les accélérateurs GPU et optimise automatiquement les performances pour mobiles, tablettes et desktops.

Code Propre et Lisible

Pas de configuration complexe. Le code est simple, compréhensible et facile à modifier.

Les Inconvénients de GSAP

Courbe d’Apprentissage

Si vous n’avez jamais touché à JavaScript, il y aura une petite courbe d’apprentissage. Mais c’est largement compensé par les bénéfices.

Besoin de Connaissances en Développement

Vous devrez comprendre les bases du JavaScript et du CSS. Ce n’est pas du drag-and-drop, mais c’est volontaire – c’est ce qui vous donne le contrôle.

Temps d’Implémentation Initial

Contrairement aux page builders où on vous vend du rêve en quelques clics, vous devrez écrire du code. Cependant, une fois que vous maîtrisez le concept, c’est très rapide.

GSAP vs Elementor (et autres « page builders »)

Le Problème des Page Builders

Les page builders sont pratiques, mais ils entraînent  aussi beaucoup d’inconvénients :

• Chargement de CSS non utilisé
• Chargement de JavaScript supplémentaire pour chaque widget
• Rendering lent à cause de calculs inutiles
• Difficile à personnaliser au-delà des options de l’UI
• Vous devez apprendre à utiliser un outil et son UI propriétaire, plutôt qu’un langage.

Exemple réaliste : Un site Elementor charge souvent 2-3 MB de ressources non essentielles.

La Solution GSAP

GSAP + ScrollTrigger = environ 80 KB combinés (gzippés).

De plus, vous gardez votre code propre, versionnné et maintenable.

Comparaison Directe

Critère	Page Builder	GSAP
Taille	~2.5 MB	~80 KB
Flexibilité	Limitée	Totale
Maintenabilité	Difficile	Facile
Performance	Lente	Rapide
Courbe d’apprentissage	Facile	Modérée

Le Concept Clé : ScrollTrigger

ScrollTrigger est le « chef d’orchestre » de nos animations. Il fonctionne selon ce principe :

1. Trigger : « Quand cette partie de la page entre dans la vue ? »
2. Animation : « Alors, fais cette animation »

C’est aussi simple que ça.

Analogie : Imaginez un capteur sur la route. Quand une voiture le franchit (trigger), une pancarte s’illumine (animation).

Les Paramètres Essentiels Expliqués

Voici les 5 paramètres que vous DEVEZ comprendre pour maîtriser le défilement horizontal :

Start et End : Où commence et finit l’animation

scrollTrigger: { 
    trigger: ".horizontal-scroll-section", 
    start: "top center", // Quand la section atteint le centre du viewport 
    end: "bottom center", // Quand le bas de la section atteint le centre 
    scrub: 1 
}

Explications :

• "top center" = le haut de l’élément atteint le centre de l’écran
• "top top" = le haut de l’élément atteint le haut de l’écran
• "center center" = le centre de l’élément atteint le centre de l’écran
• Vous pouvez ajouter des offsets : "top center+=100px" (100px sous le centre)

Cas d’usage :

• Sections en haut de page ? Utilisez start: "top top"
• Sections au milieu ? Utilisez start: "top center"
• Vous voulez que ça commence plus tôt ? Ajoutez un offset négatif

Card Width et Spacing : La Taille de Vos Éléments

.scroll-item { 
    min-width: 400px; /* Largeur de chaque carte */ 
    height: 500px; /* Hauteur */ 
    margin-right: 30px; /* Espacement entre les cartes */ 
}

À considérer :

• Plus les cartes sont larges, plus l’animation dure longtemps
• L’espacement doit être cohérent pour un rendu professionnel
• Sur mobile, réduisez la largeur avec une media query

Nombre de Cartes : Calculer la Distance de Défilement

Si vous avez 5 cartes de 400px chacune + 30px d’espacement :

Formule : (Largeur carte × Nombre de cartes) + (Espacement × (Nombre - 1))
Calcul : (400 × 5) + (30 × 4) = 2000 + 120 = 2120px

Vous utiliserez alors :

gsap.to(".scroll-content", { 
    x: -2120, // Négatif pour déplacer à gauche 
    scrollTrigger: { ... } 
});

 

La Valeur X : Distance de Mouvement

gsap.to(".scroll-content", {
    x: -2120,  // Déplace le contenu 2120px vers la gauche
    scrollTrigger: { ... }
});

Comment l’ajuster :

• Plus la valeur est négative (ex: -3000), plus le défilement est long
• Moins la valeur est négative (ex: -500), plus le défilement est court
• Calculez selon vos cartes et l’effet souhaité

Scrub : La Fluidité de l’Animation

scrollTrigger: { 
    trigger: ".horizontal-scroll-section", 
    scrub: 1 // 0 = pas de lissage, 1 = lissage modéré, 2+ = plus lissé 
}

Valeurs :

• scrub: true : L’animation suit exactement votre scroll (le plus réactif)
• scrub: 0.5 : Peu de lissage, animation rapide
• scrub: 1 : Équilibre parfait (recommandé)
• scrub: 2 : Très lissé, animation plus « fluide » mais moins réactive

Guide d’Implémentation Étape par Étape

Étape 1 : Structure HTML

<!-- Conteneur principal de la section --> 
<section class="horizontal-scroll-section"> 
    <!-- Le conteneur avec sticky positioning -->
    <div class="horizontal-scroll-container"> 
        <!-- Le contenu qui va défiler horizontalement --> 
        <div class="scroll-content"> 
            <div class="scroll-item">Projet 1</div> 
            <div class="scroll-item">Projet 2</div> 
            <div class="scroll-item">Projet 3</div> 
            <div class="scroll-item">Projet 4</div> 
            <div class="scroll-item">Projet 5</div> 
        </div> 
    </div> 
</section>

 

Points clés :

• Trois niveaux d’imbrication : section > container > contenu
• Le nombre de .scroll-item dépend de vos besoins

Étape 2 : Styling CSS

/* Section parent - elle doit être haute pour permettre le scroll */
.horizontal-scroll-section {
    height: 300vh;  /* 3x la hauteur de la fenêtre */
    position: relative;
    background: white;
    padding: 100px 0;
}

/* Conteneur sticky - reste visible pendant le scroll */
.horizontal-scroll-container {
    height: 100vh;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    overflow: hidden;  /* Important : cache le débordement */
}

/* Le contenu qui défile horizontalement */
.scroll-content {
    display: flex;
    gap: 30px;           /* Espacement entre les cartes */
    padding: 0 50px;
}

/* Les cartes individuelles */
.scroll-item {
    min-width: 400px;    /* Largeur de chaque carte */
    height: 500px;       /* Hauteur */
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    color: white;
    flex-shrink: 0;      /* Important : empêche le rétrécissement */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

 

Explications critiques :

• height: 300vh sur la section = espace pour défiler (3x = scroll longue distance)
• position: sticky; top: 0; = le container reste au même endroit
• overflow: hidden = cache le contenu qui dépasse
• flex-shrink: 0 = les cartes gardent leur taille exacte
• gap: 30px = espacement entre les cartes

Étape 3 : JavaScript avec GSAP

// 1. Importer GSAP et ScrollTrigger
// Déjà fait via les CDN dans le HTML

// 2. Enregistrer le plugin ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

// 3. Créer l'animation
gsap.to(".scroll-content", {
    x: -2120,  // Distance totale de défilement horizontal
    scrollTrigger: {
        trigger: ".horizontal-scroll-section",  // L'élément qui déclenche
        start: "top center",                     // Quand commencer
        end: "bottom center",                    // Quand finir
        scrub: 1,                                // Fluidité de l'animation
        markers: false                           // Mettez true pour déboguer
    }
});

C’est tout ! 3 lignes suffisent pour l’animation.

Étape 4 : Charger les Bibliothèques

Ajoutez ceci dans votre <head> ou avant votre script :

<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>

 

Exemple Complet

Voici un exemple minimaliste mais fonctionnel :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Scroll with GSAP</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #f5f5f5;
            font-family: 'Arial', sans-serif;
        }

        /* Regular vertical scroll section */
        .intro-section {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
        }

        .intro-section h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        .intro-section p {
            font-size: 1.2rem;
        }

        /* Horizontal scroll section */
        .horizontal-scroll-section {
            height: 300vh; /* This determines the scroll distance */
            position: relative;
            background: white;
            padding: 100px 0;
        }

        .horizontal-scroll-container {
            height: 100vh;
            display: flex;
            align-items: center;
            position: sticky;
            top: 0;
            overflow: hidden;
        }

        .scroll-content {
            display: flex;
            gap: 30px;
            padding: 0 50px;
        }

        .scroll-item {
            min-width: 800px;
            height: 500px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: bold;
            color: white;
            flex-shrink: 0;
        }

        .scroll-item:nth-child(1) {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .scroll-item:nth-child(2) {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .scroll-item:nth-child(3) {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .scroll-item:nth-child(4) {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .scroll-item:nth-child(5) {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }

        /* Footer section */
        .footer-section {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-align: center;
        }

        .footer-section h2 {
            font-size: 2.5rem;
        }
    </style>
</head>
<body>
    <!-- Intro section with normal vertical scroll -->
    <section class="intro-section">
        <div>
            <h1>Scroll Down to See Horizontal Scroll</h1>
            <p>This section scrolls normally</p>
        </div>
    </section>

    <!-- Horizontal scroll section -->
    <section class="horizontal-scroll-section">
        <div class="horizontal-scroll-container">
            <div class="scroll-content">
                <div class="scroll-item">Item 1</div>
                <div class="scroll-item">Item 2</div>
                <div class="scroll-item">Item 3</div>
                <div class="scroll-item">Item 4</div>
                <div class="scroll-item">Item 5(:)</div>
            </div>
        </div>
    </section>

    <!-- Footer section -->
    <section class="footer-section">
        <div>
            <h2>End of Page</h2>
            <p>Horizontal scroll section complete!</p>
        </div>
    </section>

    <!-- 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 ScrollTrigger plugin
        gsap.registerPlugin(ScrollTrigger);

        // Simple horizontal scroll animation without skew
        gsap.to(".scroll-content", {
            x: -2900, /* (scroll-item's width * nb of scroll-items)*/
            scrollTrigger: {
                trigger: ".horizontal-scroll-section",
                start: "top center-=400px", /*OCO : edit this to your need */
                end: "bottom center+=300px",
                scrub: 0.2,
                markers: true
            }
        });
    </script>
</body>
</html>

 

Erreurs Courantes et Comment les Éviter

Erreur 1 : Oublier overflow: hidden

/* C'est nul ! */
.horizontal-scroll-container {
    display: flex;
    position: sticky;
}

/* Correct */
.horizontal-scroll-container {
    display: flex;
    position: sticky;
    overflow: hidden;  /* ESSENTIEL */
}

 

Sans overflow: hidden, le contenu déborde et crée une scrollbar horizontale indésirable.

Erreur 2 : Ne pas ajouter flex-shrink: 0

/* Ooops*/
.scroll-item {
    min-width: 400px;
    /* Les cartes vont rétrécir pour s'adapter */
}

/* Correct */
.scroll-item {
    min-width: 400px;
    flex-shrink: 0;  /* Les cartes gardent leur taille */
}

Erreur 3 : Valeur x incorrecte

/*  le contenu ne défile que partiellement */
gsap.to(".scroll-content", {
    x: -500,  // Trop court
    scrollTrigger: { ... }
});

/* Correct - calculé selon vos cartes */
gsap.to(".scroll-content", {
    x: -2120,  // Calculé: (400px × 5 cartes) + (30px × 4 gaps)
    scrollTrigger: { ... }
});

 

Erreur 4 : Section parent trop courte

/*  pas assez d'espace pour scroller */
.horizontal-scroll-section {
    height: 100vh;
}

/* Correct - donne de l'espace pour scroller */
.horizontal-scroll-section {
    height: 300vh;  /* 3x la fenêtre = scroll plus long */
}

Plus la hauteur est grande, plus longtemps le défilement horizontal se fait.

Conseils d’Optimisation et de Performance

Performance

1. Lazyload vos images

<div class="scroll-item">
    <img src="image.jpg" loading="lazy" alt="Projet">
</div>

2. Utilisez will-change avec parcimonie

.scroll-content {
    will-change: transform;
}

 

3. Testez avec DevTools

• Ouvrez l’onglet Performance dans Chrome DevTools
• Enregistrez un scroll et analysez les FPS
• Visez 60 FPS pour une fluidité optimale

Responsive Design

/* Desktop */
.scroll-item {
    min-width: 400px;
}

/* Tablette */
@media (max-width: 768px) {
    .scroll-item {
        min-width: 300px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .scroll-item {
        min-width: 280px;
    }
}

N’oubliez pas d’ajuster la valeur x pour le mobile aussi !

Accessibilité

<!-- Utilisez des vraies sections -->
<section class="horizontal-scroll-section" role="region" aria-label="Galerie de projets">
    <!-- Contenu -->
</section>

Important : Le défilement horizontal peut être problématique pour certains utilisateurs. Assurez-vous que le contenu est aussi accessible verticalement sur mobile.

Cas d’Usage Réels

1. Galerie de Projets

Idéal pour les portfolios. Chaque « carte » affiche un projet avec image et description courte.

2. Témoignages Client

Défilez horizontalement à travers les retours clients avec photos et citations.

3. Produits/Services

Présentez votre gamme de produits de manière visuelle et interactive.

4. Timeline ou Étapes de Processus

Racontez votre processus de travail étape par étape.

5. Équipe

Présentez vos membres d’équipe avec un défilement élégant.

Quand NE PAS Utiliser le Défilement Horizontal

Sur Mobile

Le défilement horizontal n’est pas naturel sur mobile. Les utilisateurs s’attendent à scroller verticalement. Si vous l’utilisez, assurez-vous que c’est aussi accessible en vertical sur petit écran.

Pour du Contenu Critique

Si vos utilisateurs DOIVENT voir tout le contenu (informations légales, instructions importantes), ne le cachez pas derrière un scroll horizontal. Beaucoup le manqueront.

Avec Trop d’Éléments

Si vous avez 50 cartes, le défilement horizontal devient pénible. Limitez-vous à 5-10 éléments max.

Sans Raison UX

Juste parce que c’est « cool » ? Mauvaise raison. Utilisez-le quand cela améliore réellement l’expérience utilisateur.

Déboguer avec ScrollTrigger Markers

Pendant le développement, utilisez les markers pour visualiser où commence et finit votre animation :

gsap.to(".scroll-content", {
    x: -2120,
    scrollTrigger: {
        trigger: ".horizontal-scroll-section",
        start: "top center",
        end: "bottom center",
        scrub: 1,
        markers: true  // ← Activez pendant le dev
    }
});

 

Vous verrez des lignes colorées sur votre page :

• 🟢 Vert = start
• 🔴 Rouge = end

Désactivez les markers (markers: false) avant de passer en production !

Bonus !

Si vous avez lu, jusqu’ici merci ! Pour vous remercier, on vous propose un effet plus avancé, mais basé sur le même principe. En voici une petite illustration :

Il suffit d’aller sur la page d’accueil pour le voir en live.

Conclusion

Le défilement horizontal avec GSAP est une technique puissante qui crée des expériences utilisateur mémorables sans alourdir votre site.

Récapitulatif :

• GSAP est léger (~80KB) vs page builders (~2.5MB)
• Vous gardez le contrôle total de votre code
• Les performances restent excellentes
• Une fois comprise, c’est très facile à implémenter
• Les paramètres clés sont simples : start, end, x, et scrub

Les 3 choses à retenir :

1. Calculez votre valeur x selon vos cartes
2. Comprenez start et end pour placer votre animation au bon moment
3. Testez sur mobile et assurez-vous que c’est une bonne UX

Prêt à transformer votre site ? Essayez dès aujourd’hui et voyez la réaction de vos visiteurs face à cette expérience fluide et moderne.

Besoin d’Aide ?

Chez Condorito, nous sommes spécialisés dans la création de site et les boutiques e-commerce, mais nous aimons aussi les animations web performantes et les expériences utilisateur exceptionnelles. Si vous souhaitez implémenter un défilement horizontal sur votre site ou explorer d’autres animations GSAP avancées, contactez-nous ! 🚀
Nous transformons vos idées en code élégant, performant et maintenable.

---