Jump to content


Updating height variable within timeline and ScrollTrigger water resize

Moderator Tag
Go to solution Solved by elegantseagulls,

Recommended Posts



I'm just trying to figure out something with timeline and ScrollTrigger.

Does setting invalidateOnResize:true let the timeline that I'm scrolling with scrolltrigger use updated variables?


I have a red dot that travels from the top green dot to the bottom one.

If you take a look in the pin, the blue line has a dynamic height, the travelog the red dot is taken from this line.
If I resize the new height isn't taken into account.


How do I let the timeline about this updated height?







See the Pen WNXNGOJ by whpcreative (@whpcreative) on CodePen

Link to comment
Share on other sites

  • Solution
1 hour ago, 11933_1494126574 said:


I think you mean invalidateOnRefresh (not resize). What this does, resets the starting and ending values, so if there's a change it can accommodate for that. However, in your example, you'll want your y value to be functional rather than a just a set variable that's just getting calculated once (the timeline isn't calculating the value in your example) eg:


  • Like 3
Link to comment
Share on other sites

That's great, thanks for pointing me in the right direction.
Along with the above I still needed to make sure I was using 'fromTo' in the timeline, as just using 'to' gets wiped on the invalidate step.


See the Pen WNXNGOJ by whpcreative (@whpcreative) on CodePen

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.