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 !

Leave a Reply

Your email address will not be published. Required fields are marked *