Original text: alligator. IO/react/intro… In this article, we’ll explore one of the best animation frameworks for React: React Spring. You’ll learn the basics of changing component styles to smooth, physics-based transitions.

What you need to know in advance

React Spring has a hook – and component-based API. We will use basic Hooks for all animations. Learn about React Hooks first.

Environment installation and configuration

Use the Create React App as the scaffolding, and install React-Spring

$ npx create-react-app react-spring-example
$ cd react-spring-example
$ npm i react-spring 
Copy the code

From and to

In the following app.js file, use UseSpring and Animated from the React-Spring library. UseSpring is a stylized custom hook that accepts an object with from and to values as start and end states. React-spring uses these two states to handle transitioning animations. From and to can set almost any CSS property object: color, size, transform, even the scrollbar. Simply add Animated to the HTML tag to apply Spring animation. By default, the animation is executed immediately when the component is mounted.

Transiting from one value to another can be a bit tedious, but React-Spring can use arrays to render animations with multiple stages. Just remember to always include the start state in any attributes you add.

More talk is useless, the following code:

// App.js:
import React, { useState } from 'react';
import { useSpring, animated } from 'react-spring';


const App = (a)= > {
  const animation = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1}});const colorAnimation = useSpring({
    from: { color: 'blue' },
    to: { color: ` ` RGB (0, 255)}});const multiAnimation = useSpring({
    from: { opacity: 0.color: 'red' },
    to: [{opacity: 1.color: '#ffaaee' },
        { opacity: 1.color: 'red' },
        { opacity: . 5.color: '# 008000' },
        { opacity: 8..color: 'black'}}]);return (
    <div>
      <animated.h1 style={animation}>Hello World</animated.h1>
      <animated.h1 style={colorAnimation}>Hello World</animated.h1>
      <animated.h1 style={multiAnimation}>Hello World</animated.h1>
    </div>
  )
};

export default App;
Copy the code

The concept of the State

Binding some local state adds some real time effects to the animation, rather than animation transitions at mount time. For single-step animations, we can use ternary operators instead of from and to properties.

import React, { useState } from 'react';

const App = (a)= > {
  const [on, toggle] = useState(false);

  const animation = useSpring({
    color: on ? 'blue' : 'red'
  });
  return (
    <div>
      <animated.h1 style={animation}>{! on ? "I'm red" : "Now I'm blue" }</animated.h1>
      <button onClick={()= >toggle(! on)}>Change</button>
    </div>)};Copy the code

Interpolates properties

In addition to adding only static style changes to elements and components, we can use Interpolate to create more interesting and reusable animations. Since it is also an object, you can add variables in Spring and Interpolate to get the style.

We simply Interpolate the value from Spring and Interpolate it more into a template. This will give us the freedom to set more dynamic values, such as color values based on the X position.

const App = (a)= > {
  const [on, toggle] = useState(false);

  const { xy } = useSpring({
    from: { xy: [0.0].color: 'green' },
    xy: on ? [800.200] : [0.0].c: 'red'
  });
  return (
    <div>
      <animated.h1
        style={{ 
            transform: xy.interpolate((x.y) = >`translate(${x}px, ${y}px)`), color: c.interpolate(c => c)}}> {! on ? "I'm here" : "Now I'm over here"}</animated.h1>
      <button onClick={()= >toggle(! on)}>Change</button>
    </div>)};Copy the code

Mimicking Keyframes

One of the more useful aspects of Interpolate is that we can simulate CSS keyframes. Instead of passing the value into Spring, set it to 1 or 0. Interpolate As before, we need to pass an object with scope and output. The range can be any value between 0 and 1, and can work just like setting breakpoints with CSS keyframes, with the corresponding output being the value to be pre-rendered.

A second interpolation will then reset our style each time the output changes.

const App = (a)= > {
  const [on, toggle] = useState(false)

  const { x, c } = useSpring({
    from: { xy: [0.0].c: 0 },
    x: on ? 1 : 0.c: on ? 1 : 0
  })

  return ( 
    <div>
      <animated.h1
        style={{
          transform: x.interpolate({
            range: [0.25... 5.75..1].output: [0.500.200.800.500]}).interpolate(x= >`translateX(${x}px)`), color: c.interpolate({ range: [0, .5, 1], output: ['red', 'blue', 'green'] }).interpolate(c => c) }}> {! on ? "I'm here" : "Now don't know where I'm going"}</animated.h1>
      <button onClick={()= >toggle(! on)}>Change</button>
    </div>)}Copy the code

Config

In itself, the previous example is straightforward and surprising. This is because of the default configuration of React-Spring. The animation properties we can manipulate in Spring are as follows:

Mass: Affects speed and transition effects. Tension: Affects overall speed. Friction: Controls the resistance and speed of deceleration. Clamp: Should the transition be instantaneous?

const animation = useSpring({
    {/ *... * /}
    config: {
      mass: 5.tension: 50.friction: 25.clamp: true}});Copy the code

Here are some useful defaults:

config.default { mass: 1.tension: 170.friction: 26 }
config.gentle { mass: 1.tension: 120.friction: 14 }
config.wobbly { mass: 1.tension: 180.friction: 12 }
config.stiff { mass: 1.tension: 210.friction: 20 }
config.slow { mass: 1.tension: 280.friction: 60 }
config.molasses { mass: 1.tension: 280.friction: 120 }
Copy the code
import { useSpring, animated, config } from 'react-spring';

const animation = useSpring({
    {/ *... * /}
    config: config.wobbly
  });
  
// Or you can just destructure it if you want to change other options 
const animation = useSpring({
    {/ *... * /} config: { ... config.molasses,clamp: true}});Copy the code