Comment créer des cartes qui s'affichent au scroll (Sans plugins)

Si vous êtes ici, ce n’est probablement pas par hasard. Vous avez déjà vu ce type d’effet : des cartes qui semblent se superposer, se figer, puis glisser élégamment les unes derrière les autres au fil du scroll. C’est fluide, moderne et surtout, ça donne immédiatement une impression de site “haut de gamme”.

Bonne nouvelle : contrairement à ce que beaucoup pensent, ce genre d’animation n’est ni complexe, ni réservé aux développeurs experts. Dans cet article, je vais vous montrer comment fonctionne ce fameux effet de cartes qui défilent au scroll avec GSAP, comment l’intégrer proprement, et surtout comment l’utiliser intelligemment, sans ruiner l’expérience utilisateur ni les performances.

Pas besoin de plugin, pas besoin d’un framework obscur. Juste un peu de structure, quelques classes bien placées… et GSAP fait le reste.

À quoi ressemble l’effet des cartes qui défilent au scroll ?

Des cartes qui défilent au scroll, c’est avant tout un effet visuel fluide et progressif. À mesure que l’utilisateur descend la page, chaque carte vient se positionner, se stabiliser quelques instants, puis laisser la suivante prendre le dessus. Le résultat est propre, lisible, et très moderne.

Cet effet est souvent utilisé pour :

mettre en avant des services
présenter une méthode en plusieurs étapes
raconter une histoire courte
structurer un message sans tout montrer d’un coup

L’intérêt est simple : au lieu de balancer tout le contenu d’un seul bloc, vous rythmez la lecture. Le scroll devient un guide, presque une narration (L’objectif n’est pas d’en faire trop. Les cartes doivent rester lisibles et cohérentes avec le reste du design).

NB : Cet effet est réalisable sur tous les CMS, sans plugin. WordPress, Webflow, site statique… De mon côté, je l’ai mis en place sur WordPress, mais le principe reste exactement le même ailleurs.

Voici à quoi ça ressemble :

Aperçu du code à intégrer

Avant de rentrer dans les détails, voyons le principe général.
Le script est volontairement minimaliste : il ne sert qu’à gérer l’animation. Tout le contenu, lui, est déjà présent dans vos blocs.

Le fonctionnement repose sur deux classes :

.dm-gsap-cards → à appliquer sur chaque carte
.dm-gsap-cards-end → à appliquer sur la dernière carte

Vous créez vos cartes normalement -> Vous ajoutez les classes -> GSAP s’occupe du scroll, du pin, de l’opacité et du scale.

C’est tout.

Aucun HTML complexe à générer, aucun JS à modifier pour chaque carte.

Le JAVASCRIPT :

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>

 window.addEventListener("load", () => {

const dmGsapCards = document.querySelectorAll('.dm-gsap-cards');
 const dmCardsLength = dmGsapCards.length;


 dmGsapCards.forEach((dmElement, index) => {

    const dmCardsOffset = -15 * (index + 1);
    const scaleValue = (100 - dmCardsLength) / 100 + ((index + 1) * 0.01); // Incremental scale value
    const opacityValue = (1 - dmGsapCards.length/10) + ((index + 1) * 0.1);


    gsap.to(dmElement, {
        scrollTrigger: {
            trigger: dmElement,
            endTrigger: '.dm-gsap-cards-end',
            start: `0%+=${dmCardsOffset}px 15%`,
            end: '0% 20%',
            pin: true,
            scrub: true,
            markers: false
        }
    });

    if (index < dmGsapCards.length - 1) {
        const nextElement = dmGsapCards[index + 1];
        gsap.to(dmElement, {
            scrollTrigger: {
                trigger: nextElement,
                start: '50% 50%',
                end: '50% 50%',
                markers: false,
                onEnter: () => {
                    gsap.to(dmElement, { opacity: opacityValue, scale: scaleValue, duration: 1.5, transformOrigin: 'top center'});
                },
                onLeaveBack: () => {
                    gsap.to(dmElement, { opacity: 1, scale: 1, duration: 1.5 });
                }
            }
        });
    }
});
});

</script>

Le CSS :

				
					.dm-gsap-cards {
        transition: opacity 0.2s !important;

    }

g.flo, c’est moi, Florian GEFFROY

Un créateur passionné et un stratège digital qui transforme vos idées en expériences mémorables. Plus qu’un simple nom, g.flo est un concept audacieux : un jeu de mots qui signifie “j’ai Flo” — g.un site web, g.une image de marque, g.une stratégie unique.

Avec g.flo, vous avez :

