trigger-animations/README.md

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.

# 🔥 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

```bash
npm i trigger-animations@latest
```

If you're using **React**, install GSAP's React helper (only install it if you are using React):
```bash
npm i @gsap/react
```

---


## 🚀 Usage

### 🧾 For Plain JavaScript / HTML

```js
import Trigger from "trigger-animations";

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

### 🧾 For React (with `@gsap/react`)

```tsx
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:

```html
<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

```js
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 [Youarebest119@gmail.com]