12 Days of Partners, Integrations, and Other Good Stuff: React-Spring

It’s that time of year again. Snow has begun falling from the skies in places that are lucky enough to have moisture in the air, we’re all already tired of hearing Michael Buble songs playing on a loop, and some of us are getting in the spirit by wearing ugly Christmas sweaters everywhere we go.  

To celebrate, Shortcut is highlighting twelve of our favorite integrations and partnerships. We hope you return every day to read these posts alongside your tinglers and fuzzles, your dafflers and wuzzles, and your delicious pot (or Beyond meat) roast.

Our tenth feature in this continuing series: react-spring.

On the Tenth Day of Partnerships, Integrations, and Other Good Things, Shortcut brings to you: react-spring, the platform that breathes life into your animations with simple spring animation primitives, so that your animations have a natural look and feel.

Yes, we know that Christmas is over, but the Michael Buble songs are still playing on loop and the ugly Christmas sweaters are still being worn, and honestly, why would we ever stop celebrating? We’re the company of joy, after all.

Technically, the actual twelve days of Christmas - the theme of this blog series, as it happens - starts with Christmas Day and ends on January 5th, when we’ll all be back at work… let’s change the subject. Let’s talk about react-spring instead, as we keep reacting to the holidays and we prepare to spring into 2022.

React-spring is a spring-physics based animation library that covers most UI-related animation needs. We use it and we like it. The tool is flexible enough to confidently cast our Dot-like ideas into moving interfaces.

So, if react-spring is what helps make your animations look sprung, what exactly gives it its spring?

The spring in react-spring

What puts the spring in react-spring’s step is the fact that it doesn’t have a curve or a set duration. This is very different from plain old animation, of which people are used to thinking of in terms of time and curves. But nothing in the real world moves like that, and thus we run into problems when we try to make elements of the screen come alive in a natural-feeling way. Thanks to physics, we no longer need to consider duration or easing curves. Instead, we focus on actual physical properties. React-spring heavily uses this logic on all of its animations which is why it is said to work like any other real-world property.

Shortcut + react-spring

At Shortcut, we use react-spring to manage some of the interface animations on our website. We like it because the spring animations are more on brand - they feel more natural and joyful compared to traditional set duration web animations. Not all of the animations on our site are currently managed via react-spring, but we hope to refactor some of our older components to use it.

For example, react-spring is how we manage the layered images that appear on many of our landing pages. If you are reading this, you are probably on our website. So, first, thanks for stopping by. And second, while you’re here, find react-spring featured on our home page, solution pages, integration item pages, and our product page. It’s also in use on our pricing page to manage the price toggle animations, and to manage the animation on the features menu dropdowns. The best example is the article carousel on the blog index, if you scroll all the way down.

Another way to put it: in animation, react-spring is essentially the middle man who transforms our changing style values to produce a smooth transition for the values we want.

Go ahead and give react-spring a try; we endorse it. And while you’re at it, give us a try.

‍