<html>

<head>
  <title>Control Trig.js CSS Scroll Animations with JavaScript for Dynamic Direction Changes</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-var="true" data-trig-pixels="true" data-trig-min="-200" data-trig-max="100">
      <div class="pinned">
        <h1 id="title">TRIG.<span class="move">JS</span></h1>
      </div>
    </div>
    <div class="container">
      <div class="alignCenter">
        <div>Control <a href="https://github.com/iDev-Games/Trig-JS" target="_Blank">Trig.js</a> CSS Scroll Animations with JavaScript for Dynamic Direction Changes</div>
      </div>
    </div>
  </div>
</body>

</html>
body {
  margin: 0px;
  padding: 0px;
  background-color: #333;
  color: #fff;
  font-family: "Space Mono", monospace;
}

a {
  color: #fff;
}

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%;
}

.move {
  transform: translateX(calc(var(--trig-px) - 10px));
  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;
}

/* Class to reverse animation direction */
.move.reverse {
  transform: translateX(calc(var(--trig-px-reverse) + 100px));
}

// Function to check the value of --trig and apply the reverse class if necessary
function checkTrig() {
  const element = document.querySelector(".move");
  const trigValue = parseFloat(
    getComputedStyle(element).getPropertyValue("--trig")
  ); // Get the --trig value as a percentage

  // If scroll position is 50% or more, add the 'reverse' class
  if (trigValue >= 50) {
    element.classList.add("reverse");
  } else {
    element.classList.remove("reverse");
  }

  // Use requestAnimationFrame to continuously check for scroll updates
  requestAnimationFrame(checkTrig);
}

// Start the checkTrig function
checkTrig();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.