Author: | iDev-Games |
---|---|
Views Total: | 146 views |
Official Page: | Go to website |
Last Update: | April 12, 2023 |
License: | MIT |
Preview:

Description:
Trig.js is a simple and lightweight AOS (animate on scroll) library that applies custom CSS3 animations and transitions to elements as they scroll into view.
Feel free to download and use it in your next project to create immersive and engaging user browsing experiences while navigating websites and applications.
How to use it:
1. Download and load the Trig.js library.
<script src="/path/to/dist/trig.js"></script>
2. Add the data-trig
attribute or enable-trig
CSS class to the element and create your own animations in the CSS. Available CSS variables:
- –trig
- –trig-reverse
- –trig-px
- –trig-px-reverse
- –trig-deg
- –trig-deg-reverse
<div id="example" data-trig> ... </div>
#example { /* initial */ } #example.trig { /* CSS Animations */ }
3. Config the scroll-triggered animation using the following data
attributes:
<div id="example" data-trig-min="-100" data-trig-max="100" data-trig-offset="30" data-trig-height="70" data-trig-global="true" data-trig> ... </div>
4. Utility classes.
- trig-scroll-top: added to the body when scrolled to the top
- trig-scroll-bottom: added to the body when scrolled to the bottom
- trig-scroll-up: added to the body when scrolling up
- trig-scroll-down: added to the body when scrolling down
- trig-scroll-25: added to the body when scrolling down a distance of 25% of the page height
- trig-scroll-50: added to the body when scrolling down a distance of 50% of the page height
- trig-scroll-75: added to the body when scrolling down a distance of 75% of the page height
Changelog:
v2.1.7 (04/12/2023)
- Refactoring.
v2.1.4 (04/10/2023)
- Refactoring.
v2.1.3 (04/09/2023)
- Refactoring.
v2.1.2 (04/08/2023)
- Fixed scroll position classes.
v2.1.1 (04/08/2023)
- Fixed scroll position classes.
v2.1.0 (04/08/2023)
- Create a class of “trig-scroll-top” or “trig-scroll-bottom” onto the body of the document depending on the last scroll position.
- The classes “trig-scroll-25”, “trig-scroll-50” and “trig-scroll-75” are added to the body of the document depending on the scroll position percentage down the page.
v2.0.2 (04/06/2023)
- Fixed the responsiveness of scroll direction.
v2.0.0 (04/06/2023)
- Creates a class of “trig-scroll-up” or “trig-scroll-down” onto the body of the document depending on the last scroll direction.
v1.9.1 (04/04/2023)
- Refactoring and slight optimisations.
v1.9.0 (04/04/2023)
- Reintroduced data-trig-height=”0″ and restructured for better compression.
v1.8.0 (04/04/2023)
- You can now use data-trig-global=”true” to create global CSS variables for an element using the id for the variables (i.e –trig-yourelementid).
- Bugfix
v1.7.3 (03/30/2023)
- More factoring
v1.7.2 (03/29/2023)
- Refactor
v1.7.0 (03/27/2023)
- Reduced reflows to only when Trig.js starts and when the browser is resized.
v1.6.0 (03/26/2023)
- Enable Trig.js by adding a class instead of a data attribute.
v1.5.2 (03/26/2023)
- Fixed calculating position when off screen issue.
v1.5.1 (03/26/2023)
- Removed redundant code.
v1.5.0 (03/25/2023)
- Now using IntersectionObserver.
v1.4.0 (03/25/2023)
- Using element CSS variables and optimisations.
v1.3.0 (03/25/2023)
- adding pixels