Introducción

? ¡Hola desarrolladores!

Bienvenido al Día 7 de mi Viaje GSAP, donde exploro las infinitas posibilidades de las animaciones en la web. Hoy asumí el desafío de crear una animación de marquesina interactiva basada en desplazamientos

Una marquesina desplazable de texto e imágenes.
• Animaciones responsivas que se ajustan según la dirección de desplazamiento
.
¡Flechas giratorias para agregar estilo!

Puedes ver la demostración en vivo

Aquí está el formato HTML simple que utilicé:

    
    
    
    


    











  
  
  JavaScript Animation with GSAP


Here’s the GSAP-powered JavaScript code that makes the magic happen:



window.addEventListener("wheel", function (dets) { 
    if (dets.deltaY > 0) {
        // Scrolling Down
        gsap.to(".marque", {
            x: "-200%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 180
        });
    } else {
        // Scrolling Up
        gsap.to(".marque", {
            x: "0%", 
            duration: 4,
            repeat: -1, 
            ease: "none", 
        });
        gsap.to(".marque img", {
            rotate: 0
        });
    }
});
window.addEventListener("rueda", función (dets) { 
    si (dets.deltaY > 0) {
        // Desplazarse hacia abajo
        gsap.to(".marca", {
            x: "-200%", 
            duración: 4,
            repetir: -1, 
            facilidad: "ninguno", 
        });
        gsap.to(".marca img", {
            rotar: 180
        });
    } demás {
        // Desplazarse hacia arriba
        gsap.to(".marca", {
            x: "0%", 
            duración: 4,
            repetir: -1, 
            facilidad: "ninguno", 
        });
        gsap.to(".marca img", {
            rotar: 0
        });
    }
});








  
  
  Cómo funciona ⚙️




 Escucha de eventos 
: window.addEventListener ("rueda") detecta la dirección de desplazamiento.


Animaciones GSAP
:



gsap.to() mueve el marco en una dirección específica.

La rotación de las flechas añade una sensación dinámica e interactiva.




Desplazamiento infinito
: Al usar repetir: -1 se garantiza que la marquesina se mantenga en bucle sin fin.







  
  
  Desafíos y aprendizajes


? Desafío
: Sincronizar la dirección de desplazamiento con el movimiento de la marquesina fue complicado.

? Solución
: La sólida API de GSAP facilitó el ajuste de las animaciones con propiedades como repetición, facilidad y duración.  






  
  
  Pensamientos finales


Este proyecto mostró cómo GSAP puede manejar interacciones basadas en desplazamiento
 y dar vida a las páginas web. Ya sea que esté trabajando en un portafolio personal o en un sitio web creativo, GSAP es la herramienta perfecta para hacer animaciones atractivas e intuitivas.  


? ¡Pruébalo tú mismo y comparte tus creaciones!
 






  
  
  Recursos




Documentación GSAP


Demostración en vivo


Código fuente en GitHub