código de edição // GSAP

Instruções

Introdução

Este template usa GSAP (com o plugin ScrollTrigger) para as estatísticas animadas e Lenis para o scroll suave. GSAP + ScrollTrigger e a biblioteca Lenis estão carregados no projeto - mantenha-os no lugar ou os efeitos não funcionarão. Todos os nomes de classe e atributos personalizados mencionados abaixo devem permanecer intactos para que o código encontre os elementos corretos.

Pré-carregador

Este template inclui um pré-carregador - a tela de carregamento com a marca que aparece brevemente enquanto a página carrega, exibindo o seu logotipo antes de revelar o conteúdo. Ele é construído como um componente reutilizável, então você o edita uma vez e todas as instâncias do site são atualizadas automaticamente.

Como funciona (visão geral)

O pré-carregador fica no topo da página como um componente. Dentro dele, wrap_preloader-logo contém duas coisas: um embed de código chamado logo-preloader, que contém o logotipo como SVG inline, e animation_preloader, que conduz a animação de revelação. Como o logotipo é um SVG que usa currentColor no preenchimento, ele herda a cor do seu estilo e se adapta automaticamente à sua paleta.

Como substituir o logotipo

Como o pré-carregador é um componente, você substitui o logotipo editando o componente - faça uma vez e ele atualiza em todos os lugares em que o pré-carregador é usado.

Selecione o pré-carregador e abra-o para edição (Editar componente).
Dentro de wrap_preloader-logo, encontre o embed de código chamado logo-preloader.
Abra esse embed - você verá o markup SVG do logotipo atual. Substitua pelo SVG do seu próprio logotipo.
Para obter o seu SVG: no Figma, selecione o logotipo e escolha Copiar como SVG (clique com o botão direito → Copiar/Colar como → Copiar como SVG) e cole no embed.
Garanta que o seu SVG use currentColor no preenchimento em vez de uma cor fixa - substitua qualquer fill="#______" por fill="currentColor". É isso que permite que o logotipo use a cor do seu estilo e fique consistente com a sua paleta.

‍

Um SVG com currentColor fica assim:

<svg viewBox="0 0 120 32" xmlns="http://www.w3.org/2000/svg">
  <path d="…your logo path…" fill="currentColor"/>
</svg>

Removendo ou adicionando o pré-carregador

Não quer um pré-carregador? Exclua todo o componente do pré-carregador da página - nada mais depende dele.
Quer em mais páginas? Adicione o componente do pré-carregador no topo de qualquer página em que queira que ele apareça.

Onde o código fica

O SVG do logotipo está dentro do embed de código logo-preloader, que fica no componente do pré-carregador - edite-o no Designer por meio do componente, não nas Configurações do projeto. Como é um componente, uma edição se aplica a todas as páginas que o usam.

Notas importantes

É um componente - editar o logotipo uma vez atualiza todas as instâncias do site.
Mantenha fill="currentColor" no seu SVG para que o logotipo herde a cor corretamente; um preenchimento fixo o trava em uma única cor e pode não combinar com a sua paleta.
Cole o logotipo como um SVG inline (não como um <img>), para que ele permaneça nítido e adaptável à cor.
Mantenha o embed logo-preloader e o wrapper wrap_preloader-logo intactos para que a animação continue mirando os elementos corretos.

Estatísticas de contagem

Este template inclui um script global que faz qualquer número contar de zero quando entra na tela, com um leve desfoque que se resolve enquanto o número se estabiliza. Ele é usado para as estatísticas de prova ao longo do template. Cada contador roda uma única vez - na primeira vez em que entra na área visível.

Como funciona (visão geral)

O script encontra todos os elementos que carregam o atributo count-up. Para cada um, ele lê o texto digitado como valor-alvo - um pequeno auxiliar remove a formatação e identifica se o último separador é uma vírgula decimal ou um separador de milhar, de modo que tanto 1,200 quanto 1.200 são lidos corretamente. Ele também captura qualquer sufixo não numérico (como +, %, k, M). Quando o elemento atinge 80% da tela, uma timeline do GSAP roda uma vez: o elemento desfoca de 6px até ficar nítido, enquanto um contador anima de zero até o alvo. Em cada frame, o número é arredondado para um valor inteiro, re-formatado com separadores de milhar e o sufixo é recolocado.

Como usar

Selecione o elemento de texto que contém o número.
Adicione o atributo personalizado count-up a ele (nome do atributo count-up, sem valor necessário).
Digite o número final diretamente no elemento no Designer - esse valor digitado é o alvo até onde o contador sobe.
Qualquer sufixo é mantido automaticamente: 250+, 98%, 1.2k, 40M funcionam - basta digitá-los no elemento.

