Back

Dê Vida à Sua Interface com Animações ScrollTrigger no GSAP

OpenReplay Team OpenReplay Team

Jul 26, 2025 · 5 min read

Dê Vida à Sua Interface com Animações ScrollTrigger no GSAP

Animações baseadas em scroll podem transformar um site estático em uma experiência envolvente e interativa. Embora as animações CSS sejam úteis para efeitos básicos, criar animações sofisticadas acionadas por scroll requer uma ferramenta mais poderosa. O plugin ScrollTrigger do GSAP é exatamente essa ferramenta—permitindo criar animações refinadas e performáticas acionadas pela posição do scroll.

Neste guia, você aprenderá como implementar animações ScrollTrigger que respondem naturalmente ao scroll do usuário, com exemplos práticos que você pode usar em seus projetos hoje mesmo.

Principais Pontos

  • ScrollTrigger conecta animações à posição do scroll para experiências interativas
  • Use scrub para vincular o progresso da animação diretamente à posição do scroll
  • Fixe elementos para criar efeitos avançados baseados em scroll
  • Configure start e end para controlar precisamente quando as animações são acionadas
  • Use markers durante o desenvolvimento para visualizar pontos de acionamento

O que é ScrollTrigger e Por que Usá-lo?

ScrollTrigger é um plugin do GSAP que conecta animações à posição do scroll. Diferente de bibliotecas básicas “on-scroll” que simplesmente acionam animações quando elementos entram no viewport, ScrollTrigger oferece controle preciso sobre:

  • Quando as animações iniciam e terminam baseado na posição do scroll
  • Como as animações progridem conforme os usuários fazem scroll (scrubbing)
  • Fixação de elementos enquanto os usuários fazem scroll por eles
  • Criação de interações complexas baseadas em scroll

O resultado? Animações que se sentem conectadas ao scroll do usuário em vez de apenas reproduzir quando acionadas.

Começando com ScrollTrigger

Primeiro, vamos configurar o básico:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ScrollTrigger Demo</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        
        section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .spacer {
            height: 100vh;
        }
        
        .box {
            width: 200px;
            height: 200px;
            background-color: #3498db;
            border-radius: 8px;
        }
    </style>
</head>
<body>
    <div class="spacer"></div>
    
    <section>
        <div class="box"></div>
    </section>
    
    <div class="spacer"></div>
    
    <!-- GSAP and ScrollTrigger -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    
    <script>
        // Register the plugin
        gsap.registerPlugin(ScrollTrigger);
        
        // Your animations will go here
    </script>
</body>
</html>

Animação Básica com ScrollTrigger

Vamos começar com uma animação simples que é acionada quando um elemento entra no viewport:

gsap.to(".box", {
    scrollTrigger: ".box", // Elemento que aciona a animação
    x: 300, // Move 300px para a direita
    rotation: 360, // Rotaciona 360 graus
    duration: 1.5, // Duração da animação
    ease: "power2.out" // Função de easing
});

Este código move e rotaciona a caixa quando ela entra no viewport. Mas isso é apenas arranhar a superfície.

Entendendo a Configuração do ScrollTrigger

Para desbloquear todo o potencial do ScrollTrigger, precisamos entender suas opções de configuração:

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box", // Elemento que aciona a animação
        start: "top center", // Inicia quando o topo da caixa atinge o centro do viewport
        end: "bottom center", // Termina quando a base da caixa atinge o centro do viewport
        toggleActions: "play pause reverse reset", // Ações ao entrar, sair, entrar novamente, sair novamente
        markers: true, // Mostra marcadores para debug (remover em produção)
    },
    x: 300,
    rotation: 360,
    duration: 2
});

As propriedades start e end definem quando a animação ativa e desativa. O formato é "[posição do elemento acionador] [posição do viewport]".

toggleActions controla como a animação se comporta em quatro momentos-chave:

  1. Ao entrar na área de acionamento
  2. Ao sair da área de acionamento
  3. Ao entrar na área de acionamento novamente fazendo scroll para cima
  4. Ao sair da área de acionamento fazendo scroll para cima

As opções incluem: play, pause, resume, reverse, restart, reset, complete, e none.

Criando Animações Dirigidas por Scroll com Scrub

A verdadeira mágica acontece com a propriedade scrub, que vincula o progresso da animação diretamente à posição do scroll:

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box",
        start: "top center",
        end: "bottom center",
        scrub: true, // Vincula o progresso da animação à posição do scroll
        markers: true
    },
    x: 300,
    rotation: 360,
    backgroundColor: "#e74c3c"
});

Com scrub: true, a animação progride conforme o usuário faz scroll, e até mesmo reverte quando faz scroll para cima. Para uma animação mais suave, use um valor numérico como scrub: 0.5 para adicionar um leve atraso.

Fixando Elementos Durante o Scroll

Uma das funcionalidades mais poderosas do ScrollTrigger é fixar elementos no lugar enquanto o usuário faz scroll:

gsap.to(".box", {
    scrollTrigger: {
        trigger: ".box",
        start: "center center",
        end: "+=300", // Termina 300px após a posição inicial
        pin: true, // Fixa a caixa no lugar durante a animação
        scrub: 1,
        markers: true
    },
    x: 300,
    rotation: 360,
    scale: 1.5,
    backgroundColor: "#9b59b6"
});

Isso fixa a caixa no lugar enquanto a animação é reproduzida, criando um efeito similar ao parallax. O end: "+=300" significa que a animação termina após fazer scroll 300 pixels além do ponto inicial.

Criando uma Animação de Revelação

