Jump to content
Search Community

ScrollTrigger with changing variable based on window Size

Christiemade test
Moderator Tag

Recommended Posts

I have an announcement bar that lives overtop of a header bar, and I want the header bar to stay sticky once it reaches the top.  This works fine, EXCEPT when you scale down the window.  Then the announcement height changes, which changes how much the header bar needs to animate to reach the top.  I got this ALMOST working, except now what happens is - if you load the window, then resize it smaller, then scroll down, everything is great, but the minute you scroll back up the variable that keeps the announcement bar height seems to reset itself and mess up the alignment of the elements on the page. I need help figuring out what I'm doing wrong here!

See the Pen zYPWYwa by christiemade (@christiemade) on CodePen

Link to comment
Share on other sites

Hello Christie,


you're gonna want to have a look at invalidateOnRefresh for the ScrollTrigger in combination with using function-based values for your tween.


invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.



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


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