Trigger CSS Animations Based On Element’s Position – Trig.js

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-negativeOffset="0"
     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.2.0 (09/24/2023)

• Added negativeOffset

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