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.
npm install trigger-animationsbash
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
$3
`js
import Trigger from "trigger-animations";
new Trigger({
duration: 1, // default duration (in seconds)
ease: "back.inOut" // default easing
});
`
$3
`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
data-trigger
data-fade
data-slide-up="100"
data-delay="300"
data-duration="800"
data-ease="power2.out"
>
Animate me on scroll!
$3
$3
| 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`.