Jump to content
Search Community

Trigger animation inside a scroll position based timeline

peippo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have two paused timelines which I move forward based on the current scroll position. Inside these timelines I have a few animated number count elements. They don't really work because the user can stop the scrolling before the number reaches its final state.

 

How can I separate the actual number count animation from the scroll position based timeline, and just trigger it at certain point in the timeline? (so that it runs from beginning to the end regardless of the scroll position)

 

Thanks!

See the Pen XPBpoy by peippo (@peippo) on CodePen

Link to comment
Share on other sites

Hi @peippo,

 

I think what you're looking to do is trigger a separate timeline at the point in which your scroll-controlled timeline reaches a defined position/progress value.

 

You can do so by breaking your "one-offs" into their own paused timelines and then .call() each wherever you like in the scroll-controlled timeline. Check out the CodePen below to see an example of that starting at line 60.

 

Hope this helps!

 

 

See the Pen dQBGZy?editors=0010 by sgorneau (@sgorneau) on CodePen

 

  • Like 5
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...