Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 13, 2024 /  Beginner

Counter

0

Counter controls

Count from: determines the number the Counter will start to count from.
Count to: determines the number the Counter will count to.
Enable thousands: if enabled, a separator control will appear to customize the character that will separate thousands.

Animation controls

Counter 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.
End: determines the end of the animation if needed. It is specially useful when using the Scrub property.
Duration
Easing: There are 3 custom easings available: Default, OutQuintic and OutCubic. None of them belong to CSS or GSAP.
Replay on enter back: if enabled, the animation will replay each time the Twist Reveal element enters the viewport at the start position selected.

Additional Triggers

In case you need to fire the animation on additional events.
Trigger on: click or hover.
Element: the element that will fire the animation on the additional event selected.

– Tamu

On this page