Jump to content
Search Community

ScrollTrigger: nested pin element

fabiodev test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

Hey Fabio and welcome to the GreenSock forums. It's unclear to me what you mean by "parallax effect" in that demo as I don't see anything parallax related besides the name of your class.


The main issue with your ScrollTrigger code is that you can't have nested pinning.


Is this the effect that you're going for?

See the Pen gOPzZKw?editors=0100 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

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.


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

What you're trying to do is definitely non-standard. I highly doubt there's a specification that says what a position: sticky element should do if a parent element has fixed positioning. Maybe there is and I'm not aware (@Jonathan any idea?). Evidently Chrome starts applying vertical offset from that point, moving the image down, while Firefox essentially resets the top position (so the image is in its original position in respect to the parent element). There's likely gray area for how it should behave but neither implementation seems bug-free to me (though Firefox's seems more reasonable).


My recommendation is to not use the layering like you're wanting :) 

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