Counter Animações

O que é

Faz um número contar para cima (de 0, ou de onde você quiser, até o valor final) na primeira vez que ele aparece na tela. Já sai formatado do jeito brasileiro — milhar com ponto, decimal com vírgula — e aceita texto antes e depois ("R$ ", "+", "%", " clientes").

O valor final vai em sw-ani-to. Quando o número chega a 85% da altura da tela, ele conta durante 2 segundos (mude com sw-ani-duration) e para no valor final. Acontece uma vez só: rolar de novo não repete.

Quando usar

• Seção de números / resultados: clientes atendidos, anos de mercado, projetos entregues.
• Prova social em página de vendas: "+1.200 alunos", "98,5% de aprovação".
• Painel ou relatório com destaque de um valor (faturamento, metas).
• Para contagem regressiva até uma data, use o Countdown.

Comece aqui

1. 1

   Coloque o SW Core e o pacote de animação (o swcore.motion.min.js vem antes do swcore.min.js).

   <!-- no <head> -->
   <link rel="stylesheet" href="swcore/swcore.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

   Coloque sw-ani="counter" e o valor final em sw-ani-to.

   0

   <span sw-ani="counter" sw-ani-to="15420">0</span>

3. 3

   Acrescente o que vem antes ou depois do número.

   0

   <span sw-ani="counter" sw-ani-to="15420" sw-ani-prefix="+" sw-ani-suffix=" clientes">0</span>

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="l l-3 gap-4 t-ct">
  <div>
    <span sw-ani="counter" sw-ani-to="15420" sw-ani-prefix="+" class="t-xg fw7 t-pri">15.420</span>
    <div class="t-mut">clientes atendidos</div>
  </div>
  <div>
    <span sw-ani="counter" sw-ani-to="12" class="t-xg fw7 t-pri">12</span>
    <div class="t-mut">anos de mercado</div>
  </div>
  <div>
    <span sw-ani="counter" sw-ani-to="98.5" sw-ani-decimals="1" sw-ani-suffix="%" class="t-xg fw7 t-pri">98,5%</span>
    <div class="t-mut">de satisfação</div>
  </div>
</div>

<div class="bg-sur bd r-m p-4">
  <div class="t-mut"><i class="swi-trending-up"></i> Faturamento do mês</div>
  <span sw-ani="counter" sw-ani-to="48750.9" sw-ani-decimals="2" sw-ani-prefix="R$ "
        sw-ani-duration="1.2" class="t-xg fw7">R$ 48.750,90</span>
</div>

<div class="bg-g-err r-m p-4 t-ct">
  <strong>Turma de outubro</strong>
  <div>restam <span sw-ani="counter" sw-ani-from="40" sw-ani-to="7" sw-ani-duration="2.5">7</span> vagas</div>
</div>

API (JavaScript)

Precisa de quê

• swcore.motion.min.js (já traz o GSAP) e swcore.motion.min.css, antes do swcore.min.js.

Cuidados — erros comuns

• Escreva o valor final formatado dentro do elemento (15.420) e o valor cru no sw-ani-to (15420). O texto de dentro é o que aparece para buscadores e para quem está sem JavaScript.
• Sem sw-ani-to, ele lê o número de dentro — e 15.420 vira 15,42 (o ponto é lido como decimal). Sempre informe sw-ani-to.
• No sw-ani-to o decimal é com ponto (98.5). Com vírgula (98,5) ele entende 98.
• Se usar sw-ani-sep=",", o decimal também sai com vírgula e os dois se confundem. Prefira ponto ou espaço como separador.

O que ele não faz

• Conta uma vez só por carregamento de página.
• Não há opção de "curva" do movimento: ele começa rápido e desacelera no fim.
• Quem ativou "reduzir movimento" no sistema vê o valor final direto, sem contar.