SWCore / Animações / Motion Path

Motion Path Animações

Um elemento percorre o caminho de uma linha SVG conforme o scroll.

O que é

Faz um elemento (bolinha, ícone) seguir exatamente o traçado de um <path> SVG à medida que a página rola.

Como funciona

O [sw-ani-path] (o SVG com a linha-guia, normalmente sutil/quase invisível) fica separado do elemento que se move (sw-ani="motion-path") — o GSAP calcula a posição ao longo do caminho pra cada progresso de scroll.

Exemplos

Bolinha seguindo a curva — role a página Ao vivo

O avanço da bolinha é preso à rolagem da página — role pra frente e pra trás.

<div style="position:relative">
  <!-- a linha-guia -->
  <svg sw-ani-path viewBox="0 0 320 120">
    <path d="M0,60 Q80,0 160,60 T320,60" fill="none" stroke="currentColor"/>
  </svg>

  <!-- quem percorre -->
  <div sw-ani="motion-path"></div>
</div>

<!-- os dois ficam SEPARADOS: o SVG guia, o elemento anda -->
Com a linha escondida Ao vivo 
<!-- guia invisível: só o objeto aparece percorrendo o trajeto -->
<svg sw-ani-path viewBox="0 0 320 120" style="opacity:0">
  <path d="M0,100 C 80,10 240,10 320,100" fill="none"/>
</svg>

<div sw-ani="motion-path">
  <i class="swi-package"></i>
</div>
Trajeto mais elaborado Ao vivo 
<svg sw-ani-path viewBox="0 0 320 180">
  <path d="M10,150 C 60,20 120,180 170,90 S 260,10 310,120"
        fill="none" stroke="currentColor" stroke-dasharray="4 4"/>
</svg>
<div sw-ani="motion-path"></div>

<!-- desenhe o caminho no Figma/Illustrator e cole o "d" aqui -->

Atributos

sw-ani-path
no SVG que desenha a linha-guia — é o caminho que será percorrido

Variantes

[sw-ani-path]
a linha-guia (um <svg> com um <path> dentro)
sw-ani="motion-path"
o elemento que anda por cima dela
(guia visível)
deixe a linha com opacidade baixa se quiser que ela apareça
(guia invisível)
esconda a linha e só o objeto aparece percorrendo o trajeto

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • Precisa do pacote swcore.motion.min.css/js.

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

  • O caminho precisa ser um <path> dentro de um <svg sw-ani-path>. Formas prontas (<circle>, <rect>) não servem — converta pra path no editor.
  • O contêiner dos dois precisa de position:relative, senão o elemento se posiciona em relação à página inteira.
← AnteriorSVG Draw (traço) Próximo →Tilt (3D no mouse)