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.
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.