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>
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>