<h2>Scroll Down</h2>
<div class="spacer"></div>
<h1>GSAP 3 Express</h1>
<p>The ultimate beginner's course designed to get you up and running with GSAP's most popular features quickly.</p>
<p>Start your Free Trial today for a risk-free taste of my most popular course. </p>
<h1>GSAP 3 Beyond the Basics</h1>
<p>Learn features of the API the pros rely on to take their animations to the next level with precision timing, control, and flexibility. </p>
<h1>B-Sides, Bonuses, and Oddities</h1>
<p>Premium tutorials and demos that go beyond the fundamentals of the other courses. This is where we truly get creative with our code. </p>
<h1>ScrollTrigger Express</h1>
<p>Learn the many ways you can control your GreenSock animations with ScrollTrigger. Create awesome parallax effects, scrub through timelines, and trigger animations as they enter the viewport. </p>
<h1>Special Eases</h1>
<p>An ease can dramatically change the feel of an animation. Learn how GreenSock's proprietary eases (CustomEase, SlowMo, RoughEase) can drive truly unique and complex animation effects. </p>
body {
  font-family: sans-serif;
  background: #000;
  margin: 50px;
  color: #eee;
}

p {
  width: 80%;
  font-size: 24px;
  line-height: 36px;
}

p:last-of-type {
  margin-bottom: 100vh;
}

h1:nth-of-type(1) {
  margin-top: 300px;
}

h1 {
  font-size: clamp(50px, 8vw, 80px);
  background-image: linear-gradient(#f60 -200%, #ff0 -100%, #f60 0%);
  background-position: "100px 100px";
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
let headings = gsap.utils.toArray("h1");

headings.forEach(function (element, index) {
  gsap.to(element, {
    backgroundImage: "linear-gradient(#f60 100%, #ff0 200%, #f60 300%)",
    duration: 2,
    ease: "none",
    scrollTrigger: {
      trigger: element,
      start: "top 50%",
      end: "+=150px",
      scrub: true,
      markers: true
    }
  });
});

// learn how this was made: https://www.creativecodingclub.com/
// get access to 120 premium video tutorials.
// new content added weekly

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js
  2. https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js