Jump to content


Scrub through video smoothly - ScrollTrigger

Moderator Tag

Recommended Posts

Whenever you scroll I am making a function to play the video. 

The video is playing rough, how can I play it smoothly?

I think I should use "scrollerProxy", but I don't know how to apply it.

See the Pen poymmNo by inkweon7269 (@inkweon7269) on CodePen

Link to comment
Share on other sites

Hey inkweon7269 and welcome to the GreenSock forums.


How you encode the video has huge implications on the playback ability of video. This demo provides some info about how you should encode your video.


You might also see these threads for more info about this subject:


  • Like 2
Link to comment
Share on other sites

  • ZachSaucier changed the title to Scrub through video smoothly - ScrollTrigger
  • 4 months later...

Hey @ZachSaucier


I've been trying to get my video to play on scroll and stumbled upon this thread. I've implemented the code shown in your demo link and IT WORKS!! spent days on this. However, it is choppy. I was wondering if you could elaborate a little on the video encoding. I don't really understand the commented out section in the JS


Many thanks

Link to comment
Share on other sites

  • 3 months later...

Hi, guys,

I am currently building a video scroll component that scrubs a video based on the user`s scroll position. On desktops and higher-end mobile devices like Apple devices and newer Androids the video scrubs smoothly. I was following the encoding suggestions of this

See the Pen 9e810322d70c306de2d18237d0cb2d78?editors=0010 by shshaw (@shshaw) on CodePen


However, the problems start on some middle/lower-end Android devices, where lag can be observed still, regardless of the video encoding (or at least that is what I think). I am starting to think that it is impossible to fix due to hardware limitations.

So, my question is, has anyone managed to find a consistent working solution for both desktops and mobile devices?

Link to comment
Share on other sites

Hi Antonio,


This sound like more of a hardware performance issue which is a little out of scope for these forums.

That being said - If anyone has any tips they're welcome to jump in. I'm just not certain how much help we can be seeing as the issue isn't GSAP-specific.

  • Like 1
Link to comment
Share on other sites

I'd recommend trying various codecs and keyframe intervals. Some chips/GPUs have hardware decoding built-in for certain codecs so they can be super fast. But maybe you're testing on devices that don't have such optimizations. like Cassie said, totally unrelated to GSAP. 


If you use a codec that isn't SUPER-compressed and you have a lot of keyframes then it'll be much easier on the device to decode and jump around, but your video file size will obviously shoot way up. 


Good luck!

  • Like 2
Link to comment
Share on other sites

  • 7 months later...

Hi Antonio and @GreenSock I ran into a similar problem with android mobile browsers.
How did you manage to solve this problem?

Would just increased the keyframe solve this problem for you?

Link to comment
Share on other sites

There is probably no one size fits all solution. You're just going to have to experiment to find what works best with the video you are using and your needs.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.