Novo no GSAP?
Comecemos pelo princípio: você chegou aqui porque tem curiosidade sobre o GSAP, mas não sabe exatamente o que é? Vamos dar uma visão geral rápida.
Então, o que é o GSAP?
GSAP é uma biblioteca de animação JavaScript da GreenSock. Você pode criar animações GSAP de alta qualidade. Eles terão um bom desempenho em todos os navegadores que você estiver usando.
Existem também plug-ins GSAP que o ajudarão a conseguir mais, expandindo os recursos da biblioteca GSAP.
Tutoriais anteriores do GSAP
No passado, mostrei como usar o GSAP para criar diferentes efeitos. Desde movimentos do cursor e uma página carregando animação GSAP até uma galeria de imagens arrastável.
O processo
Você certamente pode criar um efeito de letreiro em CSS apenas animando o transform propriedade. Entretanto, neste tutorial, discutiremos como construí-los usando GSAP. Dessa forma, podemos aproveitar todas as vantagens extras desta biblioteca.
Na sua forma mais simples, tudo o que precisamos para criar tendas para festas com GSAP é o horizontalLoop() e verticalLoop() funções auxiliares.
No nosso caso, focaremos apenas nas animações horizontais do letreiro GSAP, pois são mais populares.
Marquise horizontal básica
Na implementação mais direta, considere a demonstração a seguir. Animaremos infinitamente alguns logotipos:
O código de letreiro JavaScript necessário é o seguinte:
1 |
window.addEventListener("load", function () { |
2 |
horizontalLoop(".marquee-item", { |
3 |
repeat: -1, |
4 |
paddingRight: 40, |
5 |
speed: 0.5, |
6 |
});
|
7 |
});
|
Vamos prestar atenção ao paddingRight propriedade de configuração. Usamos um valor que corresponde à lacuna (40px) entre os itens da marca GSAP.
Fazemos isso para evitar a sobreposição entre o primeiro e o último elemento. Além disso, para dar-lhes um espaço que combine com os demais elementos. Dito isto, se você colocar paddingRight: 0você terminará com este resultado:
Tenda horizontal com batentes
Neste caso, cada item do letreiro contém o mesmo texto e uma animação Lottie. Para evitar o inchaço do nosso HTML, geramos os itens da marca horizontal usando JavaScript. Num cenário real, também podemos colocar atributos ARIA para melhorar a acessibilidade.
Cada vez que passamos o mouse sobre um item, o efeito de letreiro HTML é pausado. Para conseguir isso, usamos o pause() e play() métodos que estão disponíveis para um cronograma GSAP. Role para baixo até o rodapé nesta demonstração para ver o efeito:
Tendas horizontais com direções invertidas
Vamos agora trabalhar em um exemplo mais complicado. Considere a seguinte demonstração. Neste, temos dois efeitos de letreiro horizontal que correm em direções opostas:
Sua direção é determinada pelo valor do data-reversed Atributo HTML.
Então, o que torna esta demonstração interessante? Usamos GSAP matchmedia() método para aplicar diferentes paddingRight e speed valores de propriedade dependendo do tamanho da tela. Certifique-se de testá-lo redimensionando a janela do navegador.
Reproduzir letreiros horizontais quando estiver visível
Na demonstração a seguir, colocamos o plugin ScrollTrigger do GSAP em ação. Tocamos nas marquises apenas quando elas estão à vista. Desta forma fazemos o nosso melhor para garantir que os visitantes do site vejam todos os nossos itens animados.
Novamente, use o inspetor do navegador para testar como as animações GSAP param quando o letreiro html relacionado sai da janela de visualização.
Letreiro horizontal como controle deslizante
Neste exemplo, nosso letreiro se comporta como um controle deslizante. Ele é reproduzido automaticamente e há setas para navegar para frente e para trás.
Além disso, usamos o GSAP Arrastável plugin para ativar a funcionalidade de arrastar. Isso acontece passando o draggable: true propriedade de configuração para o horizontalLoop() função.
Como bônus, o letreiro HTML para cada vez que passamos o mouse sobre uma imagem. Nesse momento, sua sobreposição correspondente aparece com uma animação de slide GSAP.
Mais uma vez, redimensione a janela do navegador para testar como o layout muda.
Pronto, guru do GSAP!
Esperamos que você tenha gostado das tendas para festas GSAP que construímos. Agora você tem conhecimento e inspiração suficientes para começar a construir o seu próprio.
Por outro lado, se você quiser experimentar ga-analytics#sendElementsClickEvent”>modelos da web projetados profissionalmente para economizar algum tempo, experimente ga-analytics#sendElementsClickEvent”>uma assinatura Envato. Dá acesso a milhões de ativos criativos de alta qualidade que você pode usar para melhorar seu site.
Por último, mas não menos importante, adicionei todas as demos deste tutorial a uma coleção CodePen. Não deixe de conferir e dar um pouco de amor!
Como sempre, muito obrigado pela leitura!
