Instruction

Lenis Smooth Scrolling

This provides smooth scrolling across the entire template. To turn off just comment out this code or delete the code from site settings.

// Initialize Lenis smooth scroll
const lenis = new Lenis({
    duration: 1.2,
    easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    smooth: true
    });

    // Connect Lenis to GSAP ScrollTrigger
    lenis.on('scroll', ScrollTrigger.update);

    gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
});

gsap.ticker.lagSmoothing(0);

Counter Animation with GSAP

What It does

This animates counters to count up from 0 on scroll.

HTML Requirements

Elements like <div class="counter">1234</div> with target number as text. Note: Don't includ the comma in original content in Webflow.

  // ============================================
    // COUNTER ANIMATION WITH GSAP
    // ============================================

    function initCounterAnimations() {
        const counterElements = document.querySelectorAll(".counter");

        counterElements?.forEach(counterItem => {
            gsap.from(counterItem, {
                textContent: 0,
                duration: 3,
                ease: "power1.in",
                snap: { textContent: 1 },
                scrollTrigger: {
                    trigger: counterItem,
                    start: "top 95%",
                    once: true
                },
                onUpdate: function () {
                    const counterValue = Math.ceil(parseInt(counterItem.textContent) || 0);
                    counterItem.textContent = counterValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                }
            });
        });
    }

    // ============================================
    // INITIALIZE ANIMATIONS ON PAGE LOAD
    // ============================================
    document.addEventListener('DOMContentLoaded', function () {
        initCounterAnimations();
    });

Element Map

.counter: Text animates from 0 to value, with commas.

Customizing Key Variables

Duration: 4 → 6 for slower.
```
duration: 6
```
Reveal: 0.5 → 0.7.
```
duration: 0.7
```
Ease: "power1.in" → "power2.inOut".
```
ease: "power2.inOut"
```
Start: "top 95%" → "top 80%" for delayed trigger.
```
start: "top 80%"
```

Removing Animations

Comment/Remove: The code from site settings that are shown in Code Block 2