--- title: React Spring vs Animated published: true tags: react, javascript canonical_url: https://blog.logrocket.com/react-spring-vs-animated/ cover_image: https://thepracticaldev.s3.amazonaws.com/i/cbkywu5m8l5g2leuw3dz.png --- **Written by [Peter Ekene Eze](https://blog.logrocket.com/author/peterekeneeze/)**✏️ The [Animated](http://animatedjs.github.io/interactive-docs/) library is designed to make animations fluid, powerful, and easy to build and maintain. It focuses on declarative relationships between inputs and outputs, with configurable transforms in between, and simple `start`/`stop` methods to control time-based animation execution. [React Spring](https://www.react-spring.io/) can be seen as an extended version of the Animated library. It builds upon Animated’s foundation, making it leaner and more flexible. It inherits [React Motion](https://github.com/chenglou/react-motion) Declarative API and goes to great lengths to simplify it. It has lots of useful primitives, can interpolate mostly everything and, last but not least, can animate by committing directly to the DOM instead of re-rendering a component frame-by-frame. ## Prerequisites In order to properly follow along in this post, it is required to have a basic understanding of the following technologies: - [ReactJS](https://reactjs.org) - [React Spring](https://www.react-spring.io/) - [Animated](http://animatedjs.github.io/interactive-docs/) - [Node.js ≥v6](https://nodejs.org/) is installed on your machine, and - [npm](https://www.npmjs.com/) is installed on your machine [![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/) ## Setting up Animated You can use npm to add the Animated library to your project: ```jsx npm install animated ``` Then import it into your project like this: ```jsx import Animated from 'animated/lib/targets/react-dom'; ``` ## Setting up React Spring Just like Animated, you can install the React Spring library via npm like this: ```jsx npm install react-spring ``` And import it into the project for use like this: ```jsx import { Spring } from 'react-spring' ``` ## Platform targets The Animated library specifically targets the DOM as can be seen from the import statement: ```jsx import Animated from 'animated/lib/targets/react-dom'; ``` Unlike the Animated library, React Spring allows you to build for targets other than the DOM: ```jsx // The default export is valid for react-native as well import { Spring } from 'react-spring' // react-konva import { Spring } from 'react-spring/dist/konva' // Any other target or platform import { Spring } from 'react-spring/dist/universal' ``` ## Interpolation Consider an animated box that rotates for a certain period of time and dissociates in parts via Interpolation, the Animated library will interpolate it between an input range of numbers between (0,4) and then a specified set of output range values in degrees which falls between (0 and 360 degrees): ```jsx // ... Animated render() { return (

); } ``` {% codesandbox fnjk4 %} With React Spring, the `from` attribute sets the rotation to a steady “0deg” and rotates it to a 90% turn which makes for a more liquid and declarative rotation: ```jsx // ... React Spring render() { return (

{({ rotation }) => (

{this.state.deg}

)}

); } ``` {% codesandbox e29m0 %} In this aspect, if you prefer to type less code and maintain a clear level of understanding, React Springs takes the cake because it doesn’t handle just numbers. With React Spring you can interpolate almost everything ranging from colors to angles, relative lengths, SVG paths etc. However, if you don’t have any problems with the conventional alternative procedures that involves typing as much code as is necessary, interpolating only the relevant elements and generally sticking to familiar routes, then the Animated library provides that consistency here. ## Declarative React Spring embraces the declarative nature of React. It has a simplified and declarative API that allows the creation of complex animations with a few lines of code. It also exposes an imperative API, in case you want to manually specify unique controls for your animation processes. ### Declaratives in React Spring: ```jsx // ... React Spring class App extends React.Component { state = { toggle: false }; handleToggle = () => this.setState(state => ({ toggle: !state.toggle })); render() { return (

{({ scale }) => (

)}

); } } const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); ``` {% codesandbox 9cgcp %} Animated on the other hand has an imperative API which means that creating animations will involve a rather manual process and more verbose code. ### Declaratives in Animated: ```jsx // ... Animated class App extends React.Component { state = { toggle: false, anim: new Animated.Value(1) }; handleClick = () => { this.setState( state => ({ toggle: !state.toggle }), () => { this.state.toggle ? Animated.timing(this.state.anim, { toValue: 0.5 }).start() : Animated.timing(this.state.anim, { toValue: 1 }).start(); } ); }; render() { return (

); } } const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement); ``` {% codesandbox 85zf9 %} From the examples above, React Spring’s `to` and `from` attributes make it easy to change the `scale` property of an element from one state to another and with it, the library animates the element accordingly. For Animated, we have to set an initial `anim` value in the component’s state and update it with a `toValue` in the `Animated.timing` method and then call a `start` method on it before the library can carry out the animation. ## Primitives React Spring contain primitives like ``, ``, ``, `` for animations like trails, transitions, parallax and so on. These primitives help you achieve primitive animations without the inconveniences of manually writing all the required logic. Just like declaratives, Animated does not contain primitives. In order to achieve Primitive animations, you’ll have to manually create the required animation, and this involves writing more lines of code. ## Performance Since React Spring is an enhanced form of the Animated library, it leverages its ability to apply animations without relying on React to render updates frame by frame, making it very performant. The Animated library makes up in performance as it also applies updates to animations directly to the DOM in a `requestAnimationFrame` which ensures the animations render within the required frame and doesn’t cause “jank”. Compared to the Animated library, React Spring covers more grounds as it combines the existing efforts of both the Animated library and React Motion to offer a more powerful animation system. | | Declarative | Primitives | Interpolations | Performance | | --- | --- | --- | --- | --- | | Animated | ![❌](https://s.w.org/images/core/emoji/12.0.0-1/72x72/274c.png) | ![❌](https://s.w.org/images/core/emoji/12.0.0-1/72x72/274c.png) | ![✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | ![✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | | React-spring | ![✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | ![✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | ![✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | ![✅](https://s.w.org/images/core/emoji/12.0.0-1/72x72/2705.png) | If by design, you have no explicit need for declaratives and primitives in your animations, Animated is performant enough to build out your ideal animations with the rich interpolation features it offers. If however, you want it all together, React Spring has more to offer with the inclusion of declaratives and primitives. ## Ease of use Getting started on both libraries is quite simple as we demonstrated at the beginning of this post, however, a majority of the very useful information about Animated and the features it offers is found within the [React Native documentation](https://facebook.github.io/react-native/docs/getting-started.html) which makes it a bit tricky when searching for learning resources on other information about Animated. [The documentation](https://facebook.github.io/react-native/docs/animations) doesn’t provide very simple steps on how to easily get started for people with no existing knowledge of animations. React Spring, however, has rich [documentation](https://www.react-spring.io/) with several examples that provide an easier guide to learning how to use the library in making animations in React. There are also a few React [Spring tutorials](https://dev.to/bnevilleoneill/implementing-animations-in-react-with-react-spring-110k) and [articles online](https://scotch.io/tutorials/create-animated-react-apps-with-react-spring). ## Community support With about 94 contributors and 13.9k stars on [GitHub](https://github.com/react-spring/react-spring) for React Spring compared to about 10 contributors and 9k stars for [Animated](https://github.com/animatedjs/animated), React Spring has stronger community support regardless of being very new compared to [Animated](https://github.com/animatedjs/animated). React Spring has seen much more contribution from the React developer ecosystem since inception than Animated has. React Spring also [has backers and sponsors who donate](https://opencollective.com/react-spring) funds to support and ensure its development is continuous. Here are the code frequency graphs of both technologies according to their Github repositories. ![React Spring code frequency](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/08/reactspringcodefrequency.png?resize=1024%2C727&ssl=1)

React Spring code frequency

![Animated code frequency](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2019/08/Animationcodefrequency.png?resize=1024%2C739&ssl=1)

Animated code frequency

React Spring also has more active code contribution, as seen in the images above, which shows that it has most likely seen more improvements to catch up with JavaScript’s fast-paced growth. ## Final thoughts React Spring and Animated are both great animation tools that help us create nice user experiences. Choosing between them depends entirely on your project needs and architecture. It is worthy to note that this post isn’t meant to create hype or throw shade at any of these tools, but rather offer a better understanding of their strengths and weaknesses so you can make an informed decision. Cheers! * * * **Editor's note:** Seeing something wrong with this post? You can find the correct version [here](https://blog.logrocket.com/react-spring-vs-animated/). ## Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps ![LogRocket Dashboard Free Trial Banner](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png?resize=1200%2C677&ssl=1) [LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store. In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps. [Try it for free](https://logrocket.com/signup/). * * * The post [React Spring vs Animated](https://blog.logrocket.com/react-spring-vs-animated/) appeared first on [LogRocket Blog](https://blog.logrocket.com).

konva

React Spring vs Animated

Join Our Newsletter. No Spam, Only the good stuff.