What does "animated" do in react-spring?

Question

I am currently getting to grips with the react-spring animation library.

In some of the CodeSandbox demos (e.g. https://codesandbox.io/embed/j150ykxrv) in the documentation, something is imported called "animated":

import { Transition, animated } from 'react-spring'

and then used like so:

  {this.state.items.map(item => styles => <animated.li style={{ ...defaultStyles, ...styles }}>{item}</animated.li>)}

In other examples this isn't used:

import { Spring } from 'react-spring'

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

I can't find any mention in the documentation of what this does or why it is used, as it seems you can animate by just passing animated style props into a component.

Are the uses in the documentation part of a legacy version?

Zollverein

Answer 1

Native is optional, if you set it (and then you need the component to extend from animated.xxx) it won't render out the animation like normally react animation libs would do, in other words they call forceUpdate or setState on every frame, which is expensive. With native it will render the component once, then animate in the background using a requestAnimationFrame-loop which sets the styles directly. The values you pass to your target div (or whatever) are not numeric values but classes that receive update events, this is why you need to extend.

Rendering through react is not obsolete, though, it is the only way you can animate React component props. If you have a foreign control, or a D3 graph for instance, you would simply blow props into it while the spring renders them out.

Psychokinesis

Answer 2

Looking further into the docs, I can see it is used for "native" rendering.

This allows react-spring to bypass React for frame updates. The benefits of this method are improved performance.

---

It is recommended to use this approach

"Try doing this in all situations where you can"

---

Just be aware of the following conditions:

1. native only animates styles, attributes and children (as textContent)
2. The values you receive are opaque objects, not regular values
3. Receiving elements must be animated.[elementName], for instance div becomes animated.div
4. If you use styled-components or custom componemts do: animated(component)
5. If you need to interpolate styles use interpolate

---

Summarised benefits:

1. Your application will be faster, the difference really can be night and day
2. You get quite powerful interpolation and keyframing tools (see below)
3. You get to animate scrollTop and scrollLeft out of the box (which React can't normally handle)

Zollverein

Answer 3

Looks like it is used for doing native rendering,take a look a the Transition component , it has a native prop

Michell