GSAP Scrolltrigger in Elementor - Video sequence on scroll?

[Nicolai Palmkvist]

Hi GSAP lovers, 

I've created this hero section that plays a video when you scroll down and reverses it when you scroll up. I achieved this using Elementors native video widget and without  HTML, CSS only a few lines of JavaScript linked to GSAP ofc. Everything works as expected and looks really cool, but for some reason, the video lags a bit when scrolling. It’s not a lot, but it's noticeable.

Does anyone have ideas on how to fix this? I’ve checked the code, and I don’t think it’s the issue. Could it be related to the number of frames in the video? If so, what would be the optimal frame rate? I’m currently using 30 fps.

By the way, I made a detailed YouTube video showing how I did this, if you’re interested:  https://www.youtube.com/watch?v=s7n9vRFvmM0&list=PLrBEiKv9M1MbqfCUginEzRdiA6bTfiC-K&index=1

 

[mvaneijgen]

There are several topic about this already on the forum, with loads of detailed answers.