● Lab 06 — SVG Animado

SVG que desenha,
elementos que voam

Revele contornos com sm-draw-svg e mova elementos por caminhos com sm-path.

Role para ver
REF

Referência completa de atributos

sm-draw-svg

AtributoDescrição / Exemplo
sm-draw-svgPresença ativa o reveal de stroke
sm-draw-svg-fromPonto inicial: "0%"
sm-draw-svg-toPonto final: "100%"
sm-trigger="scroll"Ativa ao entrar no viewport
sm-scroll-once="true"Anima só uma vez
sm-scroll-scrub="1"Traçado segue o scroll
sm-durationDuração: "1.5"
sm-easeFísica: "power3.out"

sm-path

AtributoDescrição / Exemplo
sm-path="#id"Seletor do <path> ou shape SVG
sm-path-align="true"Rotaciona conforme a curva
sm-duration="4"Tempo do percurso completo
sm-repeat="-1"Loop infinito
sm-ease="none"Velocidade constante no loop
sm-trigger="scroll"Vincula ao scroll (sem loop)
sm-scroll-scrub="1"Suavidade do scroll control
01

sm-draw-svg — Revelação de traçado

sm-draw-svg sm-trigger="scroll"

Stroke que se desenha

Role para ver cada SVG sendo desenhado. Funciona em <path>, <circle>, <polyline> e outros. Usa strokeDashoffset — zero dependência de plugin premium.

Círculo

<circle
sm-draw-svg
sm-trigger="scroll"
sm-duration="1.5" />

Path onda

<path
sm-draw-svg
sm-duration="1.8"
sm-ease="power2.inOut" />

Checkmark

<polyline
sm-draw-svg
sm-duration="0.7"
sm-delay="0.2"
stroke="#4ade80" />

Polígono (estrela)

<polygon
sm-draw-svg
sm-duration="2"
stroke="#f59e0b" />

Parcial: 20% → 80%

<path
sm-draw-svg
sm-draw-svg-from="20%"
sm-draw-svg-to="80%" />

Cadeia com delay

<!-- rect, depois linhas -->
sm-delay="1" // linha 1
sm-delay="1.3" // linha 2
02

sm-draw-svg + sm-scroll-scrub

sm-scroll-scrub="1"

Traçado ligado ao scroll

Com sm-scroll-scrub, o desenho avança conforme você rola — e volta ao subir. Ideal para criar progressos, timelines e diagramas interativos.

Scrub contínuo — role para desenhar / subir para apagar

<path
sm-draw-svg
sm-trigger="scroll"
sm-scroll-scrub="1"
sm-scroll-trigger="#scrub-trigger" />
03

sm-path — Elemento segue um path SVG

sm-path="#meu-path"

Movimento ao longo de qualquer curva

Usa o MotionPathPlugin (free GSAP). O elemento segue o contorno SVG — com ou sem rotação automática (sm-path-align). Controle via scroll ou tempo.

Órbita — controlado pelo scroll

<div sm-path="#mp-circle"
sm-trigger="scroll"
sm-scroll-scrub="1.5"></div>

Onda — seta com autoRotate

<div sm-path="#mp-wave"
sm-path-align="true"
sm-scroll-scrub="1.5"></div>

Curva complexa — scrub lento

<div sm-path="#mp-spiral"
sm-trigger="scroll"
sm-scroll-scrub="2"></div>
⚡

Modo loop infinito: sm-repeat="-1"

Para loop contínuo, use sm-repeat="-1" sm-ease="none" sm-duration="4" sem sm-trigger. Atenção: consome CPU continuamente — use com moderação nas páginas de produção.

04

sm-draw-svg — Técnicas avançadas

hover · borda · sequência · escrita

Além do traçado básico

Borda animada em cards, ícones em sequência, efeito de escrita à mão e draw disparado por hover — tudo com o mesmo sm-draw-svg.

Card border

Borda animada em card

<rect sm-draw-svg
rx="12"
sm-ease="none" />

Assinatura / handwriting

<path sm-draw-svg
sm-duration="2"
sm-ease="power1.inOut" />

Ícones em sequência com delay

/* cada ícone com sm-delay maior */
sm-delay="0" → "0.7" → "1.5"
passe o mouse →

Draw disparado por hover

/* JS puro — sem sm-trigger */
gsap.to(el, { strokeDashoffset: 0 })
onmouseenter / onmouseleave

Loader / progress ring

<circle sm-draw-svg
sm-duration="1.5"
sm-ease="power2.inOut" />

Barras de progresso SVG

<line sm-draw-svg
sm-draw-svg-to="80%" />
05

sm-path — Técnicas avançadas

trem · pêndulo · timeline curva

Múltiplos elementos, paths criativos

Trem com stagger, pêndulo em arco e um dot de progresso em timeline curva — tudo controlado pelo scroll.

Trem — múltiplos dots no mesmo path

/* 3 dots, sm-scroll-start diferente */
sm-scroll-start="top 75%"
sm-scroll-start="top 80%"
sm-scroll-start="top 85%"

Pêndulo em arco quadrático

<path d="M 20,20 Q 100,160 180,20" />
sm-scroll-scrub="1.5"
2022 2023 2024

Timeline curva com dot de progresso

sm-path="#mp-timeline"
sm-scroll-scrub="1"
06

Composição — Múltiplos draws coordenados

ilustração · logo reveal

Desenho coordenado

Vários paths com delays progressivos criam a ilusão de uma ilustração sendo desenhada em tempo real.

Ilustração — casa sendo desenhada

/* 6 elementos, delays progressivos */
sm-delay="0" → "0.8" → "1.3" → "2.4"

SMOOLL

Logo reveal — letras por stroke

/* cada letra = um path com delay */
S: delay="0" · M: delay="0.7"

Diagrama de rede revelado

/* arestas com delay de 0.2s */
sm-delay="0" · "0.2" · "0.4" · "0.6"
🧬

MorphSVG — disponível com GSAP Club

Interpolação entre dois <path> (ex: círculo → estrela) requer MorphSVGPlugin premium. O atributo sm-morph está reservado na arquitetura do Smooll.

CSS OBRIGATÓRIO?

O Smooll não injeta estilos visuais nos SVGs — toda a animação é via strokeDashoffset e motionPath inline. Três regras são necessárias na página:

1. sm-draw-svg — o elemento SVG precisa de fill:none e stroke definidos

Sem fill:none, o preenchimento padrão (preto) cobre o traçado. O stroke e stroke-width definem o visual da linha.

svg path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; }

2. sm-path — o elemento que se move precisa de position:absolute

O MotionPathPlugin usa transform para mover o elemento. Ele precisa estar em position:absolute dentro de um container relativo ao SVG.

.meu-elemento { position: absolute; top: 0; left: 0; will-change: transform; }

3. sm-draw-svg + sm-scroll-scrub — use sm-scroll-trigger para trigger externo

Elementos SVG não têm altura no layout — o ScrollTrigger calcula posição errada se o trigger for o próprio path. Aponte para um container com altura real.

<div id="meu-trigger" style="padding:60px 0">
  <path sm-draw-svg sm-scroll-trigger="#meu-trigger" />
</div>