.png?width=160)
Trig.js
Trig.js makes it easy to create custom dynamic CSS scroll animations, while trig-animations.css provides a library of predefined animations out of the box for effortless animation
Free271 impressionslaunches Dec 29
Trig.js enables lightweight, custom CSS scroll animations and triggers using simple data attributes or classes.
- for
- Web developers who want scroll-based animations without heavy libraries.
- license
- MIT
Key features
- Zero dependencies — Works with plain HTML, CSS and its own JS file, no external libraries required.
- Predefined animation library — Includes trig-animations.css with ready-to-use scroll animations.
- Data-attribute control — Use data-trig and related attributes to activate and configure animations.
- CSS variable output — Provides --trig, --trig-px, --trig-deg and reverse variants for fine-grained styling.
- Scroll direction & position classes — Adds body classes like trig-scroll-up/down and trig-scroll-25/50/75 for CSS hooks.
- CDN & npm install — Available via CDN script tag or npm package for easy integration.
Use cases
- Fade-in elements as they enter the viewport
- Parallax effects using --trig CSS variables
- Trigger animations based on scroll direction
- Create break-point animations at 25%, 50% and 75% scroll
Trig.js FAQ
How do I add Trig.js to my project?+
Include the trig.min.js script via a local file, CDN, or npm, then add the script tag in the head of your HTML.
What HTML markup activates an animation?+
Add the data-trig attribute or the class enable-trig to any element you want to animate.
Can I customize animation timing?+
Define CSS keyframes and apply them to the element’s .trig class, then set animation properties in your stylesheet.
How does Trig.js expose scroll progress?+
When data-trig-var="true" is set, Trig.js creates CSS variables like --trig, --trig-px, and --trig-deg reflecting scroll percentage.
Is there a predefined set of animations?+
Yes, the trig-animations.css file provides configurable predefined scroll animations you can use out of the box.
Summarized by DevHunt from idev-games.github.io · Oct 17, 2026. Details may change; check the official site.
