Elements stacking over each other instead of transitioning in spring react

Question

I made a testimonials carousel and I wanted to integrate a springs react animation to it. I've only been working with spring react for a few days and this is an error I haven't seen before. Elements stack over each other. For my transitions I have:

 const transitions = useTransition(current, item => item.key, {
        from: {  gridRow: '2', opacity: 0 },
        enter: { opacity: 1 },
        exit: { opacity: 0 },
    })

I am aware that if I type position: absolute instead of gridRow, the animation will work. However, this item I am trying to animate is in a grid container and when I use absolute it disrupts my entire design. Is there a way I could keep that gridRow and also make my animation work? codesandbox

Answer 1

There was a little problem in useTransition. It was exit instead of leave. It fixed the stacking over each other thing for me.

  const transitions = useTransition(current, item => item.key, {
    from: { position: "absolute", opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

Now you can wrap the transition.map with another div with gridRow attribute to prevent your layout disruption. It needs further styling, but you can build on this I think:

  <div style={{ gridRow: "2", position: "relative", width: "100%" }}>
    {transitions.map(({ item, props, key }) => (
      <animated.div key={key} style={props}>
        <QuoteParagraph>
          <Quote>
            <FaQuoteLeft />
          </Quote>
          {item.quote}
          <Quote>
            <FaQuoteRight />
          </Quote>
        </QuoteParagraph>
        <QuotePerson>-{item.client}</QuotePerson>
      </animated.div>
    ))}
  </div>

full example: https://codesandbox.io/s/mutable-waterfall-w8wvd?file=/src/App.js