<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;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/CSSRulePlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js
  7. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/Draggable.min.js
  8. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/EaselPlugin.min.js
  9. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/EasePack.min.js
  10. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js
  11. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js
  12. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js
  13. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js
  14. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/MotionPathPlugin.min.js
  15. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js
  16. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PhysicsPropsPlugin3.min.js
  17. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/PixiPlugin.min.js
  18. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js
  19. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/ScrollToPlugin.min.js
  20. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js
  21. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/TextPlugin.min.js