In this Elementor GSAP tutorial, you’ll learn how to create a smooth scrolling video effect without using any plugins. This method uses GSAP ScrollTrigger to sync your video playback with scroll position – making it feel like you’re controlling the video as you move down the page.
It’s a lightweight and modern technique that works perfectly in WordPress with Elementor. Follow along to see how to set up this effect with just a few lines of JavaScript.
Timestamps:
- 0:00 Video Scroll Demo
- 1:32 Adobe Premiere Export
- 2:26 Key Frame Distance Setting*
- 4:20 Upload Video to WordPress
- 4:46 Set up Video Container
- 6:11 Add HTML Video Code
- 7:00 Set up HTML Video Widget
- 7:42 Add Video CSS Code
- 9:04 Video Motion Effects Settings
- 9:43 Add JavaScript GSAP Code
- 13:30 Laggy Video Example
HTML Video Code
<video id="scroll-video" src="video.mp4"
preload="auto" muted playsinline>
</video>
JavaScript Code
<!-- GSAP + ScrollTrigger -->
<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
const video = document.getElementById("scroll-video");
// Enable video playback on iOS
document.addEventListener("touchstart", () => {
video.play();
video.pause();
}, { once: true });
const initVideoScroll = () => {
// Ensure video starts from the beginning
video.currentTime = 0;
ScrollTrigger.create({
trigger: "#video-section",
start: "top top",
end: "bottom bottom",
scrub: true,
// markers: true, // Uncomment for debugging
onUpdate: self => {
video.currentTime = self.progress * video.duration;
}
});
};
// Initialize when video metadata is ready
if (video.readyState >= 1) {
initVideoScroll();
} else {
video.addEventListener("loadedmetadata", initVideoScroll, { once: true });
}
</script>
CSS Code
selector video{height:100dvh;object-fit:cover;}
