15 Minutes with 4 React Animation Libraries Docs

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 !

15 Minutes with Animated

4th in the series, I looked at Animated, which is the library that handles the animations of React Native (if I understood correctly) but that’s also made available for React.

For once, it has a proper tutorial, that’s progressive and much easier to understand than the other libraires I’ve reviewed so far. Kudos to Animated for that ! Not only is it easier to follow, it’s also much longer. I didn’t even get to finish it all, but I had to reach some pretty interesting examples !

So what could I do with it ?

Well I’m not entirely sure. I could do some simple things probably if I used Animated in a project but for more complex transitions I’m not entirely sure how things would work together.

I tried to go through as much of the docs as I could, so I might have missed something important, right now I feel like I’m close to understanding how it works but not quite there yet.

From what I could tell though, Animated seems like one of the libraries that can actually do almost any kind of animation, though the ability to sequence things feels a bit complex… Many things are built in but I couldn’t figure out how to define durations… Similar to React Motion… Weird trend…

Conclusion

There’s a lot to read, but I don’t have much to say. I’m sure Animated is a very good solution but I’ll have to spend a lot more time figuring out how to use it to know really how good it is, but it’s among the libraries I’m most interested in so far !

15 Minutes with Velocity React

As the name states, Velocity React is a library that focuses on using Velocity to create animations in your React apps… If you’ve never heard of Velocity, it’s described as the performance-oriented version of jQuery’s animate method. Sounds good !

First minute with the docs

As I kind of expected, the docs doesn’t say much about Velocity itself : it focuses on what it does itself which is the bridge between Velocity and React and leaves the rest up to you. It’s not too bad, but it makes things a bit hard at first, or rather made me feel like I might not understand much of what I was about to read.

Overall the docs are easy to read and the library quickly makes sense. There seems to be only 2 components to use and their properties kind of make sense. Well assuming those Velocity things are self-explanatory. You define your duration in a prop, and the animation prop is where you update the values to which you want to animate… Sounds logical !

So the first impression is quite good, if I had to do something similar to what’s explained in the docs, I think I’d be able to get started rather quickly.

Strength and Weaknesses

As I said, it looks fairly easy to get started with… Animations are easy to define and everything… But it seems to be quite limited in what it can do : it looks like it’s made to animate only the child element and for a duration common to all animated properties.

In a lot of cases that’s not too bad, and if it’s a known limitation there’s a lot of nice animations that can be done this way, but any kind of sequencing of transitions on multiple elements at the same time seems way out of scope here.

I had some time left after reading the docs so I looked at the demos and their code. They do run fast but the code seemed quite bloated, but I feel like this is because it’s based on old React versions (which I’m not familiar with and felt like noise) and because a lot of raw data for the examples was kind of getting in the way to the important bits that weren’t documented much.

Final thoughts

It’s a very good contestant when it comes to doing simple animations, or even more complex ones with constraints, I have yet to try them but I think for simpler stuff I might favor Velocity React over something like React Motion which I’ve discovered yesterday.

So yeah, it looks cool, there’s a blog post about how it came to be, which should be interesting to understand the need they tried to tackle… Looking forward to getting some animations done with this lib !

15 Minutes with React Motion

After reading about React Move I moved onto one of the heavy-weights of React animations : React Motion ! With more than 10k stars on Github and lots of blog posts and tweets about it online, I had high hopes ! Well after spending 15 (or rather 10) on the Github page of the project and its’ wiki I felt brutalized

The Docs, or lack thereof

It looks more like the documentation for some backend API service than for a library that animates things to make them move to create cool user experiences. No live demos, or anything like that to play with… It was kind of painful, my brain hurt for the majority of the time I spent looking at React Motion.

But after reading through it all, everything started to kind of make sense… I kind of felt like I was starting to put the pieces of the puzzle together… A little…

If I had to get started on a project using it, I’d probably be looking at some more pain, and I’d definitely have to look for a more hands on guide to help me because clearly the docs aren’t going to get me very far… Right now I’d say I know a little more than nothing about React Motion, but clearly I’m unable to detail how I’d go on to implement even the most basic animation on an existing app.

So what did I think of what I grasped

Overall the point of this experiment of only reading the doc for 15 minutes is to have some sort of fresh opinion of which tools to invest time in and some idea of what they could be good for so it’s not so surprising that I don’t feel ready to work with it right now.

Despite having a hard time navigating the docs, I’d say React Motion looks like it makes animation things, even values, and not just styles, easy which is a plus.

That being said, the concept of spring and stiffness and all that does seem a bit weird. It feels like it has the potential to make things much simpler if you have no clue what to do (working from static design comps, or even on your own) but it feels like it could get in the way if you decided to use more precise timings and sequences in more complex transitions.

It’s hard to make an opinion about what it’s really good for but it felt opinionated, which can be both good and bad, I’ll need more tests to see if it matches my needs, or how it adapts to different projects.

Conclusion

Either it’s very difficult to use, or maybe nobody spent the time working on contributing a nice introduction in the docs, but it’s overall quite hard to figure out how things are supposed to work just from reading the docs… A good Get Started guide will definitely be needed when I invest more time in it. That being said I think it’s worth the effort. First because it’s very popular in the React eco-system but also because it feels like this can really be an exhaustive solution to many animation needs.

Alright, time to figure out how to get rid of that headache now… Damn this documentation !

15 Minutes with React Move

There are a lot of libraries and frameworks available when it comes to working on animations with React. One of the first one at the top of my list is React Move, which describes itself asĀ Beautiful, data-driven animations for React. Let’s see !

So to give this framework a first go, I decided to spend 15 minutes, reading the doc only, just to see what I could grasp from it, what examples they chose, and what I felt I’d be able to do on my own after just going through some sort of Get Started tutorial (maybe not even all of it).

First contact : The Doc !

Needless to say the first page of documentation, title Animate made me frown from the get go. After just a few words of introduction, here we are with some props and parameters, and a complex example of an SVG map morphing… Overall I think the doc lacks some sort of ramp up and goes too fast into the hard stuff.

In the end, after reading the doc for 15 minutes (which was enough to read pretty much all of it) I already had a vague idea of how React Move might work, or at least what I’d do to get started using it in an upcoming project.

One thing the docs reference a lot and that I have very little experience with is D3.js which I believe is first a graph library that includes some utilities for animations and easing… It was mentioned here and there, I’m not sure how important this is when working with React Move but that might mean more things to learn about before being able to make cool stuff move.

So what does it look like

Well overall pretty cool ! It describes itself as data-driven animation and I think it should work really well when working with datasets to animate. From list or tables to sort or filter for example. A lot of details go into keeping track of the keys and having new elements inserted and all that… So if I had to work on a killer list page with filter, sorting, appear and disappear animations, I think React Move would work quite well.

I didn’t see much that made me think it’d be great for more UI oriented animations, more eye-candy transitions and things like that, but until I try for myself, it’s hard to say, there’s a good chance it could do quite well, even though that’s not what the demos focused on.

Conclusion

So after 15 minutes reading about it I think React Move deserves more time, it looks very promising, and I think it can be fairly easy to do cool things with it, when used to do what it’s made for, and probably even more.

When I do spend that time to learn more about it I’ll try to link to better sources to get started, as the doc is, in my opinion going too fast into the details and specific, and expecting a lot of understanding of some technical subtleties that could be introduced one by one for an easier approach.

But anyway, React Move looks cool.