using z index and for each to trigger overlapping of layers...

[ladybytez 2 Likes (Newbie)]

Hi there,

 

I am trying to use z index and div height manipulation to allow different div to show on scroll...It works for two divs but when I add a third div, the divs are haywired as seen here. Can anyone help me out here?

 

See the Pen RwVxYBP by ladybytez (@ladybytez) on CodePen

[Cassie 5,657 Likes (Superhero)]

Hey there @ladybytez,

You've posted a lot of similar threads over the last while - Do you need help on all of them still or is this a progression from the last thread?

We ask that people don't post duplicates but try to keep to one thread in order to avoid confusion.

Here's a little feedback.

- You don't need toggleActions and scrub, they serve conflicting purposes.
- You need to be able to scroll in order for scrollTrigger to work! Currently you can't as the page height isn't long enough - I've added spacers.
- Your CSS was broken due to a missing semicolon.
- Your HTML had a missing closing div.
- You don't need to specify the element to pin if it's the same as the trigger element, just true will work
- No need for invalidate on refresh here!

- Rather than creating a new timeline on every loop, make it global and add tweens to it.

See the Pen 728fb947be62023480173cd859b8d3e2 by cassie-codes (@cassie-codes) on CodePen

Have you taken a look at the scrollTrigger docs? It may help to give them a read through to get a deeper understanding!

[ladybytez 2 Likes (Newbie)]

Hi Cassie, thank you for this! Very helpful. Yes this is a progression from the previous thread. Apologies. I will take note to post in one thread in future to prevent confusion!

[Cassie 5,657 Likes (Superhero)]

Alternatively - feel free to make a new one - but mark the previous one as solved so that we don't duplicate effort!

[theRetrograde 0 Likes (Newbie)]

Hi Cassie,  I'm not the OP, but I really liked the simplicity of the codepen you showed.   I have been trying to do something similar but I've been using multiple scrollTriggers instead of a timeline.      I'm wondering how to approach the overlapping text in your demo?   If there was a scrolltrigger on chapter,  it could be set to opacity 0 onLeave or something like that.  

[Cassie 5,657 Likes (Superhero)]

You wouldn't need more scrollTriggers.

You can just add another tween to the timeline like this ☺️

See the Pen 728fb947be62023480173cd859b8d3e2 by cassie-codes (@cassie-codes) on CodePen

 

[theRetrograde 0 Likes (Newbie)]

Thanks for showing that.   I had missed wrapping the 'p' inside of q().

 

Cheers!