Mini-componentes animados Animações

O que é

São efeitos pequenos que precisam de uma estrutura de HTML própria (não é só colocar sw-ani num elemento). O cartão que vira mostra a frente e, ao passar o mouse, o verso — bom para "antes e depois", perguntas e respostas, equipe (foto na frente, contato no verso). A barra que se enche mostra porcentagens de forma animada (habilidades, metas, avaliações). O traço que se desenha anima um desenho em SVG (assinatura, seta, ícone de linha) como se fosse feito à mão.

Tudo é CSS do arquivo principal. O cartão vira com o :hover. A barra e o traço esperam aparecer na tela: o SW Core percebe e liga a animação (uma vez só). O quanto a barra enche é a variável --sw-bar-to (0 a 1); o tamanho do traço é --sw-draw-len. Não precisa do pacote de animação.

Quando usar

• Cartão que vira: conteúdo curto com "segunda face" — preço no verso, contato do profissional, resposta de uma pergunta.
• Barra que se enche: números que ficam mais interessantes animados — "Satisfação 98%", "Meta do mês 75%". Para barra de progresso de verdade (upload, etapas), use o componente Progress.
• Traço que se desenha: detalhes decorativos em linha — sublinhado desenhado à mão, seta apontando para o botão, assinatura.

Comece aqui

1. 1

   Coloque o SW Core na página (CSS no <head>, JS no fim do <body>). O JS é o que percebe quando a barra e o traço aparecem.

   <link rel="stylesheet" href="swcore/swcore.min.css">
   
   <!-- fim do <body> -->
   <script src="swcore/swcore.min.js"></script>

2. 2

   Copie a estrutura da peça que quiser. Por exemplo, a barra que enche até 75% quando aparece:

   <style>
     .meta-75 { --sw-bar-to: .75; }   /* 0 = vazia, 1 = cheia */
   </style>
   <div sw-bar-fill class="meta-75"><span></span></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.

<style>
  .cartao-equipe { width: 22rem; height: 16rem; }
</style>
<div sw-flip-card class="cartao-equipe">
  <div sw-flip-card-faces>
    <div sw-flip-card-face><strong>Dra. Ana Lima</strong><br>Dentista</div>
    <div sw-flip-card-face="back"><a href="/agendar?dra=ana" sw-btn="lit p"><i class="swi-calendar"></i> Agendar</a></div>
  </div>
</div>

<style>
  .n-satisf { --sw-bar-to: .98; }
  .n-prazo  { --sw-bar-to: .92; --i: 1; }
  .n-indica { --sw-bar-to: .85; --i: 2; }
</style>
<div class="flx f-cl gap-4">
  <div>
    <div class="flx j-sb"><span>Clientes satisfeitos</span><strong>98%</strong></div>
    <div sw-bar-fill class="n-satisf"><span></span></div>
  </div>
  <div>
    <div class="flx j-sb"><span>Entregas no prazo</span><strong>92%</strong></div>
    <div sw-bar-fill class="n-prazo"><span></span></div>
  </div>
  <div>
    <div class="flx j-sb"><span>Voltam a comprar</span><strong>85%</strong></div>
    <div sw-bar-fill class="n-indica"><span></span></div>
  </div>
</div>

<h2>Feito com <span class="t-pri">carinho</span></h2>
<svg sw-draw viewBox="0 0 200 20" width="200" height="20" class="t-pri" aria-hidden="true">
  <path d="M2 14 C 50 2, 120 22, 198 6" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
</svg>

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js. Não precisa do pacote de animação.

Cuidados — erros comuns

• Cartão que vira sem largura e altura fica com tamanho zero (as faces são sobrepostas e não empurram o cartão). Dê tamanho por uma classe sua.
• O cartão vira só com o mouse (:hover). No celular, o toque costuma virar, mas nem sempre desvira — não esconda informação importante só no verso.
• Na barra, esquecer o <span></span> de dentro deixa só o trilho, sem a parte que enche.
• --sw-draw-len menor que a linha faz o desenho aparecer tracejado. Na dúvida, use um número bem maior (ex.: 1000).
• O traço usa a cor do stroke do seu SVG. Com stroke="currentColor" ele segue a cor do texto (e troca sozinho com o tema).

O que ele não faz

• Barra e traço animam uma vez só (quando aparecem). Para repetir, use SW.Anime.replay(elemento).
• Quem ativou "reduzir movimento" vê a barra já cheia e o traço já desenhado.