Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RFC: build-in animation component #250

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

behnammodi
Copy link

@behnammodi behnammodi commented Jun 4, 2023

  • 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

1.mov
<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

2.mov
<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

@behnammodi behnammodi changed the title RFC build-in animation component RFC: build-in animation component Jun 4, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants