Top 5 features of React Spring animation library

Animation is the integral part of any application where interactivity and engagement is required. Whether you are creating a simple login form or a complex shape transition, animation is the heart of user interface.

Introduction

React Spring is the library which provides handy hooks to create animations for react native and reactjs applications. In this article, I will show you the top 5 useful features of react spring animation library.

1. Total 5 hooks for handling various scenarios

The five hooks provided by spring are –

1. useSpring – use this for individual components.
2. useSprings – use this for the list of items.
3. useTrail – For staggering effect where one animation runs after a delay of another animation.
4. useTransition – For running on mounting and unmounting of components.
5. useChain – For running animations one after the other in chain.

You may also like-

2. Configuration can be changed using config parameter

Various configuration parameters are provided by spring. These are used to change the properties like mass, friction, velocity, duration etc. Total configuration parameters are –

1. mass (default: 1)
2. tension (default: 170)
3. friction (default: 26)
4. clamp (default: false)
5. precision (default: 0.01)
6. velocity (default: 0)
7. duration (default: undefined)
8. easing (default: linear)

You can use configuration parameters by using them in hooks. Like this –

useSpring({ config: { duration: 250 } })

3. Predefined configuration templates for different use cases

Although you can define configuration settings according to what you want to achieve, but there are some predefined templates which will cater a number of general cases. These templates are –

1. config.default
2. config.gentle
3. config.wobbly
4. config.stiff
5. config.slow
6. config.molasses

4. Universal Interpolation for All Styles & Properties

Unlike native animation api, react spring provides interpolation for nearly all kinds of values and properties. It is not limited to numbers or colors or angles. It could be used for –

1. Colors
2. Dimensions (cm, mm, px, %, em etc)
3. Angles (rad, deg)
4. SVG and all other HTML tags
5. All CSS properties

5. Render props for adding animations quickly

There are some predefined components which you can use directly without even need to declare any spring hook in your react code. Whatever element or component you want to animate, just provide that as a prop to these spring components. For example –

<Spring
  from={{ opacity: 0 }}
  to={{ opacity: 1 }}>
  {props => <div style={props}>hello</div>}
</Spring>

Some of these render props are –

1. Spring
2. Trail
3. Transition
4. Keyframes
5. Parallax

These are the top 5 features of react spring library. See you in the next article.