Jump to content


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

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.  

Link to comment
Share on other sites

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



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.