@gravitguru/animations NPM

@gravitguru/animations

Elevate your web projects with the @gravitguru/animations package – a collection of dynamic and eye-catching animations for your React applications. Effortlessly enhance your user interface with these versatile and stylish motion designs.

Installation

Integrate @gravitguru/animations into your React, Vite + React, or Node.js-based project with just a few simple steps:

> yarn add @gravitguru/animations
# or
> npm install @gravitguru/animations --save

after install stop the server 
---------------------------

> ctrl + c
> y (enter)

again start the server 
---------------------------
> npm run dev
#or
> npm start

Example Usage: css class example

import React from 'react';
import '@gravitguru/animations'; // Include in your main file

function YourComponent() {
  return (
    <div>
      <div className="slideInDown">Slide In Down Animation</div>
      <div className="fadeIn">Fade In Animation</div>
      <!-- Add more animations as needed -->
    </div>
  );
}

Animations : The @gravitguru/animations package offers a variety of animations, providing dynamic and engaging options to suit your project.

Example Usage: css class example

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInDown {
  0% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInDown {
  0% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }

Usage Guidelines

Customize the animation style by changing the class or className and adjusting attributes. Explore our documentation to find animation names and properties. For different animation styles, modify the class name based on available options.

Configuration

import '@gravitguru/animations'

(or)

import { AnimationContext } from "@gravitguru/animations";
<AnimationContext.Provider value={{ duration: 1000, className: "custom-animation" }}>
  <div className="slideInUp">Custom Slide In Up Animation</div>
</AnimationContext.Provider>;