📖 Tell A Story With Trig.js 3D CSS Scroll Animation

#webdev #programming #javascript #beginners

🎉 Introducing Trig.js v4.2.0's New Feature

The latest update to Trig.js (v4.2.0) introduces a powerful new feature:

🔹 The data-trig-var attribute now updates to the position in increments of 10 🎯

🔹 This allows you to trigger animations at specific scroll positions 📜

Let's dive into a 3D rotating text demo that showcases this feature and demonstrates how Trig.js makes animations easy!

🛠️ How It Works

The key part of this demo is the data-trig-var attribute, which now updates in steps of 10. This enables some extra timing control over animations.

🔹 The title text rotates dynamically using Trig.js scroll data

🔹 The backside of the text shrinks down at specific scroll position

<div class="pinContainer" data-trig data-trig-var="true" data-trig-degrees="true" data-trig-min="-200" data-trig-max="100">
  <div class="pinned">
    <div id="titleText">
      <h1 id="title">Tell a Story</h1>
      <h1 id="titleBackside">With Trig.js</h1>
    </div>
  </div>
</div>

🎨 Shrinking Down Effect

By utilizing data attribute selectors, we are able to change the state of the element at a certain point, giving us more control in our CSS:


#titleText {
  position: relative;
  margin: auto;
  width: min-content;
  transition: transform ease-out 0.5s;
}

[data-trig-var="80"] #titleText,
[data-trig-var="90"] #titleText,
[data-trig-var="100"] #titleText {
  transform: translateY(100%) scale(0);
}

🏆 Why This Matters

With v4.2.0's incremental updates, you can:

✅ Trigger animations at different scroll positions 📍

✅ Sync animations effortlessly with the scroll progress 🎯

This makes it easier than ever to build scroll-driven animations with just CSS! 🎨🚀