Posted on Mar 29

📖 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! 🎨🚀