Instructions
This guide provides clear, step-by-step instructions for customizing and modifying GSAP animations used throughout your template.
GSAP
This guide explains how GSAP (GreenSock Animation Platform) is integrated into the Webflow template to create smooth and responsive animations. It provides a clear breakdown of each GSAP-powered feature, helping you easily modify and optimize animations to match your design goals.
1. Counter animation
1<script>
2window.addEventListener("load", function() {
3 const counters = document.querySelectorAll("[data-count]");
4 const observer = new IntersectionObserver( (entries, observer) => {
5 entries.forEach(entry => {
6 if (!entry.isIntersecting)
7 return;
8 const el = entry.target;
9 // Remove the thousand separator dots, then convert to a number.
10 const target = parseInt(el.getAttribute("data-count").replace(/\./g, ""), 10);
11
12 const duration = 3000;
13 // in ms
14 const frameRate = 60;
15 const totalFrames = Math.round(duration / (1000 / frameRate));
16 let frame = 0;
17
18 const count = () => {
19 frame++;
20 const progress = frame / totalFrames;
21 const current = Math.round(target * progress);
22
23 // Format the number with thousand separators
24 el.innerText = current.toLocaleString("id-ID");
25
26 if (frame < totalFrames) {
27 requestAnimationFrame(count);
28 } else {
29 el.innerText = target.toLocaleString("id-ID");
30 }
31 };
32 requestAnimationFrame(count);
33 observer.unobserve(el);
34 });
35 }
36 ,{ threshold: 0.6 });
37 counters.forEach(el => observer.observe(el));
38 });
39 </script>
40This JavaScript code creates a smooth counting animation that starts when the element becomes visible in the viewport. It’s commonly used for animated statistics or number counters on scroll.
This script animates numeric values inside HTML elements with the attribute data-count. When the user scrolls to a section containing these elements, the numbers count up smoothly from 0 to their target values.
2.Slider animation
<script>
console.clear();
const sliders = gsap.utils.toArray(".slider");
const slidesArray = sliders.map((slider) =>
gsap.utils.toArray(".slide", slider)
);
const next = document.getElementById("next");
const prev = document.getElementById("prev");
let currentIndex = 0;
let isTweening = false;
slidesArray.forEach((slides) => {
slides.forEach((slide, i) => {
gsap.set(slide, {
xPercent: i > 0 && 100
});
});
});
const gotoSlide = (value) => {
if (isTweening) return;
isTweening = true;
const first = slidesArray[0];
const currentSlides = [];
const nextSlides = [];
slidesArray.forEach((slides) => currentSlides.push(slides[currentIndex]));
if (first[currentIndex + value]) {
currentIndex += value;
} else {
currentIndex = value > 0 ? 0 : first.length - 1;
}
slidesArray.forEach((slides) => nextSlides.push(slides[currentIndex]));
if (value > 0) {
gsap.set(nextSlides, { xPercent: 100 });
gsap.to(currentSlides, {
xPercent: -100,
onComplete: () => (isTweening = false)
});
} else {
gsap.set(nextSlides, { xPercent: -100 });
gsap.to(currentSlides, {
xPercent: 100,
onComplete: () => (isTweening = false)
});
}
gsap.to(nextSlides, { xPercent: 0 });
};
next.addEventListener("click", () => gotoSlide(1));
prev.addEventListener("click", () => gotoSlide(-1));
</script>This JavaScript code creates a custom GSAP-powered slider animation that smoothly transitions between slides when the user clicks the Next or Previous buttons. It’s designed for sliders with multiple .slide elements inside a .slider container and supports synchronized transitions across multiple sliders if needed.
The script uses GSAP (GreenSock Animation Platform) to handle all slide transitions with smooth motion and performance-friendly animations.
