[ScrollTrigger: nested pin element]

Thanks for your recommendation. Do you have some suggestions on how I could replicate with gsap the same layering effect without using pin and position fixed?

[ScrollTrigger: nested pin element]

I updated my codepen:

 

Your suggestion to use position sticky seems to work pretty good!  There is only some odd behaviour when the layer becomes fixed, especially in Firefox (the image "jumps" away).

 

ps: I also had to set the start property to 'bottom bottom' because in my case panels are not all of the same height of 100vh.

[ScrollTrigger: nested pin element]

Hi Zach, thanks for the welcome and for the answer. Yes, you're totally right. I misspoke, I'm sorry. What i wanna do is not a parallax effect but the effect explained in the ScrollTrigger introduction video. I want to reveal one section in top of each other at the page scrolling. And in one of this fixed section I need to have a sticky element, exactly like in your codepen example. But yes, the issue is that i can't have nested pinning. So I need to find another solution. Thanks again.
 

 

[ScrollTrigger: nested pin element]

Hi all,

I have a page with some sections that may have variable heights. To have a sort of parallax effect on page scrolling, I'm using ScrollTrigger and the beautiful "pin" property. Now, in one of this section I need to have a "pinned" container that must remain fixed in position until the section content end. How can I do?

 

Thanks in advance for your help.

See the Pen dyGeQzK by fabiodev84 (@fabiodev84) on CodePen