Introdução

? Olá, desenvolvedores!

Bem-vindo ao Dia 7 da minha Jornada GSAP, onde exploro as infinitas possibilidades de animações na web. Hoje, aceitei o desafio de criar uma animação de letreiro baseada em rolagem interativa com texto dinâmico e setas giratórias.

Com as poderosas ferramentas de animação do GSAP, faremos com que a página responda à direção de rolagem do usuário – para cima ou para baixo – com movimento e rotação contínuos. Vamos mergulhar!

O que estamos construindo?️

Nossa animação incluirá:

• Uma marca de rolagem de texto e imagens.
• Animações responsivas que se ajustam com base na direção de rolagem.
• Setas giratórias para adicionar estilo!

Você pode ver a demonstração ao vivo aqui.

Estrutura HTML

Aqui está a marcação HTML simples que usei:

    
    
    
    


    











  
  
  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
        });
    }
});








  
  
  Como funciona ⚙️




Event Listener: O window.addEventListener("wheel") detecta a direção de rolagem.


Animações GSAP:



gsap.to() move o letreiro em uma direção específica.

A rotação das setas adiciona uma sensação dinâmica e interativa.




Rolagem infinita: Usar a repetição: -1 garante que o letreiro continue em loop indefinidamente.







  
  
  Desafios e Aprendizados


? Desafio: sincronizar a direção de rolagem com o movimento do letreiro foi complicado.


? Solução: A API robusta do GSAP facilitou o ajuste fino das animações com propriedades como repetição, facilidade e duração.  





  
  
  Considerações Finais


Este projeto mostrou como o GSAP pode lidar com interações baseadas em rolagem e dar vida às páginas da web. Esteja você trabalhando em um portfólio pessoal ou em um site criativo, o GSAP é a ferramenta perfeita para tornar as animações envolventes e intuitivas.  

? Experimente você mesmo e compartilhe suas criações! 





  
  
  Recursos




Documentação GSAP


Demonstração ao vivo


Código-fonte no GitHub