You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat: support scroll-triggered group animations with stagger
### Added
- `data-triggle-scroll` now supports scroll-triggered group animations using IntersectionObserver
- `data-triggle-stagger` now works with scroll-triggered groups
- Support for separate scroll observer element triggering group animation
### Improved
- Staggered group animation now triggers even if group items are in view
- Modular scroll logic for improved maintainability
### Fixed
- Bug where only first 1–2 elements in a staggered group would animate
### Compatibility
- Fully backward compatible with all existing triggers
Enable trigger-based animations using simple `data-triggle` attributes. This plugin works seamlessly with `cssanimation.css` classes and lets you apply them on user interactions. It supports mouse, keyboard, touch, and custom event triggers — with optional animation control via delay, duration, reset, and key filters.
14
+
Enable trigger-based animations using simple `data-triggle` attributes. This library works seamlessly with [`cssanimation.css`](https://github.com/yesiamrocks/cssanimation) classes and lets you apply them on user interactions. It supports mouse, keyboard, touch, and custom event triggers — with optional animation control via delay, duration, reset, and key filters.
15
15
16
16
## Features
17
17
@@ -30,7 +30,7 @@ Enable trigger-based animations using simple `data-triggle` attributes. This plu
30
30
31
31
## Try It Live
32
32
33
-
Explore all supported triggers and features in the interactive playground: 👉 [Live Demo](https://yesiamrocks.github.io/Triggle/)
33
+
Explore all supported triggers and features in the interactive playground: 👉 [Live Demo](https://yesiamrocks.github.io/triggle/)
34
34
35
35
## Installation
36
36
@@ -48,7 +48,7 @@ npm install triggle
48
48
49
49
## Animations via cssanimation.io
50
50
51
-
Triggle.js works perfectly with the animation classes from **[cssanimation](https://github.com/yesiamrocks/cssanimation)** Install them:
51
+
`triggle.js` works perfectly with the animation classes from **[cssanimation](https://github.com/yesiamrocks/cssanimation)** Install them:
52
52
53
53
```bash
54
54
npm install @hellouxpavel/cssanimation
@@ -109,21 +109,23 @@ You can animate elements using the following trigger types via `data-triggle`:
|`data-triggle-next`|`string`| CSS selector of element to animate **after this one finishes**|
124
+
|`data-triggle-chain-delay`|`number`| Delay (in ms) before triggering `data-triggle-next`|
125
+
|`data-triggle-group`|`string`| Group name to animate multiple elements together |
126
+
|`data-triggle-stagger`|`number`| Delay (in ms) between each group's element animation |
127
+
|`data-triggle-scroll`|`true/false`| Use IntersectionObserver to animate when element scrolls into view |
128
+
|`data-triggle-chain-loop`|`true`| Enables infinite looping between chained elements |
127
129
128
130
## Hover with Delay and Reset
129
131
@@ -172,6 +174,67 @@ Automatically remove the animation class after it completes:
172
174
</div>
173
175
```
174
176
177
+
## Scroll Animation Example
178
+
179
+
```html
180
+
<div
181
+
data-triggle="scroll"
182
+
data-triggle-scroll="true"
183
+
data-triggle-class="fadeInUp"
184
+
data-triggle-reset="true"
185
+
data-triggle-once="true">
186
+
I animate when visible
187
+
</div>
188
+
```
189
+
190
+
- Triggers `fadeInUp` once when 50% of the element is in view.
191
+
- Combine with `data-triggle-once="true"` to prevent re-animation.
192
+
193
+
## Scroll-Based Staggered Animation
194
+
195
+
Trigger Element:
196
+
197
+
```html
198
+
<div
199
+
data-triggle="scroll"
200
+
data-triggle-scroll="true"
201
+
data-triggle-group="feature"
202
+
data-triggle-class="fadeIn"
203
+
data-triggle-stagger="300"
204
+
data-triggle-once="true"></div>
205
+
```
206
+
207
+
Staggered/Grouped Targets:
208
+
209
+
```html
210
+
<div
211
+
data-triggle-class="fadeIn"
212
+
data-triggle-reset="true"
213
+
data-triggle-group="feature">
214
+
Card A
215
+
</div>
216
+
217
+
<div
218
+
data-triggle-class="fadeIn"
219
+
data-triggle-reset="true"
220
+
data-triggle-group="feature">
221
+
Card B
222
+
</div>
223
+
224
+
<div
225
+
data-triggle-class="fadeIn"
226
+
data-triggle-reset="true"
227
+
data-triggle-group="feature">
228
+
Card C
229
+
</div>
230
+
```
231
+
232
+
Behavior:
233
+
234
+
- When the **trigger element** scrolls into view, all elements in the `feature` group animate.
235
+
- Each card will stagger with a `300ms` delay between them.
236
+
- Add `data-triggle-once="true"` to prevent repeated scroll triggers.
237
+
175
238
## Chained Animation Example
176
239
177
240
```html
@@ -193,6 +256,28 @@ When the button is clicked:
193
256
2. Once that finishes, #step2 animates with slideInUp
194
257
3.`#step2` will animate 500ms after `zoomIn` ends on the button.
195
258
259
+
## Chain Loop Example (data-triggle-chain-loop)
260
+
261
+
```html
262
+
<div
263
+
id="box1"
264
+
data-triggle="click"
265
+
data-triggle-class="fadeIn"
266
+
data-triggle-next="#box2"
267
+
data-triggle-chain-delay="500"
268
+
data-triggle-chain-loop="true">
269
+
Start Loop
270
+
</div>
271
+
272
+
<div
273
+
id="box2"
274
+
data-triggle-class="fadeOut"
275
+
data-triggle-next="#box1"
276
+
data-triggle-chain-delay="500"></div>
277
+
```
278
+
279
+
- This will loop between `box1` and `box2` indefinitely.
280
+
196
281
## Group Triggering Example
197
282
198
283
```html
@@ -314,14 +399,6 @@ window.triggle.destroy(); // Removes all listeners
314
399
window.triggle.init(); // Re-initializes all triggers
315
400
```
316
401
317
-
### Supported Passive Events
318
-
319
-
The following triggers use passive listeners for optimal performance:
320
-
321
-
-`touchstart`
322
-
-`touchend`
323
-
-`scroll`
324
-
325
402
## Global Disable (Optional)
326
403
327
404
To disable all animations globally (e.g., for accessibility/testing), set:
@@ -344,6 +421,14 @@ window.__trg_DEBUG = true;
344
421
window.__trg_TRIGGER_DISABLED=true;
345
422
```
346
423
424
+
## Supported Passive Events
425
+
426
+
The following triggers use passive listeners for optimal performance:
427
+
428
+
-`touchstart`
429
+
-`touchend`
430
+
-`scroll`
431
+
347
432
## Performance Notes
348
433
349
434
To improve responsiveness on mobile devices, `triggle.js` uses **passive event listeners** for scroll-blocking events like `touchstart`, `touchend`, and `scroll`. This eliminates warnings in modern browsers (e.g., Chrome) and improves interaction smoothness.
@@ -353,7 +438,7 @@ To improve responsiveness on mobile devices, `triggle.js` uses **passive event l
353
438
- Core class `.cssanimation` class is required (from [cssanimation](https://github.com/yesiamrocks/cssanimation)).
354
439
- Use `data-triggle-*` attributes only on the intended element — avoid duplication on deeply nested structures to prevent conflicts.
355
440
356
-
## Plugin Architecture Summary
441
+
## Library Architecture Summary
357
442
358
443
- Lightweight, zero-dependency vanilla JS
359
444
- Fast event listener setup using DOMContentLoaded
0 commit comments