Smooth font color change on scroll

I would like the font color to change when scrolling like here : https://codepen.io/akapowl/pen/zYRqbwm

unfortunately i can't get the code to work in squarespace. can someone help me ?

here is an example page  where i wanted to put the code on the home the password is hafenraum

https://azalea-grey-ekbk.squarespace.com/

Which code did you add to your site?

All codes I have taken over from CodePen:

https://codepen.io/akapowl/pen/zYRqbwm

I tried to put the HTML code in the code block, the CSS code in the CSS editor and the javascript with the script brackets in the header so the code injection 

but since it did not work I have removed this one 

JS code, have you declared these external libraries yet?

no, I have not yet declared these external libraries, how can I do that?

Here all script code you need

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
  
gsap.set('span', { width: 0 })

gsap.timeline({
    scrollTrigger:{
      trigger: 'span',
      scrub:0.3,
      start:"top 40%",
      end:"top 20%",
      //markers:true
    }
 })
  .to('span', {
  width:'100%', 
  duration:1, ease:'none',
  stagger:1
})
</script>

On 9/3/2023 at 3:51 AM, tuanphan said:

On 9/3/2023 at 3:51 AM, tuanphan said:

Here all script code you need

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
  
gsap.set('span', { width: 0 })

gsap.timeline({
    scrollTrigger:{
      trigger: 'span',
      scrub:0.3,
      start:"top 40%",
      end:"top 20%",
      //markers:true
    }
 })
  .to('span', {
  width:'100%', 
  duration:1, ease:'none',
  stagger:1
})
</script>

Thank you, I tried to implement the HTML and CSS code with the javascript from you on the website, but unfortunately it still does not change the color of the text when scrolling. In addition, it breaks all the page relationships of other images and text. 

 

• the HTML and CSS code were

Thank you, I tried to implement the HTML and CSS code with the javascript from you on the website, but unfortunately it still does not change the color of the text when scrolling. In addition, it breaks all the page relationships of other images and text. 
HTML: 

<h2>Scroll ...</h2>

<div class="wrap">
  <div class="wrap-container">

    <div>Silky<span>Silky</span></div>
    <div>smooth<span>smooth</span></div>
    <div>animation<span>animation</span></div>
    <div>is<span>is</span></div>
    <div>the<span>the</span></div>
    <div>hallmark<span>hallmark</span></div>
    <div>of<span>of</span></div>
    <div>any<span>any</span></div>
    <div>library.<span>library.</span></div>
    <br>
    <div>Silky<span>Silky</span></div>
    <div>smooth<span>smooth</span></div>
    <div>animation?<span>animation?</span></div>
    <br>
    <div>GSAP<span>GSAP</span></div>
    <div>has<span>has</span></div>
    <div>you<span>you</span></div>
    <div>covered.<span>covered.</span></div>

  </div>
</div>


CSS: 

body{
  margin:0;
  background-color:grey;
  height: 3a00vh;
}
h2{
  margin:20px;
  font-family: sans-serif;
  color:green;
}
.wrap{
  margin-top: 50vh;
  display: flex;
  justify-content: center;
}

.wrap-container {
  max-width: 950px;
}

div{
  position: relative;
  font-family: sans-serif;
  font-size: 36px;
  font-weight: 600;
  text-align: center;
}

div {
  display: inline-block;
}

span{
  position: absolute;
  width: 0;
  height: 100%;
  color: #0fd10f;
  left: 0;
  overflow:hidden;
  text-align: center;
}