Jump to content
GreenSock

adam.reznicek

Pinned element inside dynamic content section

Go to solution Solved by GreenSock,

Recommended Posts

Hi,

 

is is possible to pin element in section with dynamic content?
In example, sticky element is H2 in #section2 but i need pinned H2 when i show collapsed content clicking on button.
Could you help me?

Thanks  

See the Pen VwBNBeN by adam-ezn-ek (@adam-ezn-ek) on CodePen

Link to comment
Share on other sites

  • Solution

First of all, thanks for the minimal demo, @adam.reznicek! Super clear and very helpful. 

 

Yes, you can dynamically do stuff like that - the key is that you've gotta tell ScrollTrigger to refresh() after you've shifted things around in the DOM. That'll tell it to re-calculate the start/end values for the various ScrollTriggers. You could get fancy and do a ResizeObserver that's debounced like this: 

See the Pen wvxbBjX?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Or do it in whatever way you want - the point is to wait until your DOM is done shifting around, and THEN call ScrollTrigger.refresh(). 

 

Does that help? 

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