DEV Community

Mahmoud Ehab
Mahmoud Ehab

Posted on • Updated on

Animate Components - ReactJS

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Using Pre-defined Animations

import { Animate, FancyPopIn } from 'react-animation-maker'

<Animate 
from={FancyPopIn.from} 
to={FancyPopIn.to}
durations={FancyPopIn.durations}>
    Hello, World!
</Animate>
Enter fullscreen mode Exit fullscreen mode

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>
    );
}
Enter fullscreen mode Exit fullscreen mode

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>
    );
}
Enter fullscreen mode Exit fullscreen mode

Discussion (3)

Collapse
jzombie profile image
jzombie

github.com/mahmoud-ehab/react-anim...

(Couldn't find a direct link to the source code; maybe I didn't look hard enough)

Collapse
_moehab profile image
Mahmoud Ehab Author

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

Collapse
shubhamtiwari909 profile image
Mysterio

It's very useful and awesome thank you 😊