DEV Community

iDev-Games
iDev-Games

Posted on

Pinned Spinning Text and Growing Underline with Trig.js

#javascript #css #webdev #showdev

In this example, we'll explore how to use Trig.js to create a pinned text effect where the text rotates on scroll while an underline grows dynamically.

📌 Live Demo: Check out the CodePen

✨ What This Does

  • The text remains pinned in the viewport.
  • The "JS" part of "TRIG.JS" rotates based on scroll position.
  • The underline grows dynamically as you scroll down.

🚀 The Code Breakdown

1️⃣ Setting Up the HTML 

<!DOCTYPE html> <html lang="en"> <head> <title>Pinned Spinning Text and Growing Underline Using Trig.js</title> <script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Mono&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body class="trig-scroll-up trig-scroll-25"> <div class="container"> <div class="pinContainer" data-trig data-trig-degrees="true" data-trig-var="true" data-trig-min="-200" data-trig-max="200"> <div class="pinned"> <h1 id="title">TRIG.<span class="rotate">JS</span></h1> </div> </div> <div class="container"> <div class="alignCenter"> <div>Pinned Spinning Text and Growing Underline</div> </div> </div> </div> </body> </html>
Enter fullscreen mode Exit fullscreen mode

2️⃣ Styling with CSS 

body { margin: 0; padding: 0; background-image: linear-gradient(to right top, #090c11, #040b1a, #030821, #050527, #0b002c); color: #FFF; font-family: 'Space Mono', monospace; } h1 { font-family: 'Bebas Neue', cursive; color: #FFF; text-shadow: 2px 2px 2px #000000; font-size: 72px; } .pinned { display: inline-block; position: sticky; top: 30%; } .rotate { transform-style: preserve-3d; transform: rotateX(calc(var(--trig-deg) - 47deg)) perspective(800px); transition: transform ease-out 0.3s; display: inline-block; } #title:after { content: ""; position: absolute; bottom: 0; left: 0; transform-origin: left; width: 100%; height: 8px; display: inline-block; background-color: #FFF; transform: scaleX(calc(var(--trig) - 13%)); transition: transform ease-out 0.3s; }
Enter fullscreen mode Exit fullscreen mode

🔥 How It Works

  • The .pinned class keeps the text fixed in place using position: sticky;.
  • The .rotate class applies rotateX() based on the scroll position, using var(--trig-deg) from Trig.js.
  • The #title:after underline grows dynamically with scaleX(calc(var(--trig) - 13%)).
  • data-trig on .pinContainer enables Trig.js animations.

🎯 Why Use Trig.js?

  • Lightweight (Only 4KB!) 🚀
  • No dependencies
  • Highly customizable
  • Smooth scroll animations

📢 Final Thoughts

This example showcases how simple yet powerful Trig.js can be for scroll-based animations. You can easily tweak the values or expand on this effect.

Want to see more? Check out:

💬 Let me know what you think in the comments below! Happy coding! 🚀

Top comments (0)