Há alguns dias me deparei com esta linda animação de Jason Booth .
Gostei muito de como as imagens giram à medida que se movem pela janela de visualização e isso me fez pensar em quantas variações diferentes poderiam ser construídas a partir da mesma ideia central. Essas demonstrações são o resultado dessa exploração.
O conceito
A ideia principal por trás desses efeitos é organizar as imagens ao longo de um caminho semelhante a uma onda e animam suas transformações com base no progresso da rolagem. À medida que cada imagem entra e sai da janela de visualização, ela gira no espaço 3D enquanto se move ao longo do eixo z, criando diferentes alterações de profundidade e orientação ao longo da interação.
As animações são conduzidas pelo ScrollTrigger do GSAP, com Lenis fornecendo rolagem suave. A partir daí, tudo se resume a como as transformações são calculadas e mapeadas para o progresso da rolagem.
Variações
Depois que a configuração básica estiver definida, há muitas direções que você pode seguir. Diferentes curvas de atenuação, funções de interpolação, faixas de rotação, mapeamento de profundidade, escala e filtros CSS produzem resultados muito diferentes enquanto dependem da mesma estrutura subjacente. Algumas demos exageram o movimento 3D, outras enfatizam a profundidade ou usam desfoque e brilho para reforçar a ilusão de movimento.
Esses exemplos servem como ponto de partida, então sinta-se à vontade para ajustar a matemática, combinar ideias de diferentes demonstrações e ver que tipos de interações você pode criar.
