gsap-animations-starter

An opinionated GSAP animation helper library (TypeScript + Vite library mode) with:

• Sensible defaults + theme overrides
• ScrollTrigger factories
• A tiny registry/plugin system
• A handful of starter animations + a hero preset

Install

npm i gsap gsap-animations-starter

gsap is a peer dependency. Bring your own version.

Build (for publishing)

npm install
npm run build

Output:

• dist/index.esm.js (ESM)
• dist/index.cjs (CommonJS)
• dist/index.d.ts (types)

Usage (vanilla)

import { fade, slide, heroReveal } from "gsap-animations-starter";

document.addEventListener("DOMContentLoaded", () => {
  fade(".fade-in");
  slide(".slide-up", { direction: "up", duration: 0.8 });
  heroReveal("#hero", {
    scrollTrigger: { markers: true },
    theme: "bold"
  });
});

Usage (React)

import { useEffect, useRef } from "react";
import { heroReveal } from "gsap-animations-starter";

export function App() {
  const heroRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!heroRef.current) return;
    heroReveal(heroRef.current, {
      scrollTrigger: { start: "top center" },
      theme: "snappy"
    });
  }, []);

  return (
    <div ref={heroRef} id="hero">
      <h1 className="hero-title">Hello</h1>
      <p className="hero-subtitle">Scroll to see magic</p>
      <button className="hero-cta">Call to action</button>
    </div>
  );
}

Publishing checklist

1. Update package.json name + version.
2. npm login
3. npm publish --access public

Roadmap ideas

• Data-attribute auto-init (data-animate="fade") + options via JSON
• More presets (galleryReveal, textReveal, sectionReveal) ✅
• Reduced-motion support helper

Auto-init via data attributes

Skip JS wiring entirely by using data-animate:

<div data-animate="fade"></div>

<section
  data-animate="slide"
  data-animate-options='{"direction":"up","duration":0.6}'
></section>

import { autoInitAnimations } from "gsap-animations-starter";

document.addEventListener("DOMContentLoaded", () => {
  autoInitAnimations();
});

Presets

• heroReveal(container, options)
• galleryReveal(container, options)
• textReveal(container, options)
• sectionReveal(section, options)