Motion Path Animações

O que é

Você desenha um caminho (uma curva em SVG) e escolhe um elemento — um ícone, um avião de papel, uma caixinha — para percorrer esse caminho. Por padrão, quem manda é a rolagem: desceu a página, o objeto avança; subiu, ele volta. Também dá para ele andar sozinho quando aparece na tela, uma vez ou indo e voltando sem parar.

São duas peças, lado a lado dentro da mesma caixa: o <svg sw-ani-path> com o caminho (um <path> dentro) e o elemento com sw-ani="motion-path", que anda por cima. A linha-guia pode ficar visível, clarinha ou invisível — o objeto segue o traçado de qualquer jeito.

Quando usar

• "Seu pedido a caminho": um pacote que vai de um ponto a outro conforme a pessoa rola.
• Topo de página com personalidade: um avião de papel ou foguete cruzando a tela em curva.
• Linha do tempo / etapas: um marcador que desce pela linha enquanto a pessoa lê.
• Detalhe decorativo que anda sozinho (bolinha orbitando, ícone passeando): sw-ani-play="auto".

Comece aqui

1. 1

   Coloque o SW Core e o pacote de animação (o swcore.motion.min.js já traz o GSAP e vem antes do swcore.min.js). O segundo CSS só é preciso se usar ícones swi-*.

   <!-- no <head> -->
   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.compl.min.css">
   <link rel="stylesheet" href="swcore/swcore.motion.min.css">
   
   <!-- no fim do <body>: o motion ANTES do swcore -->
   <script src="swcore/swcore.motion.min.js"></script>
   <script src="swcore/swcore.min.js"></script>

2. 2

   Dentro de uma caixa com class="rel", coloque o SVG com o caminho (sw-ani-path) e, ao lado dele, o elemento que anda (sw-ani="motion-path"). Role a página devagar: o coração acompanha.

   <div class="rel">
     <svg sw-ani-path viewBox="0 0 320 120" class="w-fl blk op-3">
       <path d="M10,60 Q85,0 160,60 T310,60" fill="none" stroke="currentColor" stroke-width="2"/>
     </svg>
     <i sw-ani="motion-path" class="swi-heart abs pin-t pin-l t-pri t-gg"></i>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="bg-sur bd r-m p-3">
  <div class="flx j-sb">
    <span><i class="swi-store"></i> Loja</span>
    <span><i class="swi-map-pin"></i> Sua casa</span>
  </div>
  <div class="rel">
    <svg sw-ani-path viewBox="0 0 320 80" class="w-fl blk op-3">
      <path d="M10,60 C 80,10 140,70 200,35 S 280,20 310,60"
            fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="6 6"/>
    </svg>
    <i sw-ani="motion-path" class="swi-package abs pin-t pin-l t-pri t-gg"></i>
  </div>
</div>

<section class="rel topo">
  <h1>Fale com a gente</h1>
  <!-- caminho invisível ocupando a seção toda -->
  <svg sw-ani-path viewBox="0 0 320 120" class="abs pin op-0">
    <path d="M-20,110 C 80,-20 220,140 340,10" fill="none" stroke="currentColor"/>
  </svg>
  <i sw-ani="motion-path" sw-ani-play="auto" sw-ani-duration="4" sw-ani-repeat="true"
     class="swi-send abs pin-t pin-l t-xg"></i>
</section>

<div class="flx gap-4">
  <div class="rel">
    <svg sw-ani-path viewBox="0 0 20 200" width="20" height="200" class="blk op-3">
      <path d="M10,5 L10,195" fill="none" stroke="currentColor" stroke-width="2"/>
    </svg>
    <i sw-ani="motion-path scrub" class="swi-check-circle abs pin-t pin-l t-suc t-g"></i>
  </div>
  <div class="flx f-cl j-sb">
    <span><strong>2019</strong> — primeiro cliente</span>
    <span><strong>2022</strong> — 100 sites no ar</span>
    <span><strong>2026</strong> — sistema próprio</span>
  </div>
</div>

API (JavaScript)

Precisa de quê

• swcore.motion.min.js (já traz o GSAP com o plugin de caminho) e swcore.motion.min.css, antes do swcore.min.js.
• swcore.compl.min.css só se o objeto que anda for um ícone swi-*.

Cuidados — erros comuns

• O SVG e o objeto precisam ser irmãos (mesmo pai). Se o SW Core não achar um sw-ani-path ao lado, ele usa o primeiro da página inteira — e o objeto vai andar na linha errada.
• Um sw-ani-path por caixa. Dois caminhos na mesma caixa: vale só o primeiro.
• O caminho tem que ser <path>. <circle>, <rect> e <line> dentro do SVG são ignorados — converta para path no editor de vetor.
• O "vai e volta" (sw-ani-repeat="true") só funciona junto com sw-ani-play="auto".
• Sem abs pin-t pin-l no objeto ele ocupa espaço embaixo do SVG antes de começar a andar, empurrando o resto da página.

O que ele não faz

• O objeto não gira acompanhando a curva — ele só se desloca. Um avião continua apontando para o mesmo lado o percurso todo.
• O ponto em que o percurso começa e termina na rolagem é fixo (do SVG entrar embaixo até sair em cima).
• Quem ativou "reduzir movimento" no sistema vê o objeto parado no caminho.