GSAP Video Scrolling

Map video playback to page scrolling with GSAP Video Scrolling.

watch the GSAP Video Scrolling tutorial

Play Video

Harness GSAP’s power and use it to scroll through videos in your Elementor pages.

Using this new feature within Gloo‘s GSAP Scrolltrigger, we can now map video playback to user scrolling. This means that with some imagination and clever usage of a chosen video, you can now create a section containing a self hosted video which will play only as long as the user is scrolling through the page.

Using the other GSAP Scrolltrigger features, this means, moreover, that on any given page we can have any element animate on user scrolling on a video background which is played by the scrolling too. This includes 3D models thanks to the 3D Model Widget!

Note: GSAP Video Scrolling is part of the GSAP Scrolltrigger feature, and as such to use it we will need to toggle on both GSAP Scrolltrigger and Interactor in the Gloo settings dashboard.

Choosing the right file.

It’s important to note that in order to have our video animate and scroll correctly across all browsers, we will need our video to be encoded with a specific codec. This is especially important with Chrome and some other Chromium-based browsers, as for example Safari will have full compatibility with other codecs as well. This is not a GSAP or Gloo limitation, as much as it is a browser limitation, but we can work around it using FFmpeg: a popular framework to, among other things, encode videos to the exact format we will need.

We have prepared a FFmpeg Installation and video conversion guide for you.

Setup the video and container.

Having followed the guide to convert the video to work with GSAP on all browsers, let’s ready up the page for our GSAP work. Let’s add a Video widget to a container. This can be a new container, or it can be a container we already have other elements that we intend to animate with GSAP. What matters is that the container needs to have an unique CSS ID, and have its view height be enough to scroll through the video at the desired speed. This is because the container’s view height will determine how much scrolling needs to be done to actually carry out the animation. The more view height, the more scrolling we’ll need to do. Let’s also set it to be Sticky to the Top in the Motion Effects menu in the Advanced tab, along with toggling on Stay In Column.

Let’s upload our converted video to the widget by choosing the Self Hosted source and make sure that we aren’t showing Player Controls and that Metadata is selected in the Preload menu.

We will need to give a CSS ID to the video widget as well.

Remember: GSAP Video Scrolling will only work with Elementor Self Hosted videos

Setup the GSAP Event (GSAP Tween)

With that done, all that’s left to do is setting up the GSAP Event proper. Find and enable GSAP along with Interactor in the Advanced tab of the Elementor editor Page Settings under the Interactor menu. Toggle Enable Timeline and Timeline Scrolling on as well. We don’t need to touch any parameters inside these two options for any of this to work.

Let’s add a new item in the GSAP Event section of the menu. In the dropdown menu just after the title, we will need to select Elementor Video.

Let’s make sure to paste the CSS ID of the video in the Target field. We can then setup the rest of the event just as we’d do normally, as seen in the GSAP Scrolltrigger page and Tutorial. The only new option will be the Video Settings, where we’ll be able to crop the video to the desired start and end timestamps.

With this done, by updating the page we will see that the video inside the section will play only when the user is scrolling through the page. It’s important to remember, again, that the view height of the container will determine the amount of scrolling to be done to play the full video, and that the Canvas Settings inside the Event options will determine, in simple terms, how much of that scrolling space will be used to play the entire video.

Scope : Extension
Dependencies: Elementor

Frequently Asked Questions

GSAP Video Scrolling synchronizes video playback with user scrolling in Elementor. It lets you create sections with self-hosted videos that play as users scroll, and you can also animate other elements like 3D models with GSAP Scrolltrigger and Interactor.
Smooth video playback across all browsers can be ensured by encoding your video with a specific codec, especially for browsers like Chrome. You can address this limitation by following our guide on FFmpeg installation and video conversion.
By animating elements with GSAP based on user scrolling, you can create visually captivating and interactive experiences for your website visitors. This feature opens up creative possibilities for storytelling and engagement on your Elementor pages.

THIS FEATURE IS PART OF :

More Modules

Frontend User Registration New
Price+ Widget New
GSAP Standard Event
Dynamic Form Actions New
Wishlist Dynamic Tag Kit
Login Form Action New
Frontend Post Editing New
Buddyboss Groups Dynamic Tags New
Frontend Post Submission
WooCommerce Related Courses Tag
Dynamic Tag Everywhere
OTP Form Action New
Cookies Dynamic Tag New
Autocomplete Address Fields
Salesforce CRM Form Action
Image Upload UI New
Dynamify Repeaters New
Composer Kit Module New
Checkout Anything Form Action
Frontend Comment Submission New