GSAP + ScrollTrigger + Next.js not working

[BeginnerGsap2025]

Hello, I am trying to animate a counter that animates a number from 0-x where x is some target number. The animation works but when I want it to happen on ScrollTrigger, it doesn't work. I followed GSAP guidelines and "Common Mistakes" but it still not working.

Expected result: The counter should animate when a user sees the number on different devices.

Actual result: The counter animates as soon as the page refreshes.

How to reproduce the problem:  Refresh the page or scroll to the bottom of the page then hit refresh and wait for 5 seconds then scroll up and the animation finishes.

 

EDIT: The stackbit URL to the demo mentioned in GSAP guidelines: https://stackblitz.com/edit/stackblitz-starters-rvhe3n?file=app/page.tsx

See the Pen page.tsx by edit (@edit) on CodePen

Edited May 9 by BeginnerGsap2025
Included demo link in comment because it not codepen but stackbit

[Rodrigo]

Hi,

 

Maybe something like this:

https://stackblitz.com/edit/stackblitz-starters-buk8sw?file=app%2Fpage.tsx

 

Hopefully this helps.

Happy Tweening!