GSAP Plugin Registration
What It does
This sets up GSAP basics.
// ============================================
// GSAP PLUGIN REGISTRATION
// ============================================
gsap.registerPlugin(ScrollTrigger);
gsap.config({ nullTargetWarn: false });Code Block 1
Element Map
No direct elements; global setup for ScrollTrigger (scroll-based animations) and config to ignore missing targets.
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: 4,
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();
});Code Block 7
Element Map
.counter: Text animates from 0 to value, with commas.
Customizing Key Variables
Duration: 4 → 6 for slower.
duration: 6Reveal: 0.5 → 0.7.
duration: 0.7Ease: "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 7