

Counter v2


Settings controls
Start from: determines the number the Counter will start to count from.
End at: determines the number the Counter will count to.
Thousands separator: to customize the character that will separate thousands.
Animation controls
Duration
Delay
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.
Scrolltrigger controls
Counter v2 animation uses ScrollTrigger Library to fire on scroll. Learn more about ScrollTrigger here.
Trigger: the element that will fire the animation on scroll. Use the keyword “this” to use the element itself as the trigger.
Start: determines the position of the Trigger to fire the animation. “top bottom” means when the top of the element hits the bottom of the viewport.
Additional triggers: In case you need to fire the animation on additional events. Click or hover.
Element: the element that will fire the animation on the additional event selected.
– Tamu