Pinning

[TrulyNewbie]

Hi, newbie here.

 

I'm desperately trying to figure out how to pin the second div to the top of the screen, beneath the first div, then releasing it as the div above it ends. Just like - https://jeongsteph.design/

 

I've tried toggleclass too but I just can't get it and I don't know where I'm going wrong. Please help me

 

Thank you

See the Pen ExPdJxK by NewbieRuby (@NewbieRuby) on CodePen.

[ZachSaucier]

Hey TrulyNewbie. Sorry, I'm not understanding the effect that you're wanting. What on the jeeongsteph site are you trying to mimic? The layering between the gray and black sections? How does your demo relate?

[TrulyNewbie]

Yes I’m trying to mimic the transition between the grey and black part. Sorry My demo was just a basic set up of what I thought was the direction to go for 

[ZachSaucier]

We have a demo that creates that effect. Does this help?

See the Pen BaowPwo by GreenSock (@GreenSock) on CodePen.

 

This demo along with many others are listed in the ScrollTrigger docs.

[jacobSorensen]

Hi, I'm new to gsap and coding in general, but I'm so psyched about the intuitivness and power of your product. 

This was exactly what I was looking for as well, however I was wondering if it possible to control the z-index of each section. So that the red section would appear on top of the blue, but the orange would appear from underneath the red. Is that possible?

Best regards,

 

[ZachSaucier]

Hey @jacobSorensen and welcome to the GreenSock forums.

 

Sure, doing what you're wanting is definitely possible. The ScrollTrigger demos page has another demo that shows how to do the covering. You should combine it will the demo in this thread above.

[jacobSorensen]

Thanks for the answer Zach. I played a little with the two different demos, but I haven't had success combining them. I would like to have control of the z-index of the different sections, which probably also shows in the codepen. What am I doing wrong here? 

See the Pen xxEKNKg by Jacobsorensen (@Jacobsorensen) on CodePen.

 

[GreenSock]

I'm trying to wrap my head around what you expect to happen with your code. It's doing exactly what you asked, but are you saying that you want to control the ORDER that each panel comes in by altering the zIndex? That's not really how that works. If you want to control the order, simply put the divs in that order in the DOM. 

 

What are you hoping will happen by changing those zIndex values in the way you did?

[alendra]

Hey, i want to implement the pinning scroll too, but not just the next to current to be pinned, but also the current that will be scrolled up. Just like https://oxman.com/. Any idea? Thanks ^ ^

[GreenSock]

@alendra welcome to the forums.

 

It's usually best to create a new thread instead of hijacking one that's 3 years old. I imagine you might be looking for something like what Observer plugin can do: 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen.

 

https://gsap.com/docs/v3/Plugins/Observer

 

If you still need help, please start a new thread and be sure to include a minimal demo, like a CodePen, that clearly illustrates the problem and we'd be happy to help with any GSAP-specific questions. ✅