Premium — SVG
Revele contornos com sw-premium-draw-svg e mova elementos por
caminhos com sw-premium-path (MotionPathPlugin). Equivalente ao Lab 06
(demo-svg.html) do Smooll original.
1. sw-premium-draw-svg — revelação de traçado
Usa strokeDashoffset, zero dependência de plugin premium.
Funciona em <path>, <circle>, <polyline>,
<polygon>. Exige fill:none +
stroke/stroke-width no elemento.
Círculo
Onda
Checkmark
Estrela
Parcial: 20% → 80%
2. sw-premium-draw-svg + sw-premium-scroll-scrub
O desenho avança com o scroll e volta ao subir. Elementos SVG não têm
altura no layout — use sw-premium-scroll-trigger apontando pra um container com
altura real.
3. sw-premium-path — segue um path SVG
MotionPathPlugin do GSAP. sw-premium-path-align="true" gira o
elemento conforme a curva. Exige position:absolute no elemento que
se move.
Órbita — controlada pelo scroll
Onda — seta com autoRotate
O motor não injeta estilo visual nos SVGs. Três regras são necessárias na página: (1)
sw-premium-draw-svg — o elemento precisa de fill:none e
stroke/stroke-width definidos, senão o preenchimento padrão cobre o
traçado; (2) sw-premium-path — o elemento que se move precisa de
position:absolute; (3) combinando sw-premium-draw-svg +
sw-premium-scroll-scrub, aponte sw-premium-scroll-trigger pra um
container com altura real — SVGs não têm altura própria no layout do scroll.