<h2>Scroll down</h2>
<h1>My progress is attached to the scroll event!</h1>
@import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');
body {
font-family: "Signika Negative", sans-serif;
font-weight: 300;
text-align: center;
height: 150vh;
}
h1 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// the animation to use
const tl = gsap.timeline({paused: true});
tl.from("h1", {scale: 0.7, autoAlpha: 0});
// The start and end positions in terms of the page scroll
const startY = innerHeight / 10;
const finishDistance = innerHeight / 5;
// Listen to the scroll event
document.addEventListener("scroll", function() {
// Prevent the update from happening too often (throttle the scroll event)
if (!requestId) {
requestId = requestAnimationFrame(update);
}
});
update();
function update() {
// Update our animation
tl.progress((scrollY - startY) / finishDistance);
// Let the scroll event fire again
requestId = null;
}
This Pen doesn't use any external CSS resources.