trigger-animations

🔥 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 [[e-mail]]