Trig.js Tutorial: How to Animate on Scroll (AOS Made Easy) 🚀

Looking to bring life to your website with smooth scroll animations? Welcome to this Trig.js tutorial, where we'll explore how to use this lightweight library to create stunning animate on scroll (AOS) effects. Perfect for any skill level, Trig.js makes it easy to trigger animations when elements enter the viewport. Let’s jump right in! 🎉

---

🎉 What is Trig.js?

Trig.js is a JavaScript library designed to make CSS scroll animations effortless. With Trig.js, you can:

• Trigger animations when elements scroll into view. 🎯
• Use predefined animations, like trig-fade, or build custom animations. ✨
• Add dynamic scroll effects using CSS variables for endless creative possibilities. 💡

📌 Check it out on GitHub: Trig.js Repository

📚 View the documentation: Trig.js Docs

---

🛠️ Getting Started with Trig.js

1. Add Trig.js to Your Project

Include both the JavaScript and CSS files in your project by using these CDN links:

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

---

2. Activating Trig.js

You can activate Trig.js by:

1. Adding the data-trig attribute, OR
2. Applying the enable-trig class to your HTML elements.

Example:

<div class="enable-trig trig-fade">
  Hello, I fade on scroll! 🎉
</div>

Once activated, Trig.js automatically adds the trig class to elements as they enter the viewport, triggering their animations.

---

🌟 Predefined Animations with Trig.js

The trig-animations.css file offers predefined animations like trig-fade. Simply add the class to your HTML element to use these animations.

Example:

<div class="enable-trig trig-fade">
  Watch me fade in! ✨
</div>

📚 Find out what animations you can add in the docs: trig-animations.css Documentation

---

🎨 Custom Animations with Trig.js

Want more control? Combine Trig.js with your own custom CSS animations. Here's an example:

HTML:

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

CSS:

.fadeIn { 
  opacity: 0; 
}

.fadeIn.trig { 
  animation: fadeIn 1s normal forwards ease-in-out; 
}

@keyframes fadeIn { 
  0% { opacity: 0; } 
  100% { opacity: 1; } 
}

In this example, the fadeIn animation begins when the trig class is added.

---

⚡ Dynamic Scroll Effects with CSS Variables

Trig.js supports dynamic animations by calculating an element's visibility in the viewport and generating CSS variables for smooth, scroll-driven effects.

Example:

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

CSS:

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

Available Variables:

• --trig: Percentage
• --trig-reverse: Reverse percentage
• --trig-px: Pixels
• --trig-px-reverse: Reverse pixels
• --trig-deg: Degrees
• --trig-deg-reverse: Reverse degrees

These variables open the door to a world of dynamic, scroll-driven animations tailored to your vision. To activate these CSS variables the data attributes of data-trig-var="true", data-trig-pixels="true" or data-trig-degrees="true" need to be added to the element for each corresponding CSS variable and reverse CSS variable.

---

🎉 Conclusion: Your Animate on Scroll Adventure Begins!

With Trig.js, creating scroll-based animations has never been easier. Whether you're a developer looking for an AOS tutorial or aiming to master animate on scroll effects, this Trig.js tutorial will set you on the right path.

💬 Questions? Cool animation ideas? Drop a comment below! Let’s animate the web together! 🚀