Pinning

[TrulyNewbie 12 Likes (Newbie)]

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 7,068 Likes (Superhero)]

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 12 Likes (Newbie)]

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 7,068 Likes (Superhero)]

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 0 Likes (Newbie)]

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 7,068 Likes (Superhero)]

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 0 Likes (Newbie)]

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 16,941 Likes (Superhero)]

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?