Premium — Scroll Avançado
Scrub, parallax, pin com timeline, batch, contadores e classe reativa ao
scroll — tudo via ScrollTrigger do GSAP. Equivalente ao Lab 03
(demo-scroll.html) do Smooll original. Os 29 efeitos com
sw-premium-trigger="scroll" e o comparativo sw-premium-scroll-once já
foram cobertos na página Efeitos Base.
1. Scrub — sw-premium-scroll-scrub
A animação obedece à posição do scroll em tempo real, em vez de disparar uma vez. Role a página pra ver os quadrados deslizarem junto.
sw-premium-scroll-scrub="true" (sem inércia)
sw-premium-scroll-scrub="1.5" (com inércia)
Seção logo no topo da página: start/end perto de
100%/0% "gastam" o intervalo de scrub antes mesmo da página carregar (o elemento já nasce quase
no fim do range). Em seções mais abaixo, top 80%/top 20% funciona sem
ajuste.
2. Parallax — sw-premium-parallax
Camadas com valores diferentes se movem em velocidades diferentes ao
rolar. Exige overflow:hidden no container — o elemento se desloca
além dos limites normais.
role a página
3. Pin + Timeline — sw-premium-timeline
A seção trava na tela enquanto a caixa segue 3 passos com o scroll (via
sw-premium-tl-box + sw-premium-tl-steps): sai pra esquerda, atravessa
pro lado direito, e volta ao centro girando (pirueta). Ao completar, o pin solta.
Exige altura definida no wrapper.
4. Batch — sw-premium-batch
Agrupa vários filhos e anima com stagger automático conforme entram no viewport — sem criar um ScrollTrigger por elemento.
Rocket
Speed
Precision
Flow
Hot
Diamond
Moon
Spark
5. Counter — sw-premium-counter
O valor final é o texto dentro da tag. O valor inicial é
sw-premium-counter-from (padrão: 0).
6. Classe reativa — sw-premium-scroll-class
Adiciona a classe quando o elemento entra no viewport e remove quando sai — sem JavaScript extra. O visual do estado é 100% CSS seu, o motor só liga/desliga a classe.
Três recursos exigem CSS da página: (1)
sw-premium-parallax — o container precisa de overflow:hidden, senão o
elemento vaza da seção; (2) sw-premium-scroll-class — você estiliza a classe
adicionada, o motor só faz o toggle; (3) sw-premium-timeline — o wrapper precisa de
altura definida, senão o pin não tem referência.