Trig.js

Documentation ^v3

What is Trig.js?

Trig.js is a super simple, efficient and lightweight way of making CSS animations that react to the position of your HTML elements. You can also use Trig.js to trigger CSS animations once an element appears on screen.

Using nothing but the power of CSS, HTML and Trig.js. You can make the same effects as you see here! Not just that, Trig.js is really lightweight with a filesize of npm bundle size

! Trig.js is created with javascript and doesn't require any dependencies.

Trig.js is really simple and quick to work with. You can use Trig.js even if you arn't familiar with javascript.

How To Install?

All you need to do is add the dist trig.js file into your projects JS folder and add the following code with your trig.js location as the src. Put this code in to your head HTML tags. Download Trig.js here or use npm.

                            <script src="/js/trig.js"></script>

Or just add a CDN instead

                        <script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>

How To Use?

To activate trig.js add the data attribute "data-trig" or a class "enable-trig" to your html element. To trigger animations trig.js will place a class of "trig" onto your element when it appears on screen.

                            <div class="fadeIn" data-trig> </div>

                        .fadeIn{ opacity:0; }
                        .fadeIn.trig{ animation: fadeIn 1s normal forwards ease-in-out; }
                        @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }

Scroll Animations

Trig.js calculates the percentage that the element is on screen and creates CSS variables that you can use with CSS transform etc.

                            <div class="element" data-trig data-trig-var="true"> </div>

                            .element{ transform: translateX( var(--trig) ); }

The CSS variables you can use by adding data-trig-var="true", data-trig-pixels="true" or data-trig-degrees="true" are:

--trig

--trig-reverse

--trig-px

--trig-px-reverse

--trig-deg

--trig-deg-reverse

Scroll Direction

Trig.js creates a class of "trig-scroll-up" or "trig-scroll-down" onto the body of the document depending on the last scroll direction.

Scroll Position

Trig.js creates a class of "trig-scroll-top" or "trig-scroll-bottom" onto the body of the document depending on the last scroll position. To give the ability to make something happen at different break points down the page. 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.

Data Attributes

You can use the below data attributes for additional features

                            <div id="yourelement" data-trig-min="-100" data-trig-max="100" data-trig-offset="0" data-trig-negativeOffset="0" data-trig-height="0" data-trig-global="false" data-trig> </div>

BE CREATIVE

WITH YOUR CSS

See More Examples

Check out the code of the documentation as an example.

                        https://github.com/iDev-Games/Trig-JS/blob/main/index.html

Download here