Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
nickraps

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

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

@akapowl

Thanks! And from the doc it seems like the method will automatically refresh all triggers on the page which is perfect for my case. 

  • Like 1
Link to comment
Share on other sites

@akapowl

Quote

I noticed you are using GSAP / ScrollTrigger v3.3.3 in your codepen demo.

Where should I fork the CodePen template with the latest GSAP? I typically just fork one from the demos on the doc pages which apparently is not using the latest.

Link to comment
Share on other sites

17 minutes ago, nickraps said:

I typically just fork one from the demos on the doc pages which apparently is not using the latest.

 

Which demo was that? I can update it.

  • Like 1
Link to comment
Share on other sites

Thanks, done!

  • Like 1
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.
×