Over the last week I’ve been reading the docs of various React animation libraries to try and figure out their respective strengths weaknesses, their styles and learn more about the React ecosystem.

React Move : Animating lists and states

React Move looks very interesting. The docs are a bit hard to navigate, though rather short, but I think it can be a very effective library to do simple and complex animations on single elements or lists…

Some of its features are based on D3.js which I guess is a good thing… The examples in the docs are varied, it seems to work well with components and SVGs… Lots of good things !

React Motion : the hardest docs of all

React Motion is mentioned everywhere someone asks about animation in React so I had to give it a go. The first contact didn’t go so well though, as the docs are very hard to understand… It really is just the documentation, no form of tutorial or get started to be found, which made it quite a bad experience…

That being said, it has the potentiel to do very powerful things, and I think it deserves to be looked into but I’m not spending more time on the docs, I’ll find some nice and clear tutorial and learn from that instead !

Velocity React : Simply doing simple things

I’d heard of Velocity but didn’t get to use it in a project before. But from what I could tell, I thought it might enable writing sequences of animations effortlessly, so I had good hopes for this one… Let’s say I was a bit disappointed.

Overall it looks like it makes it very easy to do very simple things, and not much more… Well I exaggerate, it’s possible to do more complex animations, but overall it feels like Velocity React is excellent for things I’d probably want to do with CSS Transitions instead…

At some point I’ll try and learn more about it to maybe revisit my opinion, but for now Velocity React has lost interest !

Animated : Another good candidate

Unlike the other libraries, Animated had a good and long tutorial, which I couldn’t even finish reading in 15 minutes. I didn’t really click with it : I looks really nice but it’s unclear how it really works in my mind, especially when it comes to more complex topics like sequencing animations, dealing with timings and things like that.

Animated leaves me with mixed feelings : I didn’t understand it as well as I would have liked in 15 minutes, but I can tell it’s powerful and deserves more time… I guess finding a guide and playing with it is the logical next step !

React GSAP : The Timeline

I didn’t write a review for it as I’ve been using it at work for about 2 months now, liking it so far. Unlike the other libraries, it’s not declarative, it provides methods and component lifecycle events to add animations and manages them.

What made me chose this one is the fact that it’s based on GSAP which features Timelines are a way to sequence animations and transitions of various elements.

I’m quite happy with it, I haven’t had to deal with complex use cases so far, like canceling playing animations or rewinding them, but for what I have worked on so far, it’s great but it doesn’t feel React-like…

React Animejs : Out of date

I’d found this one, not well-known but it looked promising… Turns out it hasn’t been maintained in 2 years or so… So I just dropped it…

Not much else to say about it.

Conclusion

Lots of good libraries and only spending 15 minutes with each is of course not enough to form opinions. I don’t think I’ll be looking at Velocity React more for now, but React Move, React Motion and Animated all look promising.

I think now the next step is to find a tutorial for each (a good one) and spend 1 to 2 hours learning and playing with them. In the meantime I’ll design some benchmark animations to then try and replicate them with each framework.

If you know of another library I haven’t looked at please comment below to let me know !