SVG e Motion Path Animações

Desenha um traçado SVG na tela e move um objeto por uma curva — só com atributos, sem escrever a matemática da curva.

O que é

Duas coisas relacionadas: revelar um caminho SVG como se estivesse sendo desenhado (efeito de "caneta" percorrendo o traço) e mover um elemento ao longo de uma curva SVG, seguindo a curva exatamente em vez de uma linha reta.

Como funciona

O SWCore mede o comprimento do caminho SVG (getTotalLength()) e calcula o movimento internamente — quem usa a biblioteca não escreve a trigonometria da curva, só aponta pro <path> e pro objeto que deve segui-la. data-sw="motion-path" fica direto no objeto que se move; ele procura o <path> dentro do elemento mais próximo marcado com data-sw-path (irmão dele, no mesmo container).

Exemplos

data-sw="svg-draw" — traçado desenhando sozinho ao entrar na tela Ao vivo

<svg viewBox="0 0 200 60" width="100%" height="60">
  <path d="M10,50 C60,5 140,5 190,50" fill="none" stroke="currentColor" stroke-width="3" data-sw="svg-draw"></path>
</svg>

data-sw-play="scroll" — o objeto anda na curva conforme rola Ao vivo

<svg data-sw-path viewBox="0 0 200 100" width="100%" height="100">
  <path d="M10,90 C60,10 140,10 190,90" fill="none" stroke="currentColor"></path>
</svg>
<div data-sw="motion-path" data-sw-play="scroll"></div>
<!-- data-sw-path fica na <svg> (ou em quem envolve o <path>); o objeto é um irmão dela -->

data-sw-play="auto" data-sw-repeat="true" — toca sozinho, em loop Ao vivo

<svg data-sw-path viewBox="0 0 200 100" width="100%" height="100">
  <path d="M10,90 C60,10 140,10 190,90" fill="none" stroke="currentColor"></path>
</svg>
<div data-sw="motion-path" data-sw-play="auto" data-sw-repeat="true"></div>

Atributos

data-sw="svg-draw"

no <path> — anima o desenho do traçado do início ao fim, ao entrar na tela

data-sw="motion-path"

no elemento que vai se mover — ativa o percurso dele sobre a curva

data-sw-path

no elemento (geralmente a <svg>) que contém o <path> de referência, próximo do objeto

data-sw-play="scroll" (padrão) | "auto"

acompanha o progresso do scroll, ou toca sozinho ao entrar na tela

data-sw-repeat="true"

só em data-sw-play="auto" — repete o percurso (ida e volta) em loop

data-sw-duration

só em data-sw-play="auto" — segundos de um percurso completo (padrão 2.4)

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Precisa do gsap-bundle.js (GSAP com ScrollTrigger já incluso). O JS e o CSS do Motion já vêm dentro de swcore.js/swcore.css, sem arquivo extra do SWCore. A curva precisa ser um <path> SVG válido.

Limitações — o que ele não faz

Estágio inicial dentro do Smooll v2 (Aula 21 do curso) — testado no laboratório próprio, ainda não com o mesmo tempo de maturação em produção que Pin/Reveal/Sections.

← AnteriorTransição de página Próximo →Interações