<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');
});
This Pen doesn't use any external CSS resources.