Animease

Animease is a utility package designed to make using animations easier for React projects. It provides a simplified react components for creating animations and transitions.

Made with ❤️ by Rishabh Gokhe

Table of Contents

• Installation
• Usage
• Contribution
• License

Installation

You can install Animease via npm:

npm install animease framer-motion

Note : framer-motion is a required dependency as Animease leverages it to provide its animation utilities.

Usage

Currently Available Animations

Fade Animations - Preview

1. FadeUp - Animates the component by fading it up after reload.
2. FadeDown - Animates the component by fading it down after reload.
3. FadeRight - Animates the component by fading it to the right after reload.
4. FadeLeft - Animates the component by fading it to the left after reload.

SVG Animations - Preview

1. AnimateSvgPath - Animates SVG paths to create smooth transitions.

Parallax Animations - Preview

1. ParallaxImageAndText - Creates a parallax effect when scrolling between an image and any JSX div (text recommended).

Available Variants

The FadeAnimations component supports the following HTML element variants:

• div
• p
• a
• ul
• h1
• h2
• h3

Properties for Fade Animations

The component accepts the following properties:

• delay (number) : (Optional) Specifies the delay before the animation starts, in seconds.
• duration (number) : (Optional) Sets the duration of the animation, in seconds. Defaults to 0.5 seconds if not provided.
• variant: Determines the HTML element to render. This must be one of the available variants (div, p, a, ul, h1, h2, h3).
• children (React.ReactNode) : A JSX component div can be placed in between components like Fade Animations and ParallaxImageAndText as children.
• exitAnimation (boolean) : (Optional) Whether to apply the exit animation. Defaults to false.

Properties for SVG Animations

The component accepts the following properties:

• fillColor (string) : (Optional) Specifies the color to fill the SVG path after animation (e.g., rgb(255,0,0) or #ff0000).
• d (string) : stores the path to be animated
• duration (number) : (Optional) Sets the duration of the animation, in seconds. Defaults to 2 seconds if not provided.

Properties for Parallax Animations

The component accepts the following properties:

• imageSrc (string) : Specifies the location of the image.
• altText (string) : (Optional) Alternate description of the image.
• children (React.ReactNode) : A JSX component div can be placed in between components like Fade Animations and ParallaxImageAndText as children.

Example Usage

Here’s a simple example to demonstrate how to use the FadeDown component:

"use client";

import { FadeDown } from "animease";

const FadeDownCard = () => (
  <FadeDown variant='div' delay={0.3} className="fade-down-card">
    <div className="card-content">
      <h2 className="card-title">FadeDown Div Element</h2>
      <p className="card-description">
        This div will animate with a fade-down effect and a delay of 0.3 seconds.
      </p>
    </div>
  </FadeDown>
);

export default FadeDownCard;

Contribution

• If you would like to contribute to the Animease project, please review our CONTRIBUTING.md file. This document outlines how to contribute effectively, including submitting issues, creating pull requests, and following project conventions.

Upcoming Animations

• Scroll-Based Animations: Enhancing user engagement with animations that respond to scrolling actions.
• Parallax Scrolling: Adding depth and motion to the background elements as you scroll.
• Advanced Easing Functions: Introducing customizable easing options for more refined animation control.
• Interactive Animations: Creating animations that activate based on user interactions for a more dynamic experience.

We’re working hard to roll these out and make your animations even more powerful!

License

• Ensure that a LICENSE file is present in the repository to specify the terms under which the project is distributed. This file clarifies the legal aspects of using, modifying, and contributing to the project, ensuring transparency and compliance.

By adhering to these guidelines, you help maintain a well-organized and legally compliant project. Your contributions and feedback are highly appreciated!

Connect with Me

Email Address : [email protected]