Introduction
If you want to animate your ReactJS Components in a rapid and easy manner, without using CSS. Then this post is for you.
To make it possible to define our own animations in ReactJS, without using CSS. We'll just use style prop, hooks and transition. However, to do so in a flexible manner with all CSS keyframes/animation features (loop, backward animation, ...etc) that goes beyond using just transition. And so, we ought to create an external reusable component that carries the whole logic of switching between different stages in the animation.
I already wrote such a component and deployed it on npm, with an additional feature: useAnimate hook that makes it more elegant and powerful. And this post elaborates how to use it in your project. However, if you want a post in how it actually works, let me know in the comments.
Installing
npm install react-animation-maker
Source Code: react-animation-maker
Usage
Animate Component
This component is used to define your own animations only using css-js objects. It animate the div from the object of the 'from' prop, to the list of objects of the 'to' prop.
import { Animate } from 'react-animation-maker'
<Animate
from={{backgroundColor: '#f00'}}
to={[{backgroundColor: '#0f0'}]}>
Hello, World!
</Animate>
We can create multi-staged animation, as well. In other words, adding more than one object in the 'to' prop list.
<Animate
from={{backgroundColor: '#f00'}}
to={[
{backgroundColor: '#0f0'},
{backgroundColor: '#00f'},
]}>
Hello, World!
</Animate>
Other props (OPTIONAL)
style: js-css object
for the general style of all stages.
durations: string[]
the durations between stages, its default value ['1s'].
delay: int
specifies the delay time in milliseconds.
loop: boolen
to indicate wheather the animation loops forever or not.
Using 'durations' Prop
This is an optional prop, whose only purpose is to descripe the duration between each stage and the one preceeding, starting from the first stage in "to" prop. The durations list length should be as the length of "to" list. If it's not, then the first value of the durations list is considered as the duration between each stage and the another.
Example
<Animate
from={{backgroundColor: '#f00'}}
to={[
{backgroundColor: '#0f0'},
{backgroundColor: '#00f'},
{backgroundColor: '#f0f'},
{backgroundColor: '#fff'},
]}
durations={['250ms', '500ms', '750ms', '1s']}>
Hello, World!
</Animate>
Using Pre-defined Animations
import { Animate, FancyPopIn } from 'react-animation-maker'
<Animate
from={FancyPopIn.from}
to={FancyPopIn.to}
durations={FancyPopIn.durations}>
Hello, World!
</Animate>
Checkout the whole list here:
https://mahmoud-ehab.github.io/react-animation-maker
Using useAnimate Hook
Another way to use Animate Component is using it through useAnimate Hook. This gives you the ability to rename your Animate Components and consequently increase the readibilty of your code. What makes it more powerful, that it allows you to change the animation of the component using event handlers.
import { useAnimate, FadeIn, FadeOut } from 'react-animation-maker'
const App = () => {
const [Anim, setAnim] = useAnimate(FadeIn);
return (
<div>
<Anim>
Hello, World!
</Anim>
<button onClick={() => setAnim(FadeOut)}>
Change Anim
</button>
</div>
);
}
Notice that setAnim in the above example; just takes a props object,
hence you can do the following, as well...
import { useAnimate, FadeIn } from 'react-animation-maker'
const App = () => {
const [Anim, setAnim] = useAnimate(FadeIn);
return (
<div>
<Anim>
Hello, World!
</Anim>
<button onClick={() => setAnim({from: {}, to: {[{opacity: 0}]})}>
Change Anim
</button>
</div>
);
}
Top comments (3)
github.com/mahmoud-ehab/react-anim...
(Couldn't find a direct link to the source code; maybe I didn't look hard enough)
No, It's completely my fault. I have just fixed it, thank you for the comment ❤️
Here you go: github.com/Mahmoud-Ehab/react-anim...
It's very useful and awesome thank you 😊