ScrollTrigger - Revealing stacked divs

[Ashewer]

I feel like I am on the right path, but getting stuck on something. I've looked through the ScrollTrigger docs and just can't figure out what exactly the issue is.

 

I have the slides (divs that are stacked - position: absolute). And I want to reveal the divs as the user scrolls down. In theory I have it completed in the demo, but the scroll is too short. I also was trying to do the more correct way using forEach, but couldn't get that to work (commented out). If anyone can point me in the right direction that would be great.

See the Pen RwMYjMY by Ashewer (@Ashewer) on CodePen

[Cassie]

Hey there!

 

You're on the right track.

• You need enough space to scroll - I've added a bit of height to your demo
• Now that there's more space to scroll you'll need to pin that element so it stays stationary as the animation plays - you have pinspacing already so I assume you've tried pinning? PinSpacing doesn't do anything unless the element is pinned
• You'll need to define a trigger Element- right now you've got the start trigger values  "top top" as the trigger - that's invalid.
• Define an end point that is far enough down the page for your animation to feel right - I used a set px value

See the Pen xxWaBNP?editors=0010 by GreenSock (@GreenSock) on CodePen

[Ashewer]

Thanks. I didn't fully understand how the end point applied in this circumstance, that was very helpful!