MotionZen

MotionZen is a library for creating animated loaders using React and GSAP.

Installation

You can install MotionZen using npm:

npm install motionzen

Usage

Here's a basic example of how to use MotionZen in your React project:

import React from 'react';
import { BarLoader } from 'motionzen';

const App = () => {
  return (
    <div>
      <h1>Loading...</h1>
      <BarLoader color="blue" duration={2} delay={0.5} ease="power1.inOut" />
    </div>
  );
};

export default App;

Components

• BarLoader: A simple bar loader.
• CircleLoader: A circular loader.
• TextReveal: A text reveal animation.

Exports from src/index.js

You can import various loaders and animations from the src/index.js file. Below are examples of how to use each export:

BarLoader

import { BarLoader } from 'motionzen';

// Usage
<BarLoader color="blue" duration={2} delay={0.5} ease="power1.inOut" />

A simple bar loader.

BarLoaderwithborder

import { BarLoaderwithborder } from 'motionzen';

// Usage
<BarLoaderwithborder color="red" duration={3} delay={1} ease="power2.out" />

A bar loader with a border.

BlockLoader

import { BlockLoader } from 'motionzen';

// Usage
<BlockLoader color="green" duration={1.5} delay={0.3} ease="power3.in" />

A block-style loader.

CircleLoader

import { CircleLoader } from 'motionzen';

// Usage
<CircleLoader color="purple" duration={2.5} delay={0.7} ease="power4.inOut" />

A circular loader.

CircularProgressBar

import { CircularProgressBar } from 'motionzen';

// Usage
<CircularProgressBar color="orange" duration={2} delay={0.5} ease="power1.inOut" />

A circular progress bar.

DottedCircularProgressBar

import { DottedCircularProgressBar } from 'motionzen';

// Usage
<DottedCircularProgressBar color="yellow" duration={3} delay={0.6} ease="power2.inOut" />

A dotted circular progress bar.

BottleLoader

import { BottleLoader } from 'motionzen';

// Usage
<BottleLoader color="cyan" duration={2.2} delay={0.4} ease="power3.out" />

A bottle-shaped loader.

TextReveal

import { TextReveal } from 'motionzen';

// Usage
<TextReveal text="Loading..." duration={2} delay={0.5} ease="power1.inOut" />

A text reveal animation.

TextRevealLines

import { TextRevealLines } from 'motionzen';

// Usage
<TextRevealLines text="Loading..." duration={2.5} delay={0.7} ease="power2.inOut" />

A text reveal animation with lines.

TextRevealWords

import { TextRevealWords } from 'motionzen';

// Usage
<TextRevealWords text="Loading..." duration={3} delay={0.6} ease="power3.inOut" />

A text reveal animation with words.

TextRevealCharacters

import { TextRevealCharacters } from 'motionzen';

// Usage
<TextRevealCharacters text="Loading..." duration={2.8} delay={0.5} ease="power4.inOut" />

A text reveal animation with characters.

TextRevealCrazy

import { TextRevealCrazy } from 'motionzen';

// Usage
<TextRevealCrazy text="Loading..." duration={3.2} delay={0.8} ease="power1.inOut" />

A crazy text reveal animation.

License

MotionZen is licensed under the MIT License.