Play Video on Scroll Tutorial

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.

Download Code:
https://wickydesign.com/scroll-to-play-video-in-elementor-pro/

Get Elementor Pro:
https://wickydesign.com/get-elementor

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

Download our free Elementor Template:
https://wickydesign.com/free-resources/

Sign up for our Newsletter:
https://wickydesign.com/newsletter/

Our Recommended Tools
Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

WORDPRESS PLUGINS:
✔️ Elementor: https://wickydesign.com/get-elementor
✔️ Crocoblock: https://crocoblock.com/?ref=2562

------
For more information regarding our web design and branding services, please visit https://wickydesign.com

Видео Play Video on Scroll Tutorial канала Wicky