fabiodev Posted July 9, 2020 Share Posted July 9, 2020 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 More sharing options...
ZachSaucier Posted July 9, 2020 Share Posted July 9, 2020 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 2 Link to comment Share on other sites More sharing options...
fabiodev Posted July 9, 2020 Author Share Posted July 9, 2020 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 More sharing options...
ZachSaucier Posted July 9, 2020 Share Posted July 9, 2020 Here's a fork with the layered effect working. How are you wanting the red and blue sections to behave? See the Pen mdVLvXq?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
fabiodev Posted July 9, 2020 Author Share Posted July 9, 2020 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 More sharing options...
ZachSaucier Posted July 9, 2020 Share Posted July 9, 2020 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 1 Link to comment Share on other sites More sharing options...
fabiodev Posted July 9, 2020 Author Share Posted July 9, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 9, 2020 Share Posted July 9, 2020 Nope, not that will work well. Sorry. Like I said, what you're attempting to do is very unconventional. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now