Scroll Direction Changed
Scroll
Utility
GSAP
ScrollTrigger
JS
- Run code when page scroll direction changes
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrollTrigger);
let lastDirection;
ScrollTrigger.create({
trigger: document.body,
start: "top top",
end: "bottom bottom",
onUpdate: (self) => {
if (lastDirection === self.direction) return;
lastDirection = self.direction;
if (self.direction === 1) {
console.log("Page scrolled down");
} else {
console.log("Page scrolled up");
}
}
});
});
</script>Preview Links
Custom JS
Enable custom code in preview or view on published site.
Enable custom code?
Last Updated: Dec 3, 2025
- Run code when page scroll direction changes
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrollTrigger);
let lastDirection;
ScrollTrigger.create({
trigger: document.body,
start: "top top",
end: "bottom bottom",
onUpdate: (self) => {
if (lastDirection === self.direction) return;
lastDirection = self.direction;
if (self.direction === 1) {
console.log("Page scrolled down");
} else {
console.log("Page scrolled up");
}
}
});
});
</script>