Trig.js

All you need to do is add the dist trig.min.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.min.js"></script>
                    

Or just add a CDN instead

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

To activate trig.js add the data attribute "data-trig" or a class "enable-trig" to your html element. 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 classes of "trig", as well as "trig-up" or "trig-down", onto your element when it appears on screen and depending from which direction.

                            <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; } }
                    

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:

The data attribute will also update in increments of 10 so you can use CSS attribute selectors like [data-trig-var="50"]{ } for more control.

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.

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.

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>