ryjohnson Posted July 24, 2020 Share Posted July 24, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 24, 2020 Share Posted July 24, 2020 Hey ryjohnson. What do you mean "update incrementally"? The transition will never be smooth given their overlap. I might recommend changing the animation so that the cards are not touching when you change their zIndex. Link to comment Share on other sites More sharing options...
ryjohnson Posted July 24, 2020 Author Share Posted July 24, 2020 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. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 24, 2020 Share Posted July 24, 2020 How about this? function initCard(element, index) { gsap.set(element, { width: cardWidth, height: cardHeight, boxShadow: '0 8px 40px rgba(0,0,0,.2)', zIndex: 2 }); const tl = gsap.timeline({ repeat: 1, defaults: {duration: 1} }) .to(element, { x: cardWidth / 2, rotation: -rotation, scale: .8, y: 10, boxShadow: '0 8px 40px rgba(0,0,0,0)', }) .set(element, {zIndex: 0}, '-=0.5') .to(element, { x: -cardWidth / 2, rotation: rotation, boxShadow: '0 8px 40px rgba(0,0,0,0)', }) .set(element, {zIndex: 1}, '-=0.5') .to(element, { scale: 1, x: 0, y: 0, rotation: 0, boxShadow: '0 8px 40px rgba(0,0,0,.2)', }) .set(element, {zIndex: 2}, '-=0.5') baseTl.add(tl, index * 1); } 1 Link to comment Share on other sites More sharing options...
ryjohnson Posted July 24, 2020 Author Share Posted July 24, 2020 That works perfectly, thank you so much for your help! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now