React custom animation

  • Build custom animation components in React using typescript

Contents

Usage 

import { Animation } from './packages';

function App() {
   return (
      <div className="App">
         <div className="rotate">
            <Animation
               type="rotate"
               fromDeg={0}
               toDeg={360}
               behavior={{ duration: 3, repeat: 'infinite' }}
            >
               <button>ROTATE</button>
            </Animation>
         </div>
         <Animation
            type="fade-in"
            behavior={{ duration: 2, repeat: 'infinite' }}
         >
            <h1>FADE IN</h1>
         </Animation>
         <Animation
            type="fade-out"
            behavior={{ duration: 2, repeat: 'infinite', delay: 3 }}
         >
            <h1>FADE OUT</h1>
         </Animation>
      </div>
   );
}

Result

Start animation on action

  • Adding useState or state (class Component) and start props

import React from 'react';
import { Animation } from './packages';

function App() {
   const [start, setStart] = React.useState(false);
   const [rotate, setRotate] = React.useState(false);
   return (
      <>
         <button onClick={() => setStart(!start)}>
            {start ? 'Stop fade in, fade out' : 'Start fade in, fade out'}
         </button>

         <div className="App">
            <div className="rotate">
               <Animation
                  start={rotate}
                  type="rotate"
                  fromDeg={0}
                  toDeg={360}
                  behavior={{ duration: 3, repeat: 'infinite' }}
               >
                  <button onClick={() => setRotate(!rotate)}>
                     {rotate ? 'Stop rotate' : 'Start rotate'}
                  </button>
               </Animation>
            </div>
            <Animation
               start={start}
               type="fade-in"
               behavior={{ duration: 2, repeat: 'infinite' }}
            >
               <h1>FADE IN</h1>
            </Animation>
            <Animation
               start={start}
               type="fade-out"
               behavior={{ duration: 2, repeat: 'infinite', delay: 3 }}
            >
               <h1>FADE OUT</h1>
            </Animation>
         </div>
      </>
   );
}

Result

GitHub

https://github.com/hoaxvo16/react-custom-animation