Jump to content
Search Community

Adjust Timeline Dynamically based on scrollOffset

Jai 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

On line 237 you are setting time to zero which causes animation to complete and your blocks end up in end position. If you uncomment that you will notice it continues animating.


Though please avoid posting such demos with 100+ lines as it takes a lot of time to go through unfamiliar code to figure out what is going on and what is suppose to happen.


See the Pen bKmKzN?editors=0010 by Sahil89 (@Sahil89) on CodePen


Also, I edited your question because other users can't see your demo when you are posting links in 'full page' mode. I had changed it to 'editor mode' but you seem to have undo it again.

  • Like 3
Link to comment
Share on other sites

Hey thanks, will try to keep the pen size down. I was trying to immediately adjust the left-to-right animation when scrolling happens and then continue the animation. Do you recommend invoking individual Tweenlite instances for this instead of a timeline, or perhaps the updateTo parameter?

Link to comment
Share on other sites

Have you tried setting progress as in following demo? If your timeline doesn't change then you can just change the progress. If animation is simple you can use invalidate method. If invalidate isn't enough then you can keep track of progress, and reconstruct entire timeline and set the progress to it. Though avoid using heavy calculations for scroll based effects, it will start getting janky soon.


See the Pen QxZBYO by Sahil89 (@Sahil89) on CodePen


  • Like 4
Link to comment
Share on other sites

Ah many thanks for the help, I wasn't aware of those methods thanks for highlighting them.

I accomplished this in the end by animating an object and updating the object's values using UpdateTo. (Scroll while animating to see values update)


See the Pen ZRqMxd by j2is (@j2is) on CodePen


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