🔥 Scroll Animation Trigger

A lightweight animation-on-scroll trigger utility built with GSAP + ScrollTrigger. Add animation attributes to your HTML elements and let the script handle the rest.

📦 Installation

npm i trigger-animations@latest

If you're using React, install GSAP's React helper (only install it if you are using React):

npm i @gsap/react

🚀 Usage

🧾 For Plain JavaScript / HTML

import Trigger from "trigger-animations";

new Trigger({
  duration: 1,     // default duration (in seconds)
  ease: "back.inOut" // default easing
});

🧾 For React (with @gsap/react)

import { useGsap } from "@gsap/react";
import Trigger from "trigger-animations";

useGsap(() => {
  new Trigger();
});

✨ How to Use in HTML

Add data-trigger to any element you want to animate, along with animation-specific attributes:

<div
  data-trigger
  data-fade
  data-slide-up="100"
  data-delay="300"
  data-duration="800"
  data-ease="power2.out"
>
  Animate me on scroll!
</div>

Supported Attributes

Supported Attributes

| Attribute | Description | |-------------------------|---------------------------------------------------------| | data-trigger | Required. Marks the element to animate. | | data-fade | Fades in (opacity: 0 → 1). | | data-blur="5" | Applies blur at start (in px). | | data-slide-up | Slides up. Default: 100. | | data-slide-down | Slides down. Default: 100. | | data-slide-left | Slides left. Default: 100. | | data-slide-right | Slides right. Default: 100. | | data-flip-left | Flip from the left. | | data-flip-right | Flip from the right. | | data-flip-up | Flip upward. | | data-flip-down | Flip downward. | | data-zoom-in | Zoom in effect. | | data-zoom-out | Zoom out effect. | | data-delay="300" | Delay before animation starts (in ms). | | data-duration="800" | Duration of animation (in ms). | | data-ease="power2.out"| GSAP easing type. | | data-repeat="1" | Number of times the animation should repeat. | | data-markers | Enables ScrollTrigger debug markers. | | data-start="top bottom"| ScrollTrigger start position (e.g., "top bottom"). | | data-end="top center" | ScrollTrigger end position (e.g., "top center"). | | data-scrub="1" | Scroll-linked animation (e.g., true, 1, 0.5). |

🛠 Config Options

When initializing new Trigger({ ... }), you can pass:

| Option | Type | Default | Description | |-----------|---------|---------------|-------------------------------------| | duration| number| 1 | Default animation duration in sec | | ease | string| "back.inOut"| Default easing function |

📘 Example

new Trigger({
  duration: 1.2,
  ease: "power2.out"
});

This will apply to all [data-trigger] elements that don’t have their own data-duration or data-ease.

📄 License

MIT

🧠 Author

Made with ❤️ by [[email protected]]