Need help with Timeline z-index/stacking context

[ryjohnson]

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

[ZachSaucier]

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.

[ryjohnson]

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.

[ZachSaucier]

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);
}

 

[ryjohnson]

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