Onde o código fica

O script é adicionado uma vez, globalmente:

Configurações do projeto → Código personalizado
Coloque-o na seção Rodapé (Antes de </body>)

‍

O código

<script>
gsap.registerPlugin(ScrollTrigger);
function parseFormattedNumber(str) {
  var num = str.replace(/[^\d.,]/g, "");
  var decimal = num.match(/[.,](\d{1,2})$/);
  return parseFloat(decimal
    ? num.slice(0, decimal.index).replace(/[.,]/g, "") + "." + decimal[1]
    : num.replace(/[.,]/g, "")
  );
}
gsap.utils.toArray("[count-up]").forEach(function(el) {
  var raw = el.textContent.trim();
  var target = parseFormattedNumber(raw);
  var suffix = raw.replace(/[\d,.]/g, "");
  var counter = { val: 0 };
  gsap.timeline({
    scrollTrigger: { trigger: el, start: "top 80%", once: true }
  })
  .fromTo(el, { filter: "blur(6px)" }, { filter: "blur(0px)", duration: 2.25, ease: "power2.out" }, 0)
  .to(counter, {
    val: target,
    duration: 2,
    ease: "power2.out",
    onUpdate: function() {
      el.textContent = gsap.utils.snap(1, counter.val).toLocaleString() + suffix;
    }
  }, 0);
});
</script>

‍

Quer ajustar (opcional)

Velocidade da contagem: altere duration: 2 no contador (maior = contagem mais lenta).
Quantidade e velocidade do desfoque: altere blur(6px) para um início mais forte/mais suave e duration: 2.25 para o tempo até ficar nítido.
Ponto de disparo: altere start: "top 80%" - a que distância na tela o elemento deve rolar antes de disparar.

Notas importantes

Isso exige que GSAP + ScrollTrigger estejam carregados no site.
Cada contador dispara uma única vez, na primeira vez em que entra na tela.
Apenas números inteiros - a contagem é arredondada para inteiros, então decimais no alvo são arredondados. Para uma estatística decimal, defina-a como texto estático sem o atributo.
Apenas um sufixo é preservado. Um símbolo inicial como $1,200 é empurrado para o final (1,200$). Para moeda, coloque o símbolo em um elemento separado ao lado do número ou use-o como sufixo.
Mantenha o atributo count-up em qualquer elemento que queira animar.

Scroll suave com Lenis

Este template inclui o Lenis, que adiciona um scroll suave e com peso em todo o site - a sensação de rolagem ligeiramente mais suave e "pesada", em vez do salto padrão do navegador. Ele roda automaticamente em todo o site.

Como funciona (visão geral)

A folha de estilos e a biblioteca do Lenis são carregadas de um CDN e, em seguida, uma instância do Lenis é criada e conduzida por um loop de requestAnimationFrame que roda em cada frame. Dois valores definem a sensação: lerp controla o quanto o scroll é suavizado e wheelMultiplier controla a velocidade do scroll. A suavização por toque está desligada, então celulares e tablets mantêm o scroll nativo.

Como usar

Não é preciso configurar nada por página - funciona automaticamente assim que a página carrega. Não há classes ou atributos para adicionar.

Onde o código fica

The code is added once, globally:

Configurações do projeto → Código personalizado
Coloque-o na seção Rodapé (Antes de </body>)

<link rel="stylesheet" href="../lenis%401.2.3/dist/lenis.css">
<script src="../lenis%401.2.3/dist/lenis.min.js"></script>
<script>
let lenis = new Lenis({
  lerp: 0.1,
  wheelMultiplier: 0.7,
  gestureOrientation: "vertical",
  normalizeWheel: false,
  smoothTouch: false,
});
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}
requestAnimationFrame(raf);
</script>

Quer ajustar (opcional)

Suavidade: altere lerp: 0.1 - menor é mais flutuante e suave, maior é mais rápido e próximo do nativo.
Velocidade do scroll: altere wheelMultiplier: 0.7 - aumente se a rolagem parecer lenta demais.

Notas importantes

Mantenha tanto a folha de estilos <link> quanto o <script> do Lenis no lugar - remova qualquer um e o scroll suave para de funcionar.
Sem dependência de GSAP; o Lenis roda por conta própria.
Dispositivos de toque usam intencionalmente o scroll nativo (smoothTouch: false) - recomendado, deixe como está.