Jump to content
Search Community

ScrollTrigger change number

Matheus Dias test
Moderator Tag

Recommended Posts

So, first of all, i'm starting with GSAP and ScrollTrigger and i'm loving it!

I searched a lot but surprisingly i haven't found what i want: I want that the number counts up according to the scroll. On the example pen, when you scroll down, it scrubs the size of the number, but wht i want is that when i scroll, the number keep counting to a x limit, let's say 1000, so as i scroll, the number will count from 0 to 1000. How can i do something like that?

See the Pen vYLPYBv by Maath (@Maath) on CodePen

Link to comment
Share on other sites

  • 3 years later...
4 hours ago, Levin Riegner said:

How would you trigger the number to  animate only when youve scrolled to a specific point?

That should be pretty easy - just edit the "start" value so that it would get triggered further down the page. Or if you're trying to pin it for a while before the animation starts, you can just create a timeline that has the ScrollTrigger attached to that, and then place the numbers tween further along in the timeline (using the position parameter) so that there's a big gap at the beginning of the timeline. 

 

If you'd like more help, please open a new thread and make sure you provide a minimal demo that clearly illustrates the issue and we'd be happy to help with any GSAP-related questions. A lot of times it really depends on how you're structuring your markup, what's happening on your page, etc. - it's tough to just give a generic answer that fits every scenario. That's why a minimal demo is so critical. 

 

Good luck and thanks for being a Club GSAP member! 💚

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...