Animate Components - ReactJS

#javascript #webdev #react

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>
    );
}