Reactima: Animation Library for React Projects

Here are some basic example showcasing the usage of reactima in a React project:

The basic example:

https://codesandbox.io/p/sandbox/yinnjk

In this example, we have implemented an animation where a card component moves from the left side to the right side. The animation begins with the card's opacity at 0 and gradually increases it to 1.

<Animation
  duration={500}
  keyframes={[
  { opacity: 0, transform: "translateX(0px)" },
  { opacity: 1, transform: "translateX(500px)" },
]}>
  <Card />
</Animation>

The card component remains unchanged in this example and only requires forwardRed to function properly.

Infinity animation example:

https://codesandbox.io/p/sandbox/b9njfx

In this example, we have implemented an animation where a card component continuously rotates. We achieve this effect by using the iterations prop with a value of Infinity.

<Animation
  duration={1000}
  iterations={Infinity}
  keyframes={[
    { transform: "rotate(0turn)" },
    { transform: "rotate(1turn)" },
]}>
  <Card />
</Animation>

Animation composition exmple:

https://codesandbox.io/p/sandbox/0rm9xk

Here is an example showcasing the composition of multiple animations with different configurations. In this example, we combine multiple animations to create a complex effect. By combining multiple animations in this way, you can create more intricate and dynamic effects

<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>

Interactively Controlled Animation example:

https://codesandbox.io/p/sandbox/o1mplp

Here is an example that demonstrates how to animate a card based on a mount and unmount interaction. In this example, the card animation is controlled by a show flag that determines whether the card should be displayed or hidden. When the show flag is true, the card is mounted and animated using the specified keyframes.

const [show, setShow] = useState(false);

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

Inside the Animation component, fill is set to "both" to maintain the final state of the animation. The direction property is dynamically controlled by the show flag. When show is true, the animation plays in the normal direction.

Keyframes

Keyframes can be defined as an object where each property represents a CSS property and its corresponding values. For example:

keyframes={{
  opacity: [0, 1],
  transform: ['translateX(0px)', 'translateX(500px)']
]}

Multiple values can also be passed for a property to create more complex animations. For instance:

keyframes={{
  opacity: [0, 1], // offset: 0, 1
  transform: ['translateX(0px)', 'translateX(20px)','translateX(500px)'], // offset: 0, 0.5, 1
]}

For more details, please refer to the MDN documentation on keyframe formats: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats

How to use it:

Install:

npm install reactima
# or
yard add reactima

Import:

import Animation from 'reactima';

Other exmaples:

Reactima with styled-components:

https://codesandbox.io/p/sandbox/b5dr16

Size:

Less than 1kB:

https://bundlephobia.com/package/reactima