RFC: build-in animation component

[behnammodi]

• Start Date: 2023-07-04
• RFC PR: (leave this empty)
• React Issue: (leave this empty)

Summary

Introduce a built-in component for animations in React.

Basic example

Proposed is the inclusion of a built-in Animation component that would handle various types of animations effectively.

Please refer to this example for a demonstration: https://codesandbox.io/p/sandbox/o1mplp

https://github.com/reactjs/rfcs/assets/1549069/25bc51ad-b371-4964-b2cb-58924f58fa5a

<Animation
  duration={500}
  fill="both"
  direction={show ? "normal" : "reverse"}
  keyframes={[
    { opacity: 0, transform: "translateX(0px)" },
    { opacity: 1, transform: "translateX(500px)" },
  ]}
>
  {show && <Card />}
</Animation>

The best part of in the above example is show state, the show state determines whether the Card component is displayed on the page. When show is set to false, the Card component performs the animation and disappears after completion.

Animations can be composed together as shown in this example: https://codesandbox.io/p/sandbox/0rm9xk

https://github.com/reactjs/rfcs/assets/1549069/b300f766-0b5d-49ee-8db4-2901231f872d

<Animation
  duration={2000}
  iterations={Infinity}
  keyframes={[
    { borderRadius: 0, transform: "scale(0) rotate(0turn)" },
    { borderRadius: "50%", transform: "scale(1) rotate(1turn)" },
]}>
  <Animation
    duration={1000}
    iterations={Infinity}
    keyframes={[{ backgroundColor: "red" }, { backgroundColor: "blue" }]}
  >
    <Card />
  </Animation>
</Animation>

Motivation

In React projects, animations are often handled by external packages, each with their own advantages and disadvantages. Having a built-in component for animations in React would be beneficial as it can directly interact with low-level React APIs.

Detailed design

The proposed built-in Animation component would handle animations on child components by utilizing DOM access. Therefore, child components should use forwardRef to enable this feature. The advantage of this approach is that child components can be used with or without animation without requiring any changes.

Drawbacks

Why should we not do this? Please consider:

• Potential increase in the React package size
• Possible argument that animations are not directly related to React itself
• Existing third-party packages already available for handling animations

Alternatives

For testing purposes, an alternative package called Reactima has been developed: https://www.npmjs.com/package/reactima

Adoption strategy

Introducing the proposed built-in Animation component would not introduce any breaking changes and would have no impact on existing React features.

How we teach this

All prop and method names are based on the Web Animation API, which can be referenced for further guidance:

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API