title: Text Gradient animation on scroll
body: <p>Trying to replicate same functionality as <a href="https://www.apple.com/uk/ipad-air/" rel="nofollow noreferrer">https://www.apple.com/uk/ipad-air/</a> where as you scroll the text gradient changes. Scroll down to &quot;Powerful. Colourful. Wonderful&quot; to see the effect I'm trying to replicate. I know how to do a regular linear gradient (<a href="https://codepen.io/laluuk/pen/xxOwxGv" rel="nofollow noreferrer">https://codepen.io/laluuk/pen/xxOwxGv</a>) but how do I change it on scroll, I'm guessing I have to use JS/jQuery scroll but don't really know how to. Would greatly appreciate some assistance...</p>
  <pre><code>&lt;section class=&quot;text-1&quot;&gt;
      &lt;h1&gt;Powerful.&lt;/h1&gt;
  &lt;/section&gt;
  &lt;section class=&quot;text-2&quot;&gt;
      &lt;h1&gt;Wonderful.&lt;/h1&gt;
  &lt;/section&gt;
  
  
  section {
      height: 100vh;
  }
  
  .text-1 {
      text-transform: uppercase;
      background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 72px;
      font-family: &quot;Poppins&quot;, sans-serif;
  }
  
  .text-2 {
      text-transform: uppercase;
      background: linear-gradient(to right, #11825b 0%, #330867 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 72px;
      font-family: &quot;Poppins&quot;, sans-serif;
  }
  </code></pre>