Trig.js Example - Gradient Text

HTML

<html>
    <head>
        <title>Trig.js Example - Gradient Text</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>
        <div class="pageContainer">

            <div class="container">

                <div class="alignCenter"><div>Scroll Down <span id="spin" data-trig data-trig-degrees="true"  data-trig-pixels="true">&#x21bb;</span></div></div>

            </div>

            <div class="container">

                <div id="gradientText1" class="alignCenter title" data-trig data-trig-degrees="true" data-trig-var="true">Gradient Solid</div>
                <h1 id="gradientText2" class="alignCenter" data-trig data-trig-degrees="true" data-trig-var="true">Gradient Outline</h1>

            </div>
            
            <div class="container ">

                <div class="alignCenter"><div>An iDev Games Production</div></div>

            </div>
            
        </div>
    </body>
</html>

CSS

body{
  margin:0px;
  padding:0px;
  background-color:#060606;
  color:#FFF;
  font-family: 'Space Mono', monospace;
}
.pageContainer{
  max-width:100%;
  width:100%;
  overflow:hidden;
}
.container{
  width:80vw;
  min-height:100vh;
  position:relative;
  margin:auto;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.title{
  font-family: 'Bebas Neue', cursive;
  font-size:72px;
}
h1{
  font-family: 'Bebas Neue', cursive;
  color: #FFF;
  text-shadow: 2px 2px 0px #020202;
  font-size:72px;
}
#gradientText1{
  background: rgb(131,58,180);
  background: linear-gradient(var(--trig-deg), rgba(252,176,69,1) 0%, rgba(253,29,29,1) 50%, rgba(131,58,180,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  transform: scale(calc(var(--trig) + 100%));
  transition: transform ease-out 0.3s;
}
#gradientText2{
  background: rgb(131,58,180);
  background: linear-gradient(var(--trig-deg), rgba(252,176,69,1) 0%, rgba(253,29,29,1) 50%, rgba(131,58,180,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
  transform: scale(calc(var(--trig) + 100%));
  transition: transform ease-out 0.3s;
}
#spin {
  font-family: Lucida Sans Unicode;
  display: block;
  transform: rotate(var(--trig-deg));
  background: rgb(131,58,180);
  background: linear-gradient(var(--trig-deg), rgba(252,176,69,1) 0%, rgba(253,29,29,1) 50%, rgba(131,58,180,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 112px;
  font-weight: bold;
  background-size: 1%;
  transition: transform ease-out 0.3s;
}