Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Adjust Timeline Dynamically based on scrollOffset

Recommended Posts

I'm animating some cells in canvas from left to right. Also the cells animate on scroll.

I can't figure out how to do both at once, so the scroll offset adds/removes from the Y value mid-animation.

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

Link to post
Share on other sites

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 post
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 post
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 post
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 post
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.