<html><head>
        <title>Pinned Spinning Text and Growing Underline Using Trig.js</title>

        <!-- Trig JS -->
        <script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js"></script>

        <!-- Google Fonts -->
        <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">
        <!--End Fonts -->

        <!-- Mobile viewport meta tag -->
        <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>
 body{
   margin:0px;
   padding:0px;
   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;
}

.pageContainer {
  max-width: 100%;
  width: 100%;
}

.container {
  width: 80vw;
  min-height: 100vh;
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.pinContainer {
  width: 80vw;
  min-height: 400vh;
  position: relative;
  margin: auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.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{
  position:relative;
}

#title:after{
  content:"";
  position:absolute;
  bottom:0px;
  left:0px;
  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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.