assetsforwordpress
MENU ASSETS

Rolling Counter Animation

This is a responsive counter animation built with GSAP that triggers when it comes into view. The animation respects users’ motion preferences through the prefers-reduced-motion setting.

Technical Note: The CSS variable --lineh controls both line-height and height properties to ensure proper responsiveness across devices.

Performance Warning: This effect creates multiple DOM elements – specifically 10 <div> elements per digit. For example, a 5-digit number will generate 50 total div elements. Use judiciously to avoid performance issues.

Scroll up counter

Features fluid font sizing, scroll-triggered animations, and full responsiveness
12345

Scroll down counter

Features fluid font sizing, scroll-triggered animations, and full responsiveness
81245

Scroll up & down counter

Features fluid font sizing, scroll-triggered animations, and full a stagger effect
95173

Counter with scrollbar sync

Features the scrub feature of GSAP
1337

Random Bouncing counter

The possibilities are endless with GSAP: change the easing, tween color, or a random stagger.
95173