Crear un efecto de texto horizontal con GSAP y ScrollTrigger

Hace poco hice una web donde la primera sección tenía un texto horizontalmente largo y la idea era que para ver la siguiente sección se tuviera que recorrer todo ese texto. Gracias a la librería GSAP pude lograrlo, y quiero compartir el código por si alguien más lo necesita.

Ejemplo

¿Qué hace este efecto?

El efecto desplaza un texto largo de manera horizontal mientras el usuario hace scroll. La sección queda fija («pin») mientras se recorre el texto, creando una transición fluida.

Además, el código es responsive y se recalcula dinámicamente si cambia el tamaño de la ventana.

Librerías necesarias

Antes de comenzar, asegúrate de incluir GSAP y el plugin ScrollTrigger en tu proyecto:

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

Estructura HTML

<section class="section-scroll-text">
  <h1>Horizontal scroll text: Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h1>
</section>

<section class="section-images">
  <div class="img">
    <img src="https://picsum.photos/500/500">
  </div>
  <div class="img">
    <img src="https://picsum.photos/500/500">
  </div>
  <div class="img">
    <img src="https://picsum.photos/500/500">
  </div>
  <div class="img">
    <img src="https://picsum.photos/500/500">
  </div>
</section>

Crea una sección con un contenedor para el texto:

Asegúrate de estilizar tu sección para que ocupe todo el alto de la ventana:

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
  color: #fff;
}

img {
  max-width: 100%;
  height: auto;
}

section {
  background-color: #1e1e1e;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.section-scroll-text h1 {
  font-size: 100px;
  margin: 0;
  white-space: nowrap;
}

.section-images {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  background-color: #fff;
}

.section-images img {
  border-radius: 1rem;
}

Código JavaScript

Aquí está el código completo para lograr el efecto:

const horTextAnimation = () => {
  // FOR RESPONSIVE
  const triggers = ScrollTrigger.getAll();
  triggers.forEach((trigger) => trigger.kill());
  // TARGET ELEMENT
  const horText = document.querySelector(".section-scroll-text h1");
  if (horText) {
    // ANIMAATION
    gsap.to(horText, {
      x: () => -(horText.offsetWidth - window.innerWidth),
      ease: "linear",
      scrollTrigger: {
        trigger: ".section-scroll-text",
        pin: true,
        scrub: true,
        invalidateOnRefresh: true,
        end: () => `+=${horText.offsetWidth - window.innerWidth}`
      }
    });
    // REFRESH
    ScrollTrigger.refresh();
  }
};
// RUN ANIMATION
horTextAnimation();
// RESPONSIVE
window.addEventListener("resize", horTextAnimation);

Explicación del código

Selección del texto:

• Se usa document.querySelector para seleccionar el texto que se va a animar.

GSAP con ScrollTrigger:

• pin: true: Fija la sección en su lugar mientras se realiza el scroll.
• scrub: true: Sincroniza la animación con el desplazamiento.
• end: Define el final de la animación basándose en el ancho del texto y la ventana.
• invalidateOnRefresh: Recalcula los valores dinámicos al redimensionar la ventana.

Responsive:

• resize listener: Se vuelve a calcular la animación cada vez que se redimensiona la ventana.
• ScrollTrigger.refresh(): Asegura que las instancias activas de ScrollTrigger se actualicen correctamente.

Resultado Final

Con este código, obtendrás un efecto responsive y suave para desplazar textos largos horizontalmente en una página web. Puedes adaptarlo según tus necesidades, como cambiar el estilo del texto o agregar otros efectos con GSAP.