Scrub through video smoothly - ScrollTrigger

[inkweon7269]

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.

[ZachSaucier]

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:

 

[Thepaulcollett]

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

[GreenSock]

It's about keyframes encoded in the video, and the frequency of those. 

https://blog.video.ibm.com/streaming-video-tips/keyframes-interframe-video-compression/

 

There's a tradeoff. The more keyframes, the more data (bigger file size) but the easier it is to jump to specific frames smoothly. 

[Antonio Iliev]

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?

[Cassie]

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.

[GreenSock]

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!

[Samuele]

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?

[OSUblake]

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.