Gasp guideline
Every GSAP script used in this template is listed on this page, along with instructions on how to find and edit each one. Each code block includes clear explanations to help you understand exactly how it works.
The script is located in Site Settings under the Footer Code area.
Counter on scroll
This script creates a number counter animation that runs when the element scrolls into view. The numbers animate from 0 to their final value using a scrambling number effect powered by GSAP.
<script>
//COUNTER ON SCROLL
document.querySelectorAll('.counter-animation').forEach(el => {
const finalValue = el.textContent.trim();
gsap.set(el, { textContent: "0" });
ScrollTrigger.create({
trigger: el,
start: "top 80%",
once: true,
onEnter: () => {
gsap.to(el, {
duration: 3,
scrambleText: {
text: finalValue,
chars: "0123456789",
revealDelay: 0.2
},
ease: "power3.out"
});
}
});
});
</script>
