Scrolltrigger - video scrub laggy/choppy

[calvin1988]

Hi everyone.

I'm working on a video scrub using this example I found in another post, but when I replace the video url with my own video the animation gets laggy and choppy.

 

I went through other posts like this:

As recommended in the post, the video is now at 60FPS and encoded in H.264 format, but it is still choppy on Chrome (it's smooth on Safari).

Please advise 

 

 

See the Pen xxrOdpj by GreenSock (@GreenSock) on CodePen

[GreenSock]

The problem you're describing sounds like the nature of video codecs and keyframe spacing. It is critically important that you encode the video properly if you want to be able to scrub smoothly. Most video codecs have keyframes every X number of frames, and then between those it only records the changes from the previous frame (to minimize file size). It's optimized to only play forward. So if you encode the video when keyframes every 120 frames, for example, what happens if you try to scrub to frame 57? That's not a keyframe. It's a lot of work for the computer to back up to the closest keyframe earlier, and then calculate all the changes on each frame since. It's terrible for scrubbing smoothly. But if you encode your video with a keyframe literally on EVERY frame, then it'll be able to scrub incredibly smoothly (but you'll have a much bigger video file). 

 

In short, this has absolutely nothing to do with GSAP or ScrollTrigger - it's purely a video encoding thing. At least that's my best guess based on your description. Encode your video with the keyframes spaced tightly and you should be okay. Or just use an image sequence and <canvas>. 

 

@Cassie suggests some settings here: 

 

And this thread might also prove helpful: 

 

Good luck!

[August Devices]

On 3/3/2023 at 9:23 AM, calvin1988 said:

Hi everyone.

I'm working on a video scrub using this example I found in another post, but when I replace the video url with my own video the animation gets laggy and choppy.

 

I went through other posts like this:

As recommended in the post, the video is now at 60FPS and encoded in H.264 format, but it is still choppy on Chrome (it's smooth on Safari).

Please advise 

 

 

Getting the TypeScript issue with "this" please help me out.

fn.apply(this, arguments);

 

[Cassie]

Hi there, We love answering GSAP questions here, but this seems more typescript specific.

 

I recommend heading over to this page of typescript resources.

https://www.typescriptlang.org/community