GSAP: Cómo hacer que el banner principal permanezca fijo hasta que la animación esté completa

En el desarrollo web, la creación de animaciones efectivas puede mejorar significativamente la experiencia del usuario. En este artículo, te mostraremos cómo implementar un banner hero que permanezca estático hasta que la animación se complete utilizando GSAP (GreenSock Animation Platform) y su plugin ScrollTrigger. Esto resolverá el problema de mantener a los usuarios concentrados en la animación sin distracciones.

Implementación del código

Para lograr esto, vamos a utilizar GSAP junto con algunos estilos CSS. A continuación, se expone una breve descripción del código necesario para alcanzar este objetivo:

JavaScript

El siguiente código JavaScript utiliza GSAP para gestionar la animación:

gsap.registerPlugin(ScrollTrigger);

let timeline = gsap.timeline({
  scrollTrigger: {
    trigger: '#hero-container',
    start: 'top top',
    end: '+=600px',
    scrub: true, // Efecto de desplazamiento suave
    onEnter: () => {
      ScrollTrigger.disable(); // Deshabilitar ScrollTrigger para que el scroll no funcione
    },
    onLeaveBack: () => {
      ScrollTrigger.enable(); // Reactivar ScrollTrigger
    },
    onComplete: () => {
      ScrollTrigger.enable(); // Reactivar ScrollTrigger al finalizar la animación
    }
  },
});

// Animaciones del logo y de fondo
timeline.to('#scrolllogo', {
  scale: 1.15,
  opacity: 1,
  duration: 1,
});
timeline.to('#scrolloverlay', {
  scale: 1.3,
  duration: 1,
}, '-=0.5');
timeline.to('#scrolllogo', {
  opacity: 0,
  duration: 0.5,
}, '-=0.5');
timeline.to('#scrollbackground', {
  scale: 1.6,
  duration: 1,
});
timeline.to(['#scrolloverlay', '#scrollbackground'], {
  opacity: 0,
  duration: 1,
}, '-=0.5');

CSS

Asegúrate de que tu CSS esté configurado correctamente para que el contenedor del héroe ocupe toda la pantalla:

#hero-container {
  height: 90vh;
  overflow: hidden;
  background: linear-gradient(0deg, #0f5812, #f50505);
}

HTML

Tu estructura HTML debe incluir el contenedor y los elementos que deseas animar, así como las imágenes de fondo:

<div id='hero-container' class="container container--hero">
  <div id='hero-section'>
    <div class="hero-image" id='scrollbackground' style="background-image: url('imagen-url');"></div>
    <div class="hero-image hero-overlay" id='scrolloverlay' style="background-image: url('imagen-url');"></div>
    <div class="hero-logo" id='scrolllogo'>
      <img src="logo-url" alt="Logo">
    </div>
  </div>
</div>
<div class="justclass">Contenido adicional aquí</div>

Solución del Problema

El principal desafío en esta implementación es evitar que la página se congele. Para asegurarte de que el desplazamiento no se interrumpa durante la animación, hemos utilizado ScrollTrigger.disable() al principio de la animación y lo reactivamos al completarla. Esto mantiene la página estática durante la presentación de la animación.

Conclusión

Siguiendo este enfoque, puedes crear un banner hero atractivo que retenga la atención del visitante hasta que la animación esté completamente terminada. Asegúrate de ajustar los tiempos y las propiedades de animación según las necesidades de tu diseño y de probar en diferentes navegadores para garantizar una experiencia consistente. Con GSAP y ScrollTrigger, las posibilidades son infinitas. ¡Empieza a animar y mejora la experiencia del usuario en tu sitio web!