Instructions

// 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
    // ============================================

    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();
    });

To edit animations:

Open the Navigator panel.

Select the section that contains the animation.

Go to the Interactions tab to modify or replace the animation as needed.

Nav Link item and Footer Widget item also use GSAP hover Intersection

Note: Some elements may be set to visibility: hidden, display: none, or opacity: 0. To edit these, simply change their visibility in the Style panel to reveal them.

Need help? We’re here for you!
Contact us through Webflow Support and we’ll respond promptly to assist with your questions.