Trig-Animations.css

All you need to do is add the dist trig.min.js and trig-animations.min.css file into your projects JS and CSS folders then add the following code with your trig.js and trig-animations.css file paths in. Put this code in between your head HTML tags. Download Trig.js here or use npm.

                            
                                <link rel="stylesheet" href="/css/trig-animations.min.css"></link>
                                <script src="/js/trig.min.js"></script>
                            
                        

Or just add a CDN instead

                            
                            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css"></link>
                            <script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>
                            
                        

You are able to set CSS variables --trig-delay, --trig-duration, --trig-blend, and --trig-direction that are used to control the behavior and timing of animations.

                            
                                <div class="trig-fade enable-trig" style="--trig-delay:2s;--trig-duration:10s;--trig-blend:ease-in-out;--trig-direction:reverse forwards;">

                                 <span class="trig-target">
                                .trig-fade
                                </span>

                                </div>