Elevate Your Web Animations with Trig.js: Introducing Version 4 and Trig-Animations.css

Animations breathe life into web interfaces, enhancing user engagement and experience. Yet, implementing scroll-based animations can often be cumbersome and performance-intensive. Enter Trig.js, a lightweight JavaScript library designed to simplify the creation of CSS scroll animations.

What's New in Version 4?

With the release of version 4, Trig.js introduces Trig-Animations.css, a collection of predefined, configurable scroll animations. This addition allows developers to quickly integrate animations without delving deep into custom configurations, streamlining the development process.

Key Features In Update:

  • Customizable Animations: Utilize CSS variables such as --trig-delay, --trig-duration, --trig-blend, and --trig-direction to fine-tune animation behavior and timing. For instance: 
class="trig-fade enable-trig" style="--trig-delay: 2s; --trig-duration: 10s; --trig-blend: ease-in-out; --trig-direction: reverse forwards;">
     class="trig-target">.trig-fade
  • Performance Optimizations: Trig.js employs efficient scroll event handling, leveraging IntersectionObserver and requestAnimationFrame to ensure smooth animations without compromising performance.

Getting Started:

  1. Installation: Add the trig.min.js and trig-animations.min.css files to your project's JS and CSS directories. Include them in your HTML's : 
rel="stylesheet" href="/css/trig-animations.min.css">
   <span class="na">src="/js/trig.min.js">

Alternatively, use the CDN:

rel="stylesheet" href="https://cdn.jsdelivr.net/npm/trig-js/src/trig-animations.min.css">
   <span class="na">src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js">
  1. Implementation: Add the data-trig attribute or enable-trig class to elements you wish to animate. Customize animations using CSS variables as needed.

Explore Examples:

To see how you can use Trig.js to create your own custom scroll animations, explore the Trig.js Examples, showcasing various animations and configurations.

Join the Community:

Trig.js is open-source and welcomes contributions. Visit the GitHub repository to report issues, request features, or contribute to the project. You could also take a look at our Trig.js animate on scroll tutorial

Elevate your web projects with seamless, efficient scroll animations using Trig.js and Trig-Animations.css. Experience the ease of implementation and the enhancement in user engagement firsthand.