Creative Digital Agency Webflow Template.
GSAP & Lenis Smooth Scroll & Counter Animation (GSAP + ScrollTrigger)
This template uses GSAP (GreenSock Animation Platform) together with Lenis to create smooth scrolling and scroll-based animations. This template includes an animated counter powered by GSAP and ScrollTrigger. The counter starts from 0 and counts up to the target value when it enters the viewport.
<link rel="stylesheet" href="https://unpkg.com/lenis@1.3.20/dist/lenis.css">
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/lenis@1.3.20/dist/lenis.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
if (typeof gsap === "undefined") {
console.error("GSAP is not loaded.");
return;
}
if (typeof ScrollTrigger === "undefined") {
console.error("ScrollTrigger is not loaded.");
return;
}
if (typeof Lenis === "undefined") {
console.error("Lenis is not loaded.");
return;
}
gsap.registerPlugin(ScrollTrigger);
/* LENIS */
const lenis = new Lenis({
duration: 1.5,
easing: (t) => 1 - Math.pow(1 - t, 3),
smoothTouch: false
});
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => {
lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);
/* COUNTERS */
gsap.utils.toArray(".counter").forEach((counter) => {
const finalText = counter.textContent.trim();
const match = finalText.match(
/^([^\d-]*)(-?\d+(?:,\d+)*(?:\.\d+)?)(.*)$/
);
if (!match) return;
const prefix = match[1];
const originalNumber = match[2];
const suffix = match[3];
const rawNumber = originalNumber.replace(/,/g, "");
const endValue = parseFloat(rawNumber);
const decimals = rawNumber.includes(".")
? rawNumber.split(".")[1].length
: 0;
const hasCommas = originalNumber.includes(",");
const obj = {
value: 0
};
counter.textContent =
prefix + obj.value.toFixed(decimals) + suffix;
gsap.to(obj, {
value: endValue,
duration: 3,
ease: "power2.out",
scrollTrigger: {
trigger: counter,
start: "top 85%",
once: true
},
onUpdate: () => {
let formattedVal = obj.value.toFixed(decimals);
if (hasCommas) {
const parts = formattedVal.split(".");
parts[0] = parts[0].replace(
/\B(?=(\d{3})+(?!\d))/g,
","
);
formattedVal = parts.join(".");
}
counter.textContent =
prefix + formattedVal + suffix;
}
});
});
ScrollTrigger.refresh();
});
</script>Steps for Safely Removing Animations Without Breaking Layout. & Steps for Safely Removing the Counter Animation Without Breaking Layout
When removing GSAP or Lenis animations, avoid deleting the elements or layout classes that control the page structure. Follow these steps to safely remove animations: & Follow these steps when removing the GSAP counter animation to keep the existing layout and content intact:
1. **Locate the counter animation code**
Find the GSAP/ScrollTrigger code that targets the `.counter` class and controls the number animation.
2. **Remove only the counter animation logic**
Delete the JavaScript responsible for animating the counter values. Do not remove the counter elements, Webflow classes, containers, or layout structure.
3. **Remove unused GSAP dependencies**
If GSAP and ScrollTrigger are not used by any other animation on the site, their related scripts and registration can be removed. If other animations depend on them, keep them.
4. **Remove Lenis only if it is no longer needed**
If Lenis is used only for smooth scrolling and no other functionality depends on it, remove the Lenis CSS, JavaScript, initialization, RAF loop, and ScrollTrigger integration.
5. **Restore the original counter values**
Make sure every `.counter` element contains its intended final number or value in the Webflow Designer or CMS. The value should not remain at `0` after the animation script is removed.
6. **Keep the `.counter` class**
Do not remove the `.counter` class if it is used for typography, spacing, styling, or other functionality. Remove it only after confirming that it is not needed elsewhere.
7. **Check animation-related CSS**
Make sure no animation-related `opacity`, `transform`, `visibility`, positioning, or other styles leave the counters hidden, shifted, or visually incorrect.
8. **Check ScrollTrigger dependencies**
If ScrollTrigger is used by other animations, keep it. Otherwise, its script and registration can be removed.
9. **Test the layout**
Preview the website on desktop, tablet, and mobile. Check the counter values, spacing, alignment, scrolling, sections, interactions, and footer.
10. **Publish and verify**
Publish or preview the site and confirm that the original layout and content remain intact after the animation has been removed.
**Important:** Remove only the animation logic. Do not remove the HTML elements, Webflow classes, content, containers, or layout structure unless you have confirmed they are no longer required. This helps prevent unexpected spacing, positioning, or responsive layout issues.