✔ Un design sur-mesure qui incarne l’ADN de votre marque
✔ Une expérience fluide et engageante pour captiver vos visiteurs
✔ Les dernières tendances UX/UI intégrées à votre projet
✔ Une réalisation efficace et soignée, sans compromis sur la qualité

Prêt à dire « g.flo » vous aussi ?
Testez mon simulateur de devis interactif et obtenez en moins d’une minute une estimation personnalisée pour votre futur site.

Comment intégrer le code sur WordPress

Ajouter les blocs de cartes dans la bonne section

C’est ici que beaucoup pensent que ça va devenir compliqué. En réalité, c’est la partie la plus simple.

Créez ou éditez la page concernée
Ajoutez vos blocs de contenu (cartes)
Sur chaque carte, ajoutez la classe .dm-gsap-cards
Sur la dernière carte, ajoutez en plus .dm-gsap-cards-end

Que vous utilisiez :

l’éditeur natif WordPress
Elementor
un autre builder

… la logique reste la même.

Conseil pratique
Évitez d’imbriquer vos cartes dans trop de conteneurs. Une structure simple donne toujours un meilleur résultat avec GSAP.

Insérer le script GSAP

Le script (déjà intégré dans votre cas) se contente de :

détecter toutes les cartes
calculer leur position
appliquer l’animation au scroll

Il n’interfère pas avec votre mise en page.
Il n’impose aucun style graphique.
Il ne fait que l’animation.

👉 C’est précisément ce qui rend cet effet robuste et facile à maintenir.

Ajuster l’effet et personnaliser le contenu

L’un des gros avantages de cette approche, c’est la liberté.

Vous pouvez :

modifier le design des cartes sans toucher au script
changer le contenu à volonté
adapter l’effet à votre univers visuel

Quelques ajustements simples mais efficaces :

Des ombres légères pour accentuer la profondeur
Des fonds contrastés entre les cartes
Une hiérarchie claire dans les titres

Idée bonus : Utilisez cet effet pour transformer une simple liste de services en une mini-expérience. Le contenu reste le même, mais la perception change totalement.

Points de vigilance

Même si l’effet est simple à mettre en place, quelques points méritent votre attention.

Compatibilité mobile :Testez systématiquement sur mobile. Les cartes doivent rester lisibles, même sur petit écran.
Performances : GSAP est très performant, mais évitez les images trop lourdes, limitez le nombre de cartes et gardez des animations sobres
Expérience utilisateur : Une animation doit accompagner le contenu, pas le voler. Si l’effet devient plus visible que le message, c’est qu’il y a un déséquilibre.

3 problèmes courants et comment les résoudre

Les cartes ne s’animent pas

Vérifiez :

que chaque carte possède bien .dm-gsap-cards
que la dernière contient .dm-gsap-cards-end
que les scripts GSAP sont bien chargés

L’effet est trop agressif

Souvent dû à :

trop de cartes
un design trop chargé
un contraste excessif

Simplifiez. L’effet respirera mieux.

Le scroll semble “bloqué”

Dans la majorité des cas, cela vient :

d’un conteneur avec overflow: hidden
d’une hauteur mal définie
d’une structure trop complexe

Conseil pratique :
Utilisez l’inspecteur Chrome pour tester chaque section indépendamment.

Conclusion

Mettre en place des cartes qui défilent au scroll avec GSAP ne demande ni plugin, ni usine à gaz. Il suffit de créer vos blocs de cartes, d’ajouter les bonnes classes, et de laisser le script gérer l’animation. Cette approche permet d’obtenir un rendu fluide, moderne et parfaitement maîtrisé, tout en conservant une structure simple et facile à maintenir.

L’intérêt de cet effet réside surtout dans sa capacité à structurer un message. Utilisé avec parcimonie, il aide à guider la lecture, à hiérarchiser l’information et à renforcer l’impact visuel d’une page, sans nuire à la performance ni à l’expérience utilisateur.

Comme toujours, l’essentiel reste de tester : ajustez le nombre de cartes, vérifiez le rendu sur mobile, et adaptez le design à votre identité. Une animation réussie est celle qui sert le contenu, pas celle qui cherche à se faire remarquer.

Si vous souhaitez aller plus loin dans l’intégration de ce type d’effets ou optimiser l’expérience globale de votre site, un regard extérieur peut parfois faire la différence. Dans tous les cas, prenez le temps d’expérimenter : GSAP est un excellent allié pour créer des interfaces vivantes, sans complexité inutile.

Articles complémentaires

Pas besoin d’être