🚗 CSS Car Scroll Animation Using Trig.js

Ever wanted to animate a car driving along a road using only CSS and Trig.js? With Trig.js v4.2.0, you can control animations based on scroll progress—no JavaScript required!

👇 Check out the live demo:

✨ How It Works

This animation uses Trig.js to update the data-trig-var attribute in increments of 10, allowing the car to move smoothly at different scroll positions.

🔹 Key Features

✅ The road moves dynamically as you scroll 📜

✅ The car changes position using data-trig-var 🚘

✅ The animation is entirely CSS-based 🎨

🔧 The Code

📌 Setting Up Trig.js

<div class="pinContainer" data-trig data-trig-var="true">
  <div class="pinned">
    <div class="road">
      <div class="carBox">
        <div class="carContainer">
          <div class="car"></div>
          <div class="wheel front"></div>
          <div class="wheel back"></div>
        </div>
      </div>
    </div>
  </div>
</div>

🚘 Car Movement

Using data-trig-var, we adjust the car’s position dynamically based on the scroll progress:

[data-trig-var="10"] .carBox { transform: translateY(10px) translateX(-10%); }
[data-trig-var="50"] .carBox { transform: translateY(0px) translateX(50%); }
[data-trig-var="100"] .carBox { transform: translateY(100px) translateX(110%); }

This means the car smoothly moves along the road as you scroll! 🚗💨

Help Trig.js Grow! 🌱

If you love what Trig.js brings to the table, here’s how you can help:
✅ ⭐ Star the repo on GitHub

✅ Use it in your projects and give feedback! 📝

Want to try it out? Check out the full CodePen demo! 🎨🔥

What do you think of this effect? Let me know in the comments! 💬🚀