Para todas as demonstrações, configurei o end valor para +=500% o que tornará a animação mais longa. Dessa forma, a galeria ficará fixa para 500% de rolagem extra após seu início inicial. Por exemplo, se a posição inicial for 1.000px, a posição final será em torno de 6.000px. Para ver isso em ação, imprima as posições de rolagem inicial e final da sua instância ScrollTrigger. Escolha um valor menor se preferir um efeito fixo mais rápido.
1. Animação horizontal da direita para a esquerda
Neste primeiro caso, temos alguns slides em tela cheia. Conforme rolamos, moveremos todos os slides simultaneamente para a esquerda, dando-lhes um valor de tradução X negativo.
2. Animação horizontal da esquerda para a direita
Mas e se quisermos reverter a animação anterior e obter um movimento da direita para a esquerda?
Nesse caso, atribuiremos o dir="rtl" atributo ao contêiner de slides e um valor de tradução X positivo para todos os slides.
3. Animação horizontal da direita para a esquerda (aninhamento)
Neste exemplo um pouco mais complexo, vamos desenvolver a primeira demonstração e usar o ScrollTrigger containerAnimation técnica para criar nScrollTriggers indicados. Dito isso, durante o movimento horizontal dos nossos slides, observe quando as legendas aparecem e então anime o conteúdo.
4. Animação horizontal da direita para a esquerda (alternativa)
Seguindo em frente, agora vamos alterar a largura do slide para ser no máximo 50vw, dependendo do tamanho da tela. Desta vez, em vez de mover os slides, moveremos seu wrapper.
A quantidade de movimento que precisamos rolar resultará da subtração da largura do contêiner dos slides (incluindo o conteúdo não visível) da largura da janela.
Por último, mas não menos importante, para tornar o efeito responsivo, usaremos valores baseados em funções (veja também esta página) e aplicaremos invalidateOnRefresh: true por meio das configurações do ScrollTrigger.
5. Animação horizontal de cima para baixo (seções empilhadas)
Neste cenário, empilhamos os slides e ocultamos suas legendas. Conforme rolamos, cada slide aparecerá em cima do anterior enquanto sua legenda desaparecerá. Conforme os slides são empilhados, nós os mostraremos sequencialmente, escalonando-os.
Observe o uso do símbolo “<" que faz com que a animação das legendas aconteça no início da animação do slide associado. Da mesma forma, podemos aplicar uma animação de baixo para cima.
6. Animação horizontal da direita para a esquerda (seções empilhadas)
Seguindo a demo anterior, aqui temos o mesmo conceito de animação. Desta vez, o movimento da animação ocorrerá da direita para a esquerda enquanto as legendas ficarão à esquerda.
Da mesma forma, podemos aplicar uma animação da esquerda para a direita.
7. Animação horizontal de clip-path (seções empilhadas)
Nesta última demonstração, os slides permanecem empilhados, mas aparecem com uma impressionante animação de clip-path de baixo para cima.
Para este tipo de animação, primeiro atribuímos o apropriado z-index valores para os slides.
É claro que podemos alterar a direção da animação do clip-path como quisermos.
Conclusão
Isso conclui outro tutorial do GSAP, pessoal! Espero que tenham gostado das seções fixas baseadas em rolagem que construímos hoje e tenham se inspirado! Vá em frente, mergulhe na documentação do ScrollTrigger, seja criativo e construa coisas ainda mais incríveis!
Por último, mas não menos importante, adicionei todas as demos deste tutorial a uma CodePen Collection. Não deixe de conferir e dar um pouco de amor!
Como sempre, muito obrigado pela leitura!
