Piny Animate Kit

A collection of tiny, reusable animations for web projects, making it easy to add motion to your UI. Powered by GSAP and anime.js, this library provides a simple API to bring your website to life.

Features

• Lightweight and easy to use.
• Integrates with GSAP and anime.js for complex animations.
• Includes scroll-triggered animations via ScrollMagic.
• Polyfilled with Intersection Observer for better compatibility.
• Utility functions powered by lodash for enhanced flexibility.

Installation

Install via npm:

npm install piny-animate-kit

Or via yarn:

yarn add piny-animate-kit

Usage

Import the library in your JavaScript project:

import { fadeIn, slideUp } from 'piny-animate-kit';

// Apply a fade-in effect
fadeIn('#myElement');

// Apply a slide-up effect with additional options
slideUp('#anotherElement', { duration: 1000, delay: 300 });

API

fadeIn(selector, options)

Apply a fade-in animation to the specified elements.

• selector: A string representing the selector of the elements to animate.
• options: An object with animation options (duration, delay, etc.).

slideUp(selector, options)

Apply a slide-up animation to the specified elements.

• selector: A string representing the selector of the elements to animate.
• options: An object with animation options (duration, delay, etc.).

For more detailed documentation on the options and other available animations, check our GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.