<div id="container">
  <span class="blur-word">Never</span>
  <span class="blur-word">Gonna</span>
  <span class="blur-word">Give</span>
  <span class="blur-word">You</span>
  <span class="blur-word">Up</span>
  <br>
  <span class="blur-word">Never</span>
  <span class="blur-word">Gonna</span>
  <span class="blur-word">Let</span>
  <span class="blur-word">You</span>
  <span class="blur-word">Down</span>
<br>
  <span class="blur-word">Never</span>
  <span class="blur-word">Gonna</span>
  <span class="blur-word">Run</span>
  <span class="blur-word">Around</span>

  <br>
  <span class="blur-word">and</span>
  <span class="blur-word">Desert</span>
  <span class="blur-word">You</span>
</div>


<!-- <div id="container">
  <span class="blur-word">Great</span>
  <span class="blur-word">Ideas</span>
  <span class="blur-word">Build</span>
  <span class="blur-word">Your</span>
  <span class="blur-word">Brand</span>
  <br>
  <span class="blur-word">Smart</span>
  <span class="blur-word">Tools</span>
  <span class="blur-word">Lift</span>
  <span class="blur-word">Your Game</span>
<br>
  <span class="blur-word">Fresh</span>
  <span class="blur-word">Views</span>
  <span class="blur-word">Wow</span>
  <span class="blur-word">Users</span>

  <br>
  <span class="blur-word">and</span>
  <span class="blur-word">Attract</span>
  <span class="blur-word">Them</span>
</div>
 -->
@import url('https://fonts.googleapis.com/css?family=Space%20Grotesk:500|Space%20Grotesk:400');

body {
  font-family: 'Space Grotesk';
  background-color: black;
  font-weight: 500;
  color: white;
  font-size: 5rem;
  margin: 0
}

#container {
  padding: 10rem;
  box-sizing: border-box;
}
.blur-word {
  filter: blur(20px);
  display: inline-block;
  margin-bottom: 2rem;
}

body {
  height: 4000px;
  display: flex;
  flex-direction: column;
  
}
const words = gsap.utils.toArray('.blur-word');


let tl = gsap.timeline({
  scrollTrigger: {
    trigger: container,
    start: "top top",
    end: "+=100%",
    scrub: true,
    pin: true,
  }
});

words.forEach(word => {
  tl.to(word, {filter: 'blur(0px)', duration: 1}, '+=0.1');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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