Jump to content
Search Community

Can ScrollTrigger re-calculate when another element is shown/hidden?

nickraps test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

Please see the CodePen demo. 

 

First, scroll the page down to see how the pinning behaves (normally).

Then, click the button to show the additional element, then scroll the page again to see how the pinned element's position is wrong.

 

How can I make sure the element is always pinned at the correct time and location? Not affected by showing/hiding other elements above it on the page?

See the Pen JjOEQxw by noahsong (@noahsong) on CodePen

Link to comment
Share on other sites

  • Solution

Hey there, @nickraps

 

You'll need to call ScrollTrigger.refresh()  whenever your page-layout changes like that / has finished changing.

 

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

 

 

More on that in the docs:

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh()

 

 

On a different note;

I noticed you are using GSAP / ScrollTrigger v3.3.3 in your codepen demo. I'd strongly suggest updating to a more recent version if you can, as there have been a lot of additions and fixes since that version you are using now.

 

Happy scrolling!

 

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