This template includes an animated number counter system used only in the section where number animations appear. The animation is powered by GSAP and ScrollTrigger and activates automatically when the numbers scroll into view.
Step 1 – Select the Number Element
Select the text element that contains the number you want to animate. This should be a Text Block or Heading containing only the numeric value.
Step 2 – Apply the Required Class
In the Element Settings panel, add the following class to the element:
.numberanimation
Once this class is applied, the number will automatically animate from 0 to its final value when it enters the viewport.
Step 3 – Change the Final Number
To modify the target value, simply edit the number directly in the text element. The animation will always count up to the number shown in the element.
Step 4 – Control When the Animation Starts (Optional – Advanced)
The animation is triggered when the number scrolls into view. Advanced users can adjust the scroll trigger position inside the embedded script if needed.
Step 5 – Adjust Animation Speed (Optional – Advanced)
The animation duration is calculated dynamically based on the size of the number to maintain smooth motion. Advanced users may modify the duration logic inside the script to make the animation faster or slower.
Important Notes
This script runs only in the section where number counters are used.
No JavaScript editing is required for normal use.
GSAP and ScrollTrigger are required and already included in the template.
For best results, apply the .numberanimation class only to numeric text elements.
This system is designed to be beginner-friendly and fully reusable, allowing you to update animated numbers quickly and consistently throughout the site.
This template includes a scroll-based text animation system built with GSAP and SplitType. All animations are controlled using Custom Attributes, allowing you to apply and modify effects directly from the Webflow Designer without editing any JavaScript.
To apply an animation, select any Text Block, Heading, or Rich Text element. Then open Element Settings and add the following required custom attribute:
text-split = true
This attribute is mandatory and enables the text to be split into words or letters for animation.
After adding the base attribute, choose ONE animation style from the list below and add it to the same element. Only one animation attribute should be used per text element.
Word-based animation attributes:
words-slide-up
words-rotate-in
words-slide-from-right
scrub-each-word
Letter-based animation attributes:
letters-slide-up
letters-slide-down
letters-fade-in
letters-fade-in-random
Example setup for a heading animated with sliding words:
text-split = true
words-slide-up = true
Animation timing and speed are predefined for optimal performance. Advanced users can optionally modify animation speed by editing the duration values inside the embedded script. Lower values result in faster animations, while higher values create slower animations.
Scroll trigger positions are also predefined. Advanced users may adjust when animations start by modifying the scroll trigger start values inside the script.
Important usage rules:
Only one animation attribute should be applied per text element.
The text-split attribute must always be present.
Do not remove the GSAP or SplitType script files.
jQuery is required and is included by default in Webflow.
This animation system is designed to be beginner-friendly, reusable, and fully no-code, allowing consistent animated typography throughout the site.