Need help with creating an animation #1947
-
Hello, I tried to use useTransition hook and just unshift first item from array and push it back with a different key, but the whole list moves to top without any animation when first item is removed, that breaks all the effect Can someone please suggest how should I setup this animation?
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
I would use To do this isn't crazy hard, but imo it's a difficult animation to do, so just a heads up as to what you're getting yourself into. |
Beta Was this translation helpful? Give feedback.
I would use
useSprings
where each item has it's ownspring
. If you remove the scaling of the items, it's just an infinite carousel so you could check out this guide – https://ironeko.com/posts/ininite-carousel-with-react-spring-how-to and then you include the scaling effect to the items that require it via the springs, note I've used the word scale, I would not change the font-size etc. I would just scale the element.To do this isn't crazy hard, but imo it's a difficult animation to do, so just a heads up as to what you're getting yourself into.