ScrollTrigger animated height with end value issue

[Jona Anders]

In the pen the height of the header is updated on scroll, but the value for end stays the same.(I coloured the header so you can see it better that the end value is not at the bottom of the header after it changed height). How can I update the end value constatly so this does not happen? (I hope you can understand what I mean)

See the Pen NWvGwRq by JonaAnders (@JonaAnders) on CodePen

[akapowl]

 

Hello there, @Jona Anders

 

For performace reasons, ScrollTrigger does all its calculations upfront - so it won't change the start and end while you change the height of an element that you have a ScrollTrigger on when you're scrolling.

 

There was a similar question just recently, that might help you get in the right direction.

 

 

 

 

Here's what your example could look like then - unfortunatelly, if I am not mistaken, I don't think you can use values like rem for the end of a ScrollTrigger, so you'll probably have to do the neccessary calculation based on the window's height and pixels instead.

 

See the Pen e867259e3e0c5b3d2fcd21eaa5985fe3 by akapowl (@akapowl) on CodePen