ScrollTrigger pinned section problems

[Viktor Nilsson]

Hi!

 

I am trying to have two sections that are getting pinned to the view.

 

As you can see the problem is that the #sec4 is triggered and shown right after #sec2, due to some weird "position: fixed" issues. 

 

But everything started as I made #sec2, before that everything works fine.

 

If I remove the #sec2 ending (end: "+=300%"), everything works fine as well. Also I have tried experiment with:

pinnedContainer, pinReparent, pinType and even changing scroller to unique ones; without any luck.

 

Thanks,

Viktor

See the Pen VwWLYvg by nilsvikt (@nilsvikt) on CodePen

[akapowl]

 

Welcome to the GSAP forums, Viktor!

 

It's always best to create your ScrollTriggers in order of their actual appearance on the page.

 

If you turn around the order of creation of your ScrollTriggers, it will already work. The reason it doesn't in your example, is that the ScrollTrigger on #sec4 can not know about the pin and thus the pin-spacing of #sec2, as that one is not created yet.

 

If for some reason or in any scenario you can absolutely not create your ScrollTriggers in order of appearance on the page, you might want to take a look at the ScrollTrigger.sort() method and/or refreshPriority (which is also explained on that linked docs page).

 

Hope that clears things up a bit  

Happy pinning!

 

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

 

[Viktor Nilsson]

16 minutes ago, akapowl said:

 

Welcome to the GSAP forums, Viktor!

 

It's always best to create your ScrollTriggers in order of their actual appearance on the page.

 

If you turn around the order of creation of your ScrollTriggers, it will already work. The reason it doesn't in your example, is that the ScrollTrigger on #sec4 can not know about the pin and thus the pin-spacing of #sec2, as that one is not created yet.

 

If for some reason or in any scenario you can absolutely not create your ScrollTriggers in order of appearance on the page, you might want to take a look at the ScrollTrigger.sort() method and/or refreshPriority (which is also explained on that linked docs page).

 

Hope that clears things up a bit  

Happy pinning!

 

 

 

 

 

 

Thank you for fast response, worked right away!