ScrollTrigger com GSAP e Animações em CSS

O que rolou na terceira aula do minicurso

Nessa etapa do nosso minicurso gratuito, a gente mergulhou nas possibilidades de animações usando GSAP, uma biblioteca poderosa de JavaScript que simplifica transições visuais. Exploramos ainda como integrar ela ao comportamento de rolagem da página através do ScrollTrigger.

Por dentro do GSAP

O GSAP deixa você criar animações em JavaScript de forma super controlada. Basta definir os parâmetros de início, fim e condições intermediárias. Com poucas linhas, a gente consegue realizar efeitos complexos que seriam trabalhosos com CSS puro.

Animações com CSS também entraram em cena

A gente explorou brevemente a propriedade animation do CSS, chave pra criar animações declarativas. A estrutura combina <em>keyframes</em> e estilos com tempo, duração e repetição.

Integração com ScrollTrigger

A grande estrela da aula foi o ScrollTrigger . Com ele, a gente consegue acoplar efeitos visuais à rolagem da página. Assim, elementos podem se mover, aparecer ou desaparecer dinamicamente conforme o usuário navega pelo conteúdo.

Passo a passo da animação gatilhada pelo scroll

Problemas ao interpretar perspectiva 3D

Um dos pontos debatidos foi o comportamento inesperado de elementos com transformações 3D em CSS. Mesmo rotacionando uma <em>div</em> , o texto filho não acompanha a perspectiva direito.

Truque da lâmina: usando rotateY

Ao aplicar um <code>rotateY(90deg)</code> no eixo Y, o elemento vira uma lâmina que some do campo de visão frontal. Esse efeito funciona bem pra esconder ou revelar conteúdos com impacto visual.

Atenção ao ambiente de exibição

A gente testou também confiabilidade da animação em navegadores embutidos tipo o do Instagram, onde problemas de renderização podem ser frequentes.

Solução alternativa pra bugs de renderização

Uma das soluções que a gente mostrou foi adicionar uma camada extra com <code>will-change: transform</code> e forçar renderização via CSS pra suavizar incompatibilidades. Estratégias assim aumentam a performance e compatibilidade entre dispositivos.

Ferramentas utilizadas

Curtiu essa aula?

Este conteúdo já tá disponível gratuitamente, mas só por tempo limitado. Aproveita pra se inscrever no minicurso e acompanhar a série completa direto no seu email.