Yesterday the React-team finally unveiled their vision of a class-less future in React. Today we’re going to take a look at how to use this for animations, using react-spring 6.0.

First of all, you would think of react-spring as being render-props driven. Render props are expressive, explicit, and usually very easy to use. But since it is internally steered imperatively, supporting hooks was just a matter of a couple of lines added to its core. The export is now live under react-spring@6.1.0. If you want to use hooks, you will need react and react-dom alpha, otherwise it won’t run. Both apis, the imperative one and hooks, are explained in full detail here.

Basically useSpring turns any data into animated data, with a single line. Throw in whatever you want, numbers, colors, percentages, anything really, just drop it in and place the output into your view. Like so:

So let’s make some cool looking goo with this, whatever the purpose …

Fetching hooks

Let’s start by importing a few essentials. We’re going to use React of course, and since we plan using side-effects (mouse-events) we fetch useEffect while we’re at it. useSpring is the hook we’re going to animate with.

Forming a trail

Next we’re going to create a pure function, this is critical, you can only use hooks in functions, and they need to be declared in top-function scope.

useSpring creates a persistent hook that takes raw values and returns animated values, which are later bound to a view. You can update your spring by overwriting the hook, it will remember previous values and animate adaptively. Additionally useSpring returns an updater, similar to useState, with the distinction that the set function will not cause the component to render, which is useful in situations where you are dealing with event input. We want the spring to update, and the view to animate, without refreshing the component on every mouse-move.

One goo-drop follows the mouse, while the others should trail, we do this by referencing the animated values so that one spring naturally follows the output of another.

Finally we define a basic function that takes [x, y] and forms a css-transform-statement, we need this for interpolation later on. A little trick that i learned once, you can stack transforms, so we shift blobs to mouse-coordinates first, then shift them half their size back so that they are cursor-centric.

Handling the mouse

useEffect is Reacts way of creating a side-effect. We would like to register an event-handler on mount and unregister it on unmount, additionally we need to listen for mouse-movements in order to update our spring, this is where the set function mentioned above comes into play. Notice how we only need to update the first spring, since the others will follow naturally (with slightly slower spring configs).

The [] in the end of useEffect prevents React from running it every update, think of it ascomponentDidMount and componentWillUnmount combined into one effect.

Creating an SVG filter

This step is straight forward, we drop an SVG with a gaussian blur and a color matrix into the scene. Everything is explained here in detail. In synthesis, all we do is animate a couple of shapes while the SVG filter will later do its thing and make it appear as if they would merge together.

A small warning while we’re at it, sadly some browsers still struggle with filters or can’t process them on the GPU (which can make it very slow). I wouldn’t exactly recommend putting this on your website.

Rendering out the animated blobs

This is the last step and we’re already done. Here we simply define a couple of divs and animate their transforms. We are extending the divs fromanimated which allows react-springs to animate outside of react. We take the transform that we defined earlier, apply it, and this is it. Wasn’t so hard, was it?

Et voilà, and this is how it looks …

Hope it was fun!

My name is Paul Henschel, i am based in St. Gallen, Switzerland. I am the founder of Luxundlaune, a photography platform in Germany, Paranoidandroid, a custom rom for Android and several minor open source projects.

You can reach me on Twitter and on Github.

When i published Why React needed yet another animation library. Introducing: react-spring what feels like an eternity ago, i had no idea the library would grow into what it is today. It is reaching 8.000 stars on Github, powers 1.300 projects and over 60 dependencies. It reached 26.000 downloads per week on npm. Considering that i made it initially for myself i didn’t expect much when sharing it, but i am more than happy to see that it enables others as well to cast ideas into motion.

People have been very kind, helping out, funding a little, suggesting things or adding issues — and so far it’s been quite nice for open source, which, as you know, can also take graver turns.

So it’s that time again, i’ve been testing limits, took polls, collected all sorts of suggestions and ideas. And a while ago i started preparing a major. Of course i had no idea that i would end up writing the thing from scratch. The changes this time around are massive, though i kept api changes to a minimum in order to not create a situation that would cause painful upgrades.

The focus of react-spring remains untouched: no magic, simplicity and declarative expression.

I am still certain that this is the best way to animate. I loved the way react-motion used render-props, handing out interpolated values instead of masking animations with wrapper-components doing magic things in the background. And of course how the animated library could bypass React when animating and interpolate complex data was also a big influence. Both are still the main inspiration.

The main focus of the release were features and suggestions that came up over time. A full overview can be found here: https://github.com/drcmda/react-spring/releases/tag/v6.0.0

In essence, react-spring 6.0 has further reduced the underlying animated underpinnings, making it faster (by sharing one combined requestAnimationFrame-loop per spring), more flexible and a little bit leaner, too. It runs on a different spring mechanism as well (from RK4 to SEE).

