React-Move 2.0 🌀 Resonance joins React-Move to make your animations even better!

Published in

React Tools

4 min readAug 31, 2017

TL;DR —View the examples and links at the end :)

Animations in React have been approached from so many different angles over the last year or two, ranging from the roots of React’s own ReactTransitionGroup all the way to the physics-poweredreact-motion library.

After trying countless libraries (including the ones above), I quickly discovered the need for a simpler approach. So, earlier this year, I built and released react-move, a simple and powerful approach to what I believe is the solution to a majority of React user’s animation desires.

React-Move 1.0 was a great start

When I initially released react-move, the adoption and feedback from the community was fantastic. By taking a similar function-as-a-child approach thatreact-motion used, it immediately felt familiar and powerful, but instead of confusing physics and spring properties, react-move used simple durations and time-based properties. Ultimately, this made it so much easier to quickly build reliable animations for day-to-day use.

Resonance takes it to the next level

Last month I noticed another animation library called resonance gaining traction on Github. I was even more curious when I noticed its API was very similar to react-move’s. “Why didn’t he just use my library?”, I thought. So I decided to try it, and learn why.

To my surprise, `resonance` was nothing short of amazing.

Its performance was phenomenal and it’s API was so much more powerful. The stability of the configuration and animations was something I quickly wished I had achieved with react-move. It was a pivotal moment as I realized my library had been bested. So what now?

All for one and one for all

Through my every-day obsession and usage of open source libraries, I have seen others and myself fall into the trap of less-than-constructive competition between the microscopic libraries we install and remove from our projects every day. Overall, I believe competition is good for the open source marketplace, as it will usually lead to innovation.

Today was different though. resonance was suddenly something I something I wanted to use and support.

I awkwardly approached resonance’s author, Steve Hall, with an absurd idea: “Hey, would you be interested in joining forces?”. I was skeptical of how this could end up, but his immediate response was more than empowering:

“Let’s do it!”

We both agreed it would ultimately be futile to split the the open source world in two when we could build something even better together.

“This is what Open Source is all about.”

Near the end of our very literal merger, Steve (the mastermind of React-Move 2.0) had some great things to say about the the journey:

Joining forces on react-move is what open-source is all about: collaborating on software to solve common problems and sharing those ideas with the world.
I knew of Tanner’s work from his other high-quality open source projects, so when he approached me about working together I was, of course, very interested. It didn’t take long to see that merging the two libraries together made total sense.
After the last few weeks weeks of bouncing ideas around and discussing the pros and cons of various approaches, I think we have an awesome offering for the 2.0 version of react-move.
Finding the right API for react animations has turned out to be a truly challenging and rewarding problem to solve, but the work doesn’t stop at 2.0. We hope that others will join in to offer ideas, help track down bugs and help us grow our collection of examples.

Resonance + React-Move === React-Move 2.0

Mind boggling performance
Amazing stability
A simple and even more powerful API
Delays, staggers, and complex transition groups
Multi-step Transitions
Animation lifecycle hooks

Try it out!

Check out this quick codesandbox.io example:

Browse all of the examples at react-move.js.org
Visit the React-Move Github repository for download instructions and let us know what you think!
If you like what you see, check out the rest of our tools at the React-Tools Github Organization!