Package Exports

@harini_priya/gsap-animation-library
@harini_priya/gsap-animation-library/gsap-animation-library.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@harini_priya/gsap-animation-library) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

GSAP Animation Library

A powerful animation wrapper library built on GSAP 3.x with 15+ animation presets, timeline management, and scroll triggers.

🔗 Links

Live Demo - Interactive demo with live code generation
Complete Documentation - Full usage guide with examples
npm Package

Installation

npm install gsap @harini_priya/gsap-animation-library

Quick Start

import GSAPAnimationLibrary from '@harini_priya/gsap-animation-library';

const gsapLib = new GSAPAnimationLibrary();
gsapLib.fadeIn(element, { duration: 1, ease: 'power2.out' });

Features

15+ Animation Presets (fade, slide, scale, rotate, bounce, elastic, shake, pulse, flip)
Timeline Management
Stagger Effects
Scroll Triggers
Works with React, Vue, Angular, and vanilla JS

API Reference

Animation Presets

// Fade animations
gsapLib.fadeIn(element, options);
gsapLib.fadeOut(element, options);

// Slide animations
gsapLib.slideUp(element, options);
gsapLib.slideDown(element, options);
gsapLib.slideLeft(element, options);
gsapLib.slideRight(element, options);

// Scale animations
gsapLib.scaleUp(element, options);
gsapLib.scaleDown(element, options);

// Rotate animations
gsapLib.rotateIn(element, options);
gsapLib.rotateOut(element, options);
gsapLib.flip(element, options);

// Special effects
gsapLib.bounceIn(element, options);
gsapLib.elastic(element, options);
gsapLib.shake(element, { intensity: 10 });
gsapLib.pulse(element, { repeat: 3 });

Options Object

{
    duration: 1,              // Animation duration (seconds)
    delay: 0,                 // Delay before animation starts (seconds)
    ease: 'power2.out',       // Easing function
    distance: 100,            // For slide animations (pixels)
    intensity: 10,            // For shake animation (pixels)
    repeat: 2,                // For pulse animation
    stagger: 0.2,             // For stagger animations (seconds)
    onComplete: () => {},     // Callback when animation completes
    onStart: () => {}         // Callback when animation starts
}

Stagger Animations

Animate multiple elements with sequential delays:

const elements = document.querySelectorAll('.card');

gsapLib.staggerFadeIn(elements, {
    duration: 1,
    stagger: 0.2,
    ease: 'power2.out'
});

gsapLib.staggerSlideUp(elements, {
    duration: 1,
    stagger: 0.15,
    distance: 50
});

gsapLib.staggerScale(elements, {
    duration: 0.8,
    stagger: 0.1
});

Timeline Management

Create complex animation sequences:

// Create a timeline
const tl = gsapLib.createTimeline('myTimeline', {
    paused: true,
    onComplete: () => console.log('Done!')
});

// Add animations
tl.to(element, { x: 200, duration: 1 })
  .to(element, { y: 100, duration: 1 })
  .to(element, { rotation: 360, duration: 1 });

// Control timeline
gsapLib.playTimeline('myTimeline');
gsapLib.pauseTimeline('myTimeline');
gsapLib.reverseTimeline('myTimeline');
gsapLib.restartTimeline('myTimeline');

// Get timeline for direct access
const timeline = gsapLib.getTimeline('myTimeline');

Scroll Triggers

Trigger animations on scroll:

gsapLib.scrollTrigger(element, () => {
    gsapLib.fadeIn(element, { duration: 1 });
}, {
    start: 'top 80%',
    end: 'bottom 20%',
    markers: false
});

Utility Methods

// Kill all animations
gsapLib.killAll();

// Kill specific animation
const anim = gsapLib.fadeIn(element);
gsapLib.killAnimation(anim);

// Reset element to initial state
gsapLib.resetElement(element);

Available Easing Functions

none
power1/2/3/4.out, power1/2/3/4.in, power1/2/3/4.inOut
back.out(1.7), back.in(1.7), back.inOut(1.7)
elastic.out(1, 0.5), elastic.in(1, 0.5), elastic.inOut(1, 0.5)
bounce.out, bounce.in, bounce.inOut
circ.out, circ.in, circ.inOut
expo.out, expo.in, expo.inOut

React Example

import { useEffect, useRef } from 'react';
import GSAPAnimationLibrary from 'gsap-animation-library';

function MyComponent() {
    const boxRef = useRef(null);
    const gsapLib = useRef(new GSAPAnimationLibrary());

    useEffect(() => {
        gsapLib.current.fadeIn(boxRef.current, { duration: 1 });
        return () => gsapLib.current.killAll();
    }, []);

    return <div ref={boxRef}>Hello World!</div>;
}

Vue Example

import { ref, onMounted, onUnmounted } from 'vue';
import GSAPAnimationLibrary from 'gsap-animation-library';

export default {
    setup() {
        const box = ref(null);
        const gsapLib = new GSAPAnimationLibrary();

        onMounted(() => {
            gsapLib.fadeIn(box.value, { duration: 1 });
        });

        onUnmounted(() => {
            gsapLib.killAll();
        });

        return { box };
    }
}

Documentation

USAGE.md - https://github.com/Hariniha/gsap-animation-library/blob/main/USAGE.md

License

MIT

Dependencies

GSAP 3.x (peer dependency)