diff --git a/text/0000-animation b/text/0000-animation new file mode 100644 index 00000000..17c4b52a --- /dev/null +++ b/text/0000-animation @@ -0,0 +1,79 @@ +- 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 + +```jsx + + {show && } + +``` + +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 + +```jsx + + + + + +``` + +# 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. that's mean it dosen't need to re-render child components. 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