Creando una Animación de Texto 3D con GSAP y ScrollTrigger

En este post, te mostraré cómo crear una animación de texto con efecto 3D utilizando GSAP y ScrollTrigger.

¿Qué vamos a lograr?

Vamos a animar varias palabras para que aparezcan y desaparezcan con un efecto de desplazamiento vertical y rotación 3D, sincronizado con el scroll. Cada palabra entrará desde abajo, girando en el eje X, y saldrá hacia arriba con una transición suave.

• Tecnologías utilizadas
• GSAP (GreenSock Animation Platform) para manejar las animaciones.
• ScrollTrigger para sincronizar la animación con el desplazamiento.
• SplitType para dividir el texto en caracteres animables.

Estructura HTML

Nuestro HTML contiene una sección con varias palabras dentro de etiquetas <h2>

<section class="section-fh section-intro">
   <h1>Scroll Down</h1>
</section>

<section id="texts-animation" class="section-texts-animation">
   <h2>Businessman</h2>
   <h2>Entrepreneur</h2>
   <h2>Philanthropist</h2>
   <h2>Mentor</h2>
   <h2>Deejay</h2>
</section>

<section class="section-fh section-intro">
   <h1>Scroll Up</h1>
</section>

Estilos CSS

Para que la animación luzca bien, agregamos algunos estilos básicos:

 .section-intro {
    text-align: center;
    align-content: center;
 }

 .section-texts-animation {
    padding: 24px
 }

 .section-texts-animation {
    background-image: url(https://picsum.photos/id/22/1920/1080?grayscale);
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    background-color: #f4f3ec;
    &:before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(244, 243, 236, 0.7);
    }
 }

 #texts-animation {
    width: 100%;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    h2 {
       font-size: 9vw;
       position: absolute;
       transform-origin: 50% 50%;

       span {
          display: inline-block;
       }
    }
 }

Script con GSAP y ScrollTrigger

Aquí es donde ocurre la magia. Primero, importamos las librerías necesarias y luego aplicamos las animaciones.

document.addEventListener("DOMContentLoaded", function () {
   window.addEventListener("load", function () {

      new SplitType('#texts-animation h2', {
         types: 'chars',
         tagName: 'span',
      });

      const words = gsap.utils.toArray('#texts-animation h2');
      const splits = words.map((word) => {
         return word.getElementsByTagName('span');
      });

      let tl = gsap.timeline({
         ease: "none",
         scrollTrigger: {
            trigger: "#texts-animation",
            pin: true,
            scrub: true,
            anticipatePin: 1,
            end: "+=4000"
         }
      });

      words.forEach((word, i) => {
         tl.from(word, { y: 200, duration: 1, opacity: 0, rotationX: -45 }).from(
            splits[i],
            { y: 100, rotationX: -90, stagger: 0.05 },
            "<"
         );
         tl.to(word, { y: -200, duration: 1, opacity: 0, rotationX: -135 }).to(
            splits[i],
            { rotationX: -120, stagger: 0.1, opacity: 0 },
            "<"
         );
      });

   }, false);
});

Explicación del código

Dividimos las palabras en caracteres usando SplitType para poder animar cada letra individualmente.

• Creamos una animación con GSAP, donde cada palabra:
• Aparece desde abajo (y: 200), con opacidad 0 y una rotación en el eje X de -45°.
• Sus letras se desplazan hacia arriba (y: 100) con una rotación X de -90°, apareciendo de manera escalonada (stagger: 0.05).
• Luego, la palabra desaparece hacia arriba (y: -200) con una rotación X de -135° y opacidad 0.
• Las letras también giran más (rotationX: -120°) antes de desaparecer completamente.
• Sincronizamos la animación con el scroll usando ScrollTrigger, asegurándonos de que la sección quede «fijada» (pin: true) hasta que termine la animación.

Conclusión

Este efecto crea una sensación de texto emergiendo y desapareciendo en 3D, agregando dinamismo a la web. Con GSAP y ScrollTrigger, podemos lograr efectos avanzados de manera sencilla y optimizada.