ryjohnson

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?

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?

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

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 (https://codepen.io/ryjohnson/pen/2b3fee8715f4d7c968f2395ff6d66159). You can see as you drag, the next card eventually jumps in front of the previous frontmost card.

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!