Jump to content
Search Community

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

ladybytez test
Moderator Tag

Recommended Posts

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,  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

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...