Número que SOBE de um valor até outro, uma vez só, quando entra na tela — o clássico "+15.000 clientes".
O que é
Estatística animada de seção de resultados: sobe de 0 (ou de onde você definir) até um número-alvo, formatado em pt-BR (milhar com ponto, decimal com vírgula), com prefixo/sufixo livres.
Como funciona
Dispara UMA vez via GSAP + ScrollTrigger quando o elemento entra na tela (diferente do Countdown, que roda contínuo preso ao relógio, não ao scroll). Se sw-ani-to não for informado, lê o próprio texto inicial do elemento como alvo.
Exemplos
Três estatísticas Ao vivo
0
clientes
0
satisfação
0
faturamento
<div sw-ani="counter" sw-ani-to="15420" sw-ani-suffix="+" sw-ani-duration="2">0</div>
<!-- sobe de 0 até 15.420 uma vez, quando entra na tela -->
Prefixo e sufixo — dinheiro, porcentagem, "+" Ao vivo
0
prefixo
0
sufixo
0
os dois
<div sw-ani="counter" sw-ani-to="248900" sw-ani-prefix="R$ ">0</div>
<div sw-ani="counter" sw-ani-to="87" sw-ani-suffix="%">0</div>
<div sw-ani="counter" sw-ani-to="1200" sw-ani-prefix="+" sw-ani-suffix=" projetos">0</div>
<!-- repare no espaço dentro do valor: "R$ " e " projetos" -->
Decimais e separador de milhar Ao vivo
0
padrão — 1.234.567
0
sep="" — sem ponto
0
2 casas — vírgula
<!-- padrão pt-BR: milhar com ponto -->
<div sw-ani="counter" sw-ani-to="1234567">0</div>
<!-- ano/versão/código: sem separador -->
<div sw-ani="counter" sw-ani-to="2027" sw-ani-sep="">0</div>
<!-- decimal com vírgula -->
<div sw-ani="counter" sw-ani-to="9.87" sw-ani-decimals="2">0</div>
De onde começa e quanto demora Ao vivo
1.000
de 1.000 a 1.500
0
rápido (0,6s)
0
lento (5s)
<!-- não começa do zero -->
<div sw-ani="counter" sw-ani-from="1000" sw-ani-to="1500">1.000</div>
<!-- duração em SEGUNDOS (padrão 2) -->
<div sw-ani="counter" sw-ani-to="500" sw-ani-duration="0.6">0</div>
Atributos
sw-ani-to
número final (obrigatório, ou lê o texto atual do elemento)
sw-ani-from
número inicial — padrão 0
sw-ani-duration
duração em segundos — padrão 2
sw-ani-decimals
casas decimais — padrão 0
sw-ani-prefix / sw-ani-suffix
texto fixo antes/depois do número (ex.: "R$ ", "+")
sw-ani-sep
separador de milhar — padrão "." (vazio = sem separador)
Variantes
(sem sw-ani-to)
usa o número que já está escrito no elemento como alvo
sw-ani-sep=""
sem separador de milhar — bom pra ano, código, versão
sw-ani-decimals="1"
uma casa decimal, com vírgula (pt-BR)
Eventos
Nenhum.
API (JavaScript)
Nenhum.
Requisitos
Precisa do pacote swcore.motion.min.css/js carregado (área de Animação).
Limitações — o que ele não faz
Roda uma vez, quando entra na tela — não repete a cada passada. Pra número que desce até uma data, o componente é o Countdown.
Escreva o número final dentro do elemento no HTML: é o que aparece se o JS não carregar, e é o que buscador e leitor de tela leem.