Vamos criar uma animação prática de revelação para texto ou imagens:

<div class="spacer"></div>

<section class="reveal-section">
    <div class="reveal-container">
        <h1 class="reveal-text">Animações Dirigidas por Scroll</h1>
        <p class="reveal-text">Crie experiências de usuário envolventes com GSAP ScrollTrigger</p>
    </div>
</section>

<div class="spacer"></div>
.reveal-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reveal-container {
    max-width: 800px;
    text-align: center;
    overflow: hidden;
}

.reveal-text {
    opacity: 0;
    transform: translateY(50px);
}
// Animação de revelação
gsap.utils.toArray('.reveal-text').forEach(text => {
    gsap.to(text, {
        scrollTrigger: {
            trigger: text,
            start: "top 80%", // Inicia quando o topo do texto está a 80% do topo do viewport
            toggleActions: "play none none none"
        },
        y: 0,
        opacity: 1,
        duration: 1,
        ease: "power2.out"
    });
});

Isso cria um efeito de revelação limpo conforme cada elemento de texto entra no viewport.

Criando um Efeito Parallax

Efeitos parallax adicionam profundidade ao seu site. Veja como criar um:

<div class="parallax-container">
    <div class="parallax-bg"></div>
    <div class="parallax-content">
        <h1>Efeito Parallax</h1>
    </div>
</div>
.parallax-container {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%; /* Altura extra para movimento */
    background-image: url('your-background-image.jpg');
    background-size: cover;
    background-position: center;
}

.parallax-content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
}
// Efeito parallax
gsap.to(".parallax-bg", {
    scrollTrigger: {
        trigger: ".parallax-container",
        start: "top bottom",
        end: "bottom top",
        scrub: true
    },
    y: -100, // Move o fundo para cima 100px conforme fazemos scroll
    ease: "none"
});

Isso cria um efeito parallax simples onde o fundo se move em uma velocidade diferente do primeiro plano.

Seção de Scroll Horizontal

Criar uma seção de scroll horizontal é outro efeito impressionante:

<div class="spacer"></div>

<section class="horizontal-scroll">
    <div class="horizontal-container">
        <div class="panel">Painel 1</div>
        <div class="panel">Painel 2</div>
        <div class="panel">Painel 3</div>
        <div class="panel">Painel 4</div>
    </div>
</section>

<div class="spacer"></div>
.horizontal-scroll {
    overflow: hidden;
    height: 100vh;
}

.horizontal-container {
    display: flex;
    width: 400%; /* 100% * número de painéis */
    height: 100%;
}

.panel {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
}

.panel:nth-child(1) { background-color: #3498db; }
.panel:nth-child(2) { background-color: #2ecc71; }
.panel:nth-child(3) { background-color: #e74c3c; }
.panel:nth-child(4) { background-color: #9b59b6; }
// Scroll horizontal
gsap.to(".horizontal-container", {
    scrollTrigger: {
        trigger: ".horizontal-scroll",
        start: "top top",
        end: "+=3000", // Distância de scroll
        pin: true,
        scrub: 1,
    },
    x: () => -(document.querySelector(".horizontal-container").offsetWidth - window.innerWidth),
    ease: "none"
});

Isso cria uma seção que faz scroll horizontalmente conforme o usuário faz scroll verticalmente.

Dicas de Otimização de Performance

Animações ScrollTrigger podem impactar a performance se não implementadas cuidadosamente. Aqui estão algumas dicas:

  1. Use will-change com moderação: Aplique apenas a elementos que realmente animam
  2. Evite animar propriedades de layout: Prefira transform e opacity quando possível
  3. Agrupe animações similares: Use gsap.utils.toArray() e faça loop pelos elementos
  4. Destrua ScrollTriggers quando não necessários: Use scrollTrigger.kill() para aplicações single-page
  5. Reduza o uso de marcadores: Remova markers: true em produção

Solucionando Problemas Comuns

Animação Inicia Muito Cedo/Tarde

Se sua animação aciona em momentos inesperados, verifique seus valores start e end. Use markers: true para visualizar pontos de acionamento.

Animações Tremidas

Para animações mais suaves, use scrub: 0.5 ou maior em vez de scrub: true para adicionar um leve atraso.

Problemas de Compatibilidade Mobile

Navegadores mobile lidam com eventos de scroll de forma diferente. Teste minuciosamente em dispositivos móveis e considere usar ScrollTrigger.matchMedia() para criar animações diferentes para diferentes tamanhos de tela.

Conclusão

Com essas técnicas, você pode criar animações de scroll que respondem naturalmente à interação do usuário, aprimorando sua interface sem sobrecarregar os usuários. Comece com efeitos simples e gradualmente incorpore técnicas mais avançadas conforme se torna confortável com as capacidades do ScrollTrigger.

Perguntas Frequentes

Sim, mas você precisa configurar e limpar adequadamente as instâncias do ScrollTrigger quando os componentes montam/desmontam.

ScrollTrigger é projetado para GSAP, mas você pode usar suas funções de callback para acionar outras bibliotecas.

Use porcentagens para posicionamento, e atualize ScrollTrigger no redimensionamento da janela com ScrollTrigger.refresh().

A funcionalidade básica é gratuita, mas alguns recursos avançados requerem uma assinatura GreenSock Club.

Use markers: true para visualizar pontos de acionamento e console.log em funções de callback para rastrear progresso.

Listen to your bugs 🧘, with OpenReplay

See how users use your app and resolve issues fast.
Self-Host Try Cloud Free
Loved by thousands of developers

More articles from OpenReplay Blog