Apparition du texte au scroll

Dans ce guide, nous allons voir pas à pas comment intégrer ce code dans Elementor et appliquer l’animation.

Ajouter le code personnalisé dans Elementor

1. Allez dans votre tableau de bord WordPress.
2. Accédez à Elementor > Code personnalisé.
3. Cliquez sur Ajouter un nouveau code.
4. Nommez-le par exemple : Texte Reveal Scroll.
5. Collez le code suivant en choisissant l’emplacement </body> – Fin :

<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<style>
.textRevealOnScroll .elementor-heading-title .line {
  background: linear-gradient(to right, #FFF 50%, rgba(182,182,182,0.2) 56%);
  background-size: 230% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
</style>

<script>
window.addEventListener('load', function() {
  gsap.registerPlugin(ScrollTrigger);

  ScrollTrigger.defaults({
    scroller: document.documentElement
  });

  let configObject = {
    limitCallbacks: true,
    ignoreMobileResize: true,
    autoRefreshEvents: "load",
  }
  ScrollTrigger.config(configObject);

  let revealContainers = document.querySelectorAll('.textRevealOnScroll .elementor-heading-title');

  revealContainers.forEach(e => {
    let text = new SplitType(e, { types: "lines" });

    let options = {
      backgroundPositionX: "0%",
      stagger: 0.4,
      scrollTrigger: {
        trigger: e,
        scrub: 2,
        start: "top 60%",
        end: "bottom 50%"
      }
    };

    let anim = gsap.to(e.querySelectorAll(".line"), options);

    let windowsWidth = window.innerWidth;
    window.addEventListener("resize", function() {
      if (windowsWidth !== window.innerWidth) {
        anim.kill();
        text = new SplitType(e, { types: "lines" });
        anim = gsap.to(e.querySelectorAll(".line"), options);
        windowsWidth = window.innerWidth;
      }
    });
  });
});
</script>

Ce code charge automatiquement les librairies SplitType, GSAP et ScrollTrigger, puis applique l’animation uniquement sur les éléments contenant la classe .textRevealOnScroll.

Ajouter un titre avec la classe

1. Ouvrez une page avec Elementor.
2. Ajoutez un widget Titre (Heading).
3. Dans Paramètres avancés > Classes CSS, entrez :

.textRevealOnScroll

Votre titre est désormais prêt à s’animer au scroll !

Tester l’animation

• Faites défiler votre page et observez vos titres : chaque ligne sera révélée avec un effet de dégradé fluide.
• Si vous redimensionnez la fenêtre, le code s’adapte automatiquement pour recalculer les lignes.

Résultat attendu

✅ Les titres se révèlent progressivement au scroll, ligne par ligne.
✅ L’effet est dynamique et moderne, parfait pour une landing page ou un portfolio.
✅ Compatible avec Elementor et facile à personnaliser.

Personnaliser l’effet

• Couleurs : modifiez la valeur du « background: linear-gradient(to right, #FFF 50%, rgba(182,182,182,0.2) 56%); » dans le CSS.
• Vitesse : ajustez « scrub: 2 » dans GSAP pour accélérer ou ralentir.
• Début/fin : jouez avec start: "top 60%" et end: "bottom 50%" pour contrôler quand l’effet démarre.

Avec ce tutoriel, vous avez maintenant un effet de texte au scroll ultra moderne qui donnera à vos pages Elementor un style haut de gamme !