React Animators

Description

React Animation Library is a collection of reusable React animation components designed to enhance user interfaces with dynamic animations.

Installation

You can install React Animation Library via npm:

npm install react-animators

Usage

Import the animation components into your React application and start animating your elements:

import React from 'react';
import { Animator } from 'react-animators';

const App = () => {
  return (
    <div>
      <Animator animationType='fadeIn' delay={500} duration={1000}>
        <h1>FadeIn Animation</h1>
      </Animator>
      <Animator animationType='bounce' delay={1000} duration={500}>
        <h1>Bounce Animation</h1>
      </Animator>
    </div>
  );
};

export default App;

Available Animations

• FadeIn: Fade in animation where the element gradually becomes visible by increasing its opacity.
• FadeOut: Fade out animation where the element gradually becomes invisible by decreasing its opacity.
• Bounce: Bounce animation where the element scales up and down, creating a bouncing effect.
• ZoomIn: Zoom in animation where the element gradually scales up in size.
• ZoomOut: Zoom out animation where the element gradually scales down in size.
• RotateClockwise: Rotate clockwise animation where the element rotates in a clockwise direction.
• RotateAntiClockwise: Rotate anti-clockwise animation where the element rotates in an anti-clockwise direction.
• SlideLeft: Slide left animation where the element moves horizontally to the left.
• SlideRight: Slide right animation where the element moves horizontally to the right.
• SlideUp: Slide up animation where the element moves vertically upwards.
• SlideDown: Slide down animation where the element moves vertically downwards.
• Pulse: Pulse animation where the element scales up and down rhythmically, creating a pulsating effect.
• Flash: Flash animation where the element quickly fades in and out, creating a flashing effect.
• Shake: Shake animation where the element shakes horizontally back and forth.
• FlipX: Flip on X-axis animation where the element flips horizontally.
• FlipY: Flip on Y-axis animation where the element flips vertically.
• RollIn: Roll in animation where the element rolls into view from the side.
• RollOut: Roll out animation where the element rolls out of view to the side.

Props

| Name | Type | Description | | ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | animationType | AnimationType | Required: The type of animation to apply. Supported types are: 'fadeIn', 'fadeOut', 'bounce', 'zoomIn', 'zoomOut', 'rotateClockwise', 'rotateAntiClockwise', 'slideLeft', 'slideRight', 'slideUp', 'slideDown', 'pulse', 'flash', 'shake', 'flipX', 'flipY', 'rollIn', 'rollOut'. | | delay | number | Optional delay before the animation starts (ms). | | duration | number | Optional duration of the animation (ms). |

License

This package is licensed under the MIT License. See the LICENSE file for details.

Author

Created by Abhijeet Vadera.