[Use new Observer plugin within a pinned Scrolltrigger]

Thanks! That approach sounds perfect. I'm able to get the Observer to initiate on pin, but I don't see anything in the docs about programmatically disabling the Observer and unpinning the ScrollTrigger once the animation is complete. Is there something I might be missing, or an example you could point me towards?

[Use new Observer plugin within a pinned Scrolltrigger]

I'm looking to create a pinned section that will animate similar to this new demo vs scrubbing a timeline (need to ensure animations are complete before allowing the user to scroll to the next section). Is there a way to place something like this within a ScrollTrigger pinned section, then unpin it once it gets to the last slide?

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

[Need help with Timeline z-index/stacking context]

That works perfectly, thank you so much for your help!

[Need help with Timeline z-index/stacking context]

Thanks for the quick reply Zach!

 

I understand the transition will never be smooth, but I'm mostly just looking for a solution that ensures the front card is always above the other two. This original version I had worked on functioned correctly, but ultimately having more than just the 3 cards visible doesn't fit the design (

See the Pen 2b3fee8715f4d7c968f2395ff6d66159 by ryjohnson (@ryjohnson) on CodePen

). You can see as you drag, the next card eventually jumps in front of the previous frontmost card.

[Need help with Timeline z-index/stacking context]

Hey! I'm trying to create a rotating slideshow of cards and everything is working perfectly, except for the z-index. Ideally, as a card is dragged it's z-index would update incrementally to swap places. I've tried forcing 2d-transforms and perspective with no luck. Any insight into how I can modify this to fix the stacking order would be greatly appreciated!

See the Pen ed6e8b4afc091f9260d323691e0d6245?editors=0011 by ryjohnson (@ryjohnson) on CodePen