● Lab 03 — Scroll Trigger

O Scroll
como motor

Role a página e veja como o sm-trigger="scroll" transforma o ScrollTrigger do GSAP em algo que você escreve em segundos.

Role para ver
01

Trigger Simples — Entra na tela = anima

sm-trigger="scroll"
sm-trigger="scroll" sm-scroll-start="top 80%"

Quando eu apareço,
eu animo.

A animação dispara quando a borda superior deste card cruza 80% da altura da janela. Role para cima e volte para ver repetir.

<div
  sm-animate="fade-up"
  sm-trigger="scroll"
  sm-scroll-start="top 80%"
  sm-duration="1"
  sm-ease="power3.out">
02

Controle de sm-scroll-start

sm-scroll-start="top XX%"
top 95%

Entra cedo

Quase antes de aparecer na tela.

sm-scroll-start="top 95%"
top 65%

Centro

Anima ao chegar no meio do viewport.

sm-scroll-start="top 65%"
top 30%

Entra tarde

Só anima quando quase passa pelo topo.

sm-scroll-start="top 30%"
03

Scrub — Animação atrelada ao scroll

sm-scroll-scrub="0.5"

Você controla a física

Com sm-scroll-scrub, a animação obedece à posição do scroll em tempo real.

sm-scroll-scrub="true"

Desliza proporcional ao scroll. Sem inércia.

sm-animate="fade-left"
sm-trigger="scroll"
sm-scroll-scrub="true"
sm-scroll-start="top 80%"
sm-scroll-end="top 20%"
sm-scroll-scrub="1.5"

Com inércia de 1.5s — o elemento atrasa levemente.

sm-animate="fade-right"
sm-trigger="scroll"
sm-scroll-scrub="1.5"
sm-scroll-start="top 80%"
sm-scroll-end="top 20%"
04

Parallax — Velocidades diferentes

sm-scroll-scrub + sm-from-y
sm-parallax="-700"
camada rápida
parallax depth
scroll scrub
● Parallax

Cada camada

em sua velocidade

Grid, blobs e cards flutuam em velocidades diferentes. Role devagar e observe cada camada se movendo em ritmo próprio.

/* camada lenta */
<div sm-parallax="-150">

/* camada média */
<div sm-parallax="-400">

/* camada rápida */
<div sm-parallax="-700">
05

Pin — Seção travada, animação scrubada

sm-scroll-pin=".pin-live-section"

Role e a seção fica parada

A seção abaixo trava na tela enquanto a caixa cresce com o scroll. Quando completa, o pin solta e a página continua.

📌 esta seção está pinada

Role o scroll para crescer a caixa →

<div sm-timeline sm-scroll-scrub="1" sm-tl-end="+=250%">
  <div sm-tl-box
       sm-tl-steps='[{"scale":0.04},{"scale":1}]'>
  </div>
</div>
06

Combinado — Todos os efeitos com scroll

stagger + trigger + ease

Misture tudo

🎯

flip-left

sm-animate="flip-left"
sm-ease="power4.out"
🌫️

blur-up

sm-animate="blur-up"
sm-duration="1"
⚡

skew-right

sm-animate="skew-right"
sm-duration="0.9"
🎬

reveal

sm-animate="reveal"
sm-duration="1.2"
🌀

elastic-up

sm-animate="elastic-up"
sm-duration="1.2"
🔄

rotate-in

sm-animate="rotate-in"
sm-ease="back.out(2)"
07

sm-scroll-once — Anima uma vez ou repete

sm-scroll-once="true"

Memória de animação

Role para cima e volte. O card azul vai repetir a animação. O card vermelho vai continuar visível — animou uma vez, nunca mais.

padrão — repete sempre

Repete sempre

Sai da tela → volta para o estado inicial. Entra de novo → anima de novo. Comportamento padrão do Smooll.

sm-trigger="scroll"
sm-scroll-once="true"

Anima uma vez

Após a primeira animação, o ScrollTrigger desativa toggleActions: "play none none none". Nunca mais reseta.

sm-scroll-once="true"
08

Progress Bar — Progresso visual do scroll

ScrollTrigger onUpdate → width

Barra no topo da tela

A barra azul no topo da página avança em tempo real com o scroll da página inteira. Implementada com ScrollTrigger.create + onUpdate.

Progresso da página
// agora é só uma tag!
<div sm-progress-bar="true"></div>

// vertical também funciona:
<div sm-progress-bar="vertical"></div>
10

Timeline Pinada — Sequência scrubada

sm-timeline + sm-tl-steps
1

Estado inicial

O elemento começa no centro, pequeno e invisível.

2

Aparece e cresce

Scale de 0 para 1 com fade-in enquanto você rola.

3

Move para a esquerda

Translação horizontal controlada pelo scroll.

4

Rotação + cor

Gira 360° e muda de cor. Tudo numa Timeline.

<div sm-timeline sm-scroll-scrub="1" sm-tl-end="+=300%">
 <div sm-tl-step>Passo 1</div> ...
 <div sm-tl-box sm-tl-steps='[{"scale":0},{"x":-80},{"rotation":360}]'></div>
</div>
11

Batch — Grupos animando juntos

ScrollTrigger.batch()

Muitos elementos, uma lógica

ScrollTrigger.batch() agrupa vários elementos e os anima com stagger automático conforme entram no viewport — sem criar um trigger por elemento.

// agora é só uma tag no container!
<div sm-batch="true"
     sm-batch-animate="fade-up"
     sm-batch-stagger="0.07">
  <div>item 1</div> <div>item 2</div> ...
</div>
🚀

Rocket

Launch ready

⚡

Speed

Ultra fast

🎯

Precision

Zero drift

🌊

Flow

Smooth motion

🔥

Hot

On fire

💎

Diamond

Premium feel

🌙

Moon

Dark mode

🎨

Design

Pixel perfect

🦁

Bold

Strong presence

🎵

Rhythm

In sync

🧠

Smart

Intelligent

✨

Spark

Pure magic

12

Counter — Números que contam no scroll

sm-counter="true"

Dados que ganham vida

O valor final é o texto dentro da tag. O valor inicial é sm-counter-from (padrão: 0).

sm-counter-from="1000" → <span ...>2400</span> conta de 1000 até 2400
Atributo Descrição Exemplo
sm-counter="true"Ativa o contadorobrigatório
conteúdo da tagValor final — o número onde para<span ...>2400</span>
sm-counter-fromValor inicial — onde começa (padrão: 0)"1000"
sm-counter-suffixTexto após o número"+", "%", "ms", "k"
sm-counter-prefixTexto antes do número"R$", "$"
sm-counter-decimalsCasas decimais"2"
sm-duration / sm-easeVelocidade e física"2" / "expo.out"
2400 Projetos
<span
  sm-counter="true"
  sm-counter-suffix="+"
  sm-duration="2"
>2400</span>
// de 0 até 2400
98 Satisfação
<span
  sm-counter="true"
  sm-counter-suffix="%"
>98</span>
// de 0 até 98
12 Time to Paint
<span
  sm-counter="true"
  sm-counter-suffix="ms"
  sm-ease="expo.out"
>12</span>
2400 Com counter-from
<span
  sm-counter="true"
  sm-counter-from="1000"
  sm-counter-suffix="+"
>2400</span>
// de 1000 até 2400
9999 Prefixo + Decimais
<span
  sm-counter="true"
  sm-counter-prefix="R$ "
  sm-counter-decimals="2"
>9999</span>
142 Stars no GitHub
<span
  sm-counter="true"
  sm-counter-suffix="k"
>142</span>
13

sm-scroll-class — Estado reativo ao scroll

sm-scroll-class="is-visible"

Classes que acendem e apagam

Com sm-scroll-class="is-visible", o Smooll adiciona a classe quando o elemento entra no viewport e remove quando sai — sem JavaScript extra.

<div sm-scroll-class="is-visible"
     sm-scroll-start="top 85%"
     sm-scroll-end="bottom 15%">
/* CSS: .is-visible { background: rgba(0, 119, 255, 0.07); } */

Reativo

Role para fora da tela e volte. O dot vai acender e apagar.

CSS puro

O efeito visual é 100% CSS. O Smooll só gerencia o toggle da classe.

Combine

Use junto com sm-animate para animação + estado reativo no mesmo elemento.

Nav ativa

Ideal para marcar seções ativas na navegação quando a seção está visível.

Lazy load

Disparar carregamento de imagens ou dados quando o componente chega à tela.

Acessível

Funciona sem GSAP de animação — zero peso para interações puramente CSS.

14

Todos os 24 Efeitos — com sm-trigger="scroll"

sm-animate + sm-trigger="scroll"

Vitrine completa

Cada card abaixo usa um efeito diferente do dicionário, todos ativados pelo scroll. Role devagar para ver cada transição disparar ao entrar na tela.

// Fades

fade-up

sm-animate="fade-up"

fade-down

sm-animate="fade-down"

fade-left

sm-animate="fade-left"

fade-right

sm-animate="fade-right"

fade-in

sm-animate="fade-in"

// Zooms

zoom-in

sm-animate="zoom-in"

zoom-out

sm-animate="zoom-out"

bounce-in

sm-animate="bounce-in"

// Flips 3D

flip-left

sm-animate="flip-left"

flip-right

sm-animate="flip-right"

flip-up

sm-animate="flip-up"

flip-down

sm-animate="flip-down"

// Rotate + Skew + Elástico

rotate-in

sm-animate="rotate-in"

rotate-in-cw

sm-animate="rotate-in-cw"

skew-left

sm-animate="skew-left"

skew-right

sm-animate="skew-right"

elastic-up

sm-animate="elastic-up"

// Reveal — Clip Path

reveal

curtina de baixo p/ cima

reveal-left

cortina da esquerda

reveal-right

cortina da direita

reveal-center

abre do centro

// Blur

blur-in

sm-animate="blur-in"

blur-up

sm-animate="blur-up"

24 efeitos × qualquer atributo sm-*
sm-trigger="scroll" + sm-scroll-start="top 88%" + sm-duration="0.9"

CSS OBRIGATÓRIO?

A maioria dos recursos desta página é 100% automática — o Smooll injeta will-change e backface-visibility automaticamente. Mas três recursos exigem CSS da página:

1. sm-parallax — container precisa de overflow:hidden

O elemento se move além dos limites normais. Sem overflow:hidden no pai, ele vaza para fora da seção.

.minha-secao { overflow: hidden; position: relative; }

2. sm-scroll-class — você estiliza a classe que é adicionada

O Smooll só adiciona/remove a classe. O visual do estado ativo é 100% CSS da página.

.meu-bloco.is-active { background: var(--blue); color: white; }

3. sm-timeline — o wrapper precisa de height:100vh

O ScrollTrigger pina o elemento. Sem altura definida, o pin não tem referência e o layout quebra.

[sm-timeline] { height: 100vh; display: flex; align-items: center; }

Pronto para o próximo nível?

Lab 04 — Video Scrubbing →