Instruções

Guia de Início Rápido: Comece a editar seu site com este guia fácil de seguir.

Aqui você encontra todos os atributos do GSAP, as variáveis do Webflow conectadas ao GSAP e como desligar o GSAP. Isso te dá opções poderosas de personalização para transformar este template de forma profunda.

Todas as animações do GSAP são controladas por atributos. Você encontra todos os atributos em negrito abaixo.

Existem variáveis do Webflow para algumas das configurações do GSAP. Você pode personalizar este template sem nunca olhar uma única linha de código.

Isso define as configurações iniciais dos escalonamentos de texto e div.
No caso dos escalonamentos de texto — cada caractere de um parágrafo começará 32px abaixo (Posição Y), com 16px de desfoque e 0 de opacidade.

Isso define quando os escalonamentos de texto e div são disparados a partir do topo.

Para efeitos sem variáveis, altere os números no código.

gsap.fromTo(introHeroThumbs, { xPercent: 1280 }, {
  xPercent: 0,
  duration: 3,     // ← segundos que as miniaturas levam para deslizar
  stagger: 0.05,   // ← intervalo entre cada miniatura
  ease: "smooth",  // ← sensação do movimento (veja os eases abaixo)
  delay: 1         // ← espera antes de começar
});

Para acelerar a introdução, reduza duration (ex.: 3 → 1.5).
Para começar mais cedo, reduza delay (ex.: 1 → 0).

Ease — aceita qualquer string de ease do GSAP: "power2.out", "sine", "none", ou o ease personalizado "smooth" definido perto do início do código.
Troque a string para mudar a sensação.

scrollTrigger: {
  trigger: el,
  start: 'top bottom',       // quando começa
  end: 'center center-=25%', // quando termina
  scrub: true                // vincula o progresso ao scroll
}

scrub: true vincula a animação à posição do scroll. Defina um número (ex.: 0.5) para adicionar suavização, ou remova o scrub para uma reprodução única ao entrar.

scrollTrigger: {
  trigger: grid,
  start: 'center center',
  end: '+=250%',   // ← menor = distância de scroll mais curta (ex.: 150%)
  pin: grid.parentNode,
  scrub: 0.3,
}

Para removê-la de apenas um elemento: exclua o atributo data- dele (ex.: data-gsap-stagger-slow) no Designer. Nenhuma alteração de código é necessária.

1. Abra o código personalizado nas configurações do site.
2. Role até o bloco DOMContentLoaded no final e encontre a linha correspondente. Comente-a com // linha por linha.

// if (gsap.utils.toArray('[data-gsap-stagger-slow]').length > 0) {
//   animateStagger('[data-gsap-stagger-slow]', textStaggerSlow);
// }

3. Cada efeito GSAP fica dentro da sua função, então desativar a função remove também o gatilho dela — nada mais para limpar.

- Os efeitos de scroll (work clip‑path, scroll text, center reveal, CTA grid) simplesmente aparecerão instantaneamente em sua posição final em vez de animar.

- O ticker em loop (data-gsap-stagger-loop) vira texto estático depois de removido.

Isto proporciona rolagem suave em todo o template. Para desativar, basta comentar este código.

// Inicializa o scroll suave do Lenis
const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    smooth: true
    });
    
    // Conecta o Lenis ao GSAP ScrollTrigger
    lenis.on('scroll', ScrollTrigger.update);
    
    gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
});
    
gsap.ticker.lagSmoothing(0);

});