Further additions were slight api changes in order to make it less confusing in some edge cases, lots and lots of new features and capabilities that are too many to list here, inbuilt durations, multistage and trailing transitions, being able to reverse animation, end-state props that are applied after animations conclude (good for settings display: ‘hidden’ and things like that), and so on.

Last but not least i’ve used docz to document the api. There are lots of small examples and playgrounds to toy with now: http://react-spring.surge.sh and i hope this makes it easier for beginners to start.

TLDR, If you haven’t tried react-spring before, now’s the perfect time. 😉

My name is Paul Henschel, i am based in St. Gallen, Switzerland. I am the founder of Luxundlaune, a photography platform in Germany, Paranoidandroid, a custom rom for Android and several minor open source projects.

You can reach me on Twitter and on Github.

Ever since i started developing i was fascinated by the vividness of animated applications, they felt alive. And we sure have come a long way, too. There are dozens of tools to choose from today. From tweening libraries to full fledged declarative options, especially in the React world.

The prevalent options today are react-motion, animated, react-move, popmotion and a couple of others. All of them have incorporated incredible ideas over time, some have changed the way we think of implementing movement. I would primarily like to credit react-motion for that in particular.

Polar opposites

In practice however things were not always so bright as the freedom of dom-oriented tweening tools has often been lost in translation. Despite the many merits, some of these libraries had shortcomings that were hard to overlook, some could not interpolate data for instance, were complex and unwieldy, a bit slow as they would let React render each frame of the animation, or lacked declarative components, which meant managing loose-end animation handles.

One day it struck me that the time i have been putting into working around animation related troubles could perhaps be spent bringing them together, befriending them so to say. That day react-spring was born.

What makes it so different then?

React-spring is based on a cooked down, simplified animated fork. You may know animated from react-native already, and if not check out the following slides in which Christopher Chedeau explains how it works.

It was turned into a barebones foundation that now drives lean and inexpensive building blocks or primitives. This combination of a rock solid low-level foundation with all its benefits and declarative abstractions becomes extremely valuable as it lends to an eco system of modular building blocks.

Such primitives could do just about anything. One shifts data from here to there, one trails, one transitions between lifecycle changes, one parallaxes pages, one orchestrates, and so on.

At the same time the focus is on absolute simplicity. Things that would usually get hairy as you are shaping your code around a library’s specific demands can be done in a couple of lines now without warping the data at all.

The most trivial implementation however can only go so far and complex use-cases demand fine control. React-spring’s premise is: simplicity first, but its properties are flexible enough to support both simple and complex use-cases.

Can it interpolate?

Oh yes it can. It will move effortlessly between most of the webs units, from colors, percentages, arrays, vectors, lenghts, SVG paths, and so on. This means you can animate actual, non-numeric data. There are also means for ranges, clamping, and custom interpolators.

What about performance?

One of the strengths of animated is that it can apply animations natively without relying on React to render updates frame by frame like virtually all other React animation libraries do. React-spring thereby benefits from animated’s clever rendering model.

The difference may not be apparent in simple situations, but try a nested chart and React will plow through the CPU, choking the browsers frame budget.

Applying updates outside of React has strict limits as you can only animate dom-native styles and attributes since generic React components do not have a representation in the dom, but here you can choose between both models by supplying the native flag.

Animated is equipped to handle full-native drivers as well, so in the future, should web animations gain more support, it would even be possible to do all the animation in the compositor thread. But for now react-spring can be compared to gsap or d3, which animate in a requestAnimationFrame loop as well.

Are declarative primitives really enough?

For most UI related tasks, maybe, but for anything that involves staging and orchestration — it probably isn’t enough.

The lack of imperative animation can sometimes hurt, and one of the hardest bits in most of the libraries today is switching between primitives, for instance moving something with a spring first, trailing its elements into place, then transition additions and removals. As you can imagine, doing this declaratively is almost futile as it would mean slicing and dicing the heck out of your code. This is where traditional tweening libraries shine.

While it is still highly experimental at the moment, react-spring already seeks ways to blend scripting and composition, which might offer more freedom when it comes to chaining and orchestration.

Conclusion

If you haven’t, give it a shot. You can run most of the flashy examples above here: https://github.com/drcmda/react-spring/tree/master/examples and many of them have code-sandboxes for toying around on the Github page.

I promise you will rub your eyes in disbelief when seemingly complex things are worth just a couple of lines of code. And perhaps, and that is my dearest wish, it will make your work easier and inspire you to confidently cast ideas into moving interfaces.

If you have any troubles or specific wishes and use-cases, be sure to open up an issue and i am happy to engage. I am also looking for contributors and would love to explore the possibilities together.

My name is Paul Henschel, i am based in St. Gallen, Switzerland. I am the founder of Luxundlaune, a photography platform in Germany, Paranoidandroid, a custom rom for Android and several minor open source projects.

You can reach me on Twitter and on Github.

📝 Read this story later in Journal.

🗞 Wake up every Sunday morning to the week’s most noteworthy Tech stories, opinions, and news waiting in your inbox: Get the noteworthy newsletter >