Bring Your Web Components To Life With react-spring

react-spring is a spring-physics based animation library. react-spring is cross platform, it supports the web, react-native, react-native-web and practically any other platform (use the /universal export in that case, which does not carry native elements and color-interpolations).

react-spring is available as a npm package.

npm install react-spring

There are 5 hooks in react-spring currently:

• useSpring a single spring, moves data from a -> b
• useSprings multiple springs, for lists, where each spring moves data from a -> b
• useTrail multiple springs with a single dataset, one spring follows or trails behind the other
• useTransition for mount/unmount transitions (lists where items are added/removed/updated)
• useChain to queue or chain multiple animations together

Render-props api

• Spring – The primary task of a Spring is to move data from one state to another. The optional from-prop only plays a role when the component renders first, use the to-prop to update the spring with new values.

import {Spring} from 'react-spring/renderprops'

• Trail – Trail animates the first item of a list of elements, the rest form a natural trail and follow their previous sibling.

import {Trail} from 'react-spring/renderprops'

• Transition – Transition animates component lifecycles as components mount, unmount or otherwise change. It takes a list of items of any type, and their keys. The latter defaults to item => item, which, if your items are self-sufficient as a key is often good enough. Whenever items are added, removed, reordered or updated, it will help you to animate these changes.

import {Transition} from 'react-spring/renderprops'

• Keyframes – Keyframes is a factory that extends either springs or trails. You start by defining one or many named-slots in which you place the properties you want to animate. By default all unknown props are interpolate as “to”. You can use all spring props otherwise: from, config, reset, etc. It creates a component that bears a special “state” prop, which receives the name of one of the slots. It will execute it and run its animations.

import {Keyframes} from 'react-spring/renderprops'

• Parallax – Parallax creates a scroll container.

import {Parallax, ParallaxLayer} from 'react-spring/renderprops-addons'

One of the strengths of react-spring is that it can apply animations without relying on React to render updates frame by frame like most React animation libraries do. The difference may not be apparent in simple situations, but try a nested chart or routes and the difference will be quite drastic.

So, make sure to check out react-spring.