Why is my element got delayed before leaving and not being animated in Transition Component using React-Spring?

Question

So, I was basically creating my own Slider using React-Spring, Here is the code for Slider.js:

import React, {useState} from 'react'
import {animated} from 'react-spring'
import {Transition} from 'react-spring/renderprops'

import '../assets/css/slider.css'

function Slider(props){
   const [index, setIndex] = useState(0)

   return (
      <div className="slider">
         <Transition
            native
            reset
            unique
            items={index}
            from={{ opacity: 0, transform: "translate3d(100%, 0 ,0)" }}
            enter={{ opacity: 1, transform: "translate3d(0%, 0, 0)" }}
            leave={{ opacity: 0, transform: "translate3d(-50%, 0, 0)" }}
         >
            {index => style => (
               <animated.div style={{...style}} className="slider-item">
                  {React.createElement(props.slides[index])}
               </animated.div>
            )}
         </Transition>
         <button onClick={() => (index === 0) ? setIndex(props.totalSlides-1) : setIndex(index-1)}>Left</button>
         <button onClick={() => setIndex((index + 1)%props.totalSlides)}>Right</button>
      </div>
   )
}

export default Slider

I was trying to create a reusable component so the array of slides is put inside the props for Slider component. For this particular practice, I use ProjectsList.js as an array of slides. Here is the ProjectsList.js:

import React from 'react'

export default [
   () =>
   <div>
      Slide 1
   </div>,
   () =>
   <div>
      Slide 2
   </div>
]

And in the page that is using Slider component, I call it like this

import Slider from '../components/Slider.js'
import items from '../data/ProjectsList.js'

<Slider slides={items} totalSlides={2}/>

The logic for the slider is just as I thought where it's going to be an infinite Slider. However, it doesn't animate anything for the div and the present slide always delayed before leaving when the next slide enters.

Here is the image:

Does anyone know what is the problem with my code?

Answer 1

Your main problem is, that the hook and render props api of react spring is separated. You use the animated of the hook api with the render props Transition component. Try importing animated from the same place.

import {Transition, animated} from 'react-spring/renderprops'

I added, absolute position and removed some property from Transition. It needs some CSS, but works much better.

https://codesandbox.io/s/sharp-mahavira-uqxcf