useTransition doesn't animate while cycling through an array

Question

I created a little example on codesandbox to reproduce it.

https://codesandbox.io/s/infallible-swirles-cbx74

I can easily cycle through the items array thanks to the following useEffect

useEffect(() => {
  // taking the first element of the array and placing it at its end
  const h = () => set(items => [...items.slice(1), items[0]])

  setInterval(h, 2000)

  return () => {
    clearInterval(h)
  }
}, [])

The problem is that I cannot find a way to have these animate. I think it might probably be related to the keys but I cannot figure out how I can fix this.

Please check the codeSandbox link to understand what the problem is and to view the full example code.

Your example seems to animate on click. Is there any problem? — Peter Ambruzs, Apr 16 '20 at 15:35

score 0 · Accepted Answer · answered Apr 20 '20 at 11:24

I eventually made something simpler without react-spring. It's almost 100% CSS based (I use a JS interval to trig changes over time)

https://codesandbox.io/s/practical-fog-ubdhn?file=/src/App.js

The animations are not perfect in this example but I could find a way to work around these minor glitches by hiding the first and last elements with a visibility attribute so the first element cycling back to the last position doesn't animate over the rest. Could be achieved with dynamic z indices but it wasn't the purpose of this sandbox just to show the main approach I used.

I hope this helps people landing here :)

useTransition doesn't animate while cycling through an array

1 Answers1