paketaaa Posted May 30, 2022 Share Posted May 30, 2022 Hello everyone, I'm new at GSAP so maybe my question is kinda simple but I still dont understand what am I doing wrong. I wanted to create layer covered sections like in example of scrolltrigger but my big section is not scrollable. So i wanted to ask for a help to explane how this thing works. TYSM See the Pen WNMzeez by paketaaa (@paketaaa) on CodePen Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted May 30, 2022 Solution Share Posted May 30, 2022 I see you have two sections and you pin both, but you want the second one to move like normal. So I have removed the ScrollTrigger from the second one and just have the pin on the first section. I've also add some CSS the have the second section overlap the first one. See the Pen XWZErVJ by mvaneijgen (@mvaneijgen) on CodePen 2 Link to comment Share on other sites More sharing options...
paketaaa Posted May 30, 2022 Author Share Posted May 30, 2022 6 minutes ago, mvaneijgen said: I see you have two sections and you pin both, but you want the second one to move like normal. So I have removed the ScrollTrigger from the second one and just have the pin on the first section. I've also add some CSS the have the second section overlap the first one. Thank you for quick response, I was trying like that before, but i didn't added z-index so background of second sections wasn't appearing. Everything works good! Link to comment Share on other sites More sharing options...
akapowl Posted May 30, 2022 Share Posted May 30, 2022 And if you have multiple sections you want to behave that way before that last one, so you'd need to keep the forEach loop, you could just remove the 'section' class from that last section in your HTML. As a minor sidenote: technically in this very example, you don't need to specify the z-index on the last section because you didn't specify a z-index on the one before - thus the pin-spacer of the one before will get a z-index of auto applied inline. Since auto is the default, you would technically just need to make sure that you have the position property set to relative e.g. because z-index gets only have an effect on elements that do have a position property set (other than static). https://developer.mozilla.org/en-US/docs/Web/CSS/z-index See the Pen KKQoPoY by akapowl (@akapowl) on CodePen 3 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