Jump to content
Search Community

Layered sections aren't working

paketaaa test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

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

  • Solution

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

  • Like 2
Link to comment
Share on other sites

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

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

  • Like 3
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...