Jump to content

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

ScrollTrigger animated height with end value issue

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution


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


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