GSAP Scrolltrigger video scrubbing on scroll laggy/choppy in Firefox (Svelte issue?)

[amcaw]

Hi everyone,

 

I'm not sure if my problem is strictly GSAP related... but here it is. I'm using GSAP and Scrolltrigger to play video on scroll. I know that encoding is super important so I used ffmpeg settings from the codepen at the end of this post.

 

But I'm still having issues with Firefox : video is laggy while scrolling. Even with this video provided in the original codepen. It happens only in Firefox though. Chrome and Safari are fine (and Edge is ok-ish).

 

I'm using Svelte to build my page so here is a Repl to show how I did it. Note that everything is working fine in every browser in the Repl. The problem shows up when the app is built locally with npm run dev and in production with npm run build).

 

Is there a way to improve things so video would be smooth in Firefox too ? I see nothing in the console.

 

(Video encoding, Svelte, no codepen of my own... I'm might be off topic here. Sorry about that. But still any help would be much appreciated !)

 

EDIT : I tried to create a classic index.html file with the HTML/CSS/JS from the codepen below and I still have issues while the index.html file is online...

 

 

See the Pen 9e810322d70c306de2d18237d0cb2d78 by shshaw (@shshaw) on CodePen

[Cassie]

Heya!

 

Yeah, I'm not really sure what I can offer you for this one. Maybe someone else has input? You're right that this is a little out of scope for the forums though - so just managing expectations here. 

[amcaw]

Indeed, thanks for your kind reply though. If anyone know what's happening... Is it possible that a codepen works fine but not the same code in production ?

[DansDev]

Hey @amcaw,

 

I had the same issue with a previous project using the codepen code example you provided.

 

What solved the issue for me was the encoding of the video. In the codepen example you posted, the video used was encoded using ffmpeg - https://ffmpeg.org/. You need to run this via command line using the settings in the commented out section:

 

// ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output.mp4
// ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output_960.mp4

 I had to fiddle around with the frame values (-crf 23 & -crf 20) to what best suited my video.

 

Hope this gives you a bit of direction ?

 

Cheers

 

[Cassie]

Thanks so much for jumping in @AdventurousDeveloper  ?

[amcaw]

Thanks a lot @AdventurousDeveloper for sharing your knowledge. Much appreciated !

[DansDev]

Hey @amcaw,

 

No worries at all!

 

I couldn't help myself and dug out my old project files for a bit of a refresher. I've put together a CodePen to show how I got everything working. Hopefully this will get you going and also help other people with video scrubbing and ScrollTrigger. I've tested this across Safari, iOS Chrome, FireFox and Edge, but adjustments may still needed to be made.

 

Just a couple of notes from what I found out on my way getting this to work:

• I struggled with large video sizes and page load, I had to find a happy medium of video quality and file size.
• H.264 is widely available, namely H.265 (better in that it compresses more for the same quality, or gives higher quality for the same size). To use it, replace the libx264 codec with libx265, and push the compression lever further by increasing the CRF value — add, say, 4 or 6, since a reasonable range for H.265 may be 24 to 30. Note that lower CRF values correspond to higher bitrates, and hence produce higher quality videos.
• I contemplated using images instead, see the GSAP AirPods 

 

See the Pen XWZxLyO by AdventurousDeveloper (@AdventurousDeveloper) on CodePen

 

What made the magic happen was setting scrollTrigger onUpdate progress to half the FPS of the video to allow the entire video to be scrubbed for the duration of the scroll. Playing around with the end value will extend the length of how long/short you need the video to scrub for.

 

No doubt there may be a more efficient of doing this, so maybe someone else could fine tune further.  

 

Hope this helps ?

 

[amcaw]

Wow, thanks so much for getting back to me with all this ! This is gold and it definitely helps a lot. I can see that you even found a solution for disappearing video on Safari, that's awesome. Have a nice day ?

 

[Cassie]

This is a blessed thread, so glad someone came through for you!

[Hera]

On 6/9/2022 at 3:54 PM, DansDev said:

Hey @amcaw,

 

I had the same issue with a previous project using the codepen code example you provided.

 

What solved the issue for me was the encoding of the video. In the codepen example you posted, the video used was encoded using ffmpeg - https://ffmpeg.org/. You need to run this via command line using the settings in the commented out section:

 

// ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output.mp4
// ffmpeg -i ~/Downloads/Toshiba\ video/original.mov -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output_960.mp4

 I had to fiddle around with the frame values (-crf 23 & -crf 20) to what best suited my video.

 

Hope this gives you a bit of direction ?

 

Cheers

 

Hi. I solved this kind of issue by encoding the video using the command you provided. But another problem for me is when I test on my phone(android), the video is laggy. Do you know which command I should use to solve this case? Thank you.

[newguy123]

11 hours ago, Hera said:

Hi. I solved this kind of issue by encoding the video using the command you provided. But another problem for me is when I test on my phone(android), the video is laggy. Do you know which command I should use to solve this case? Thank you.

I've actually been doing some research in this recently as we've done a bunch of these types of projects recently, and I've come to the conclusion it depends on the lenght and resolution of the video. At some point, there's a bit of a tipping scale and android starts falling over, even on high end devices, where iOS keeps playing no matter if its an old device or new.

What you could try is adjust the CRF value. The command above mentioned 23. Now your milage may vary on this as I say depending on video lenght and resolution, but you can try values between 17 and 28, with lower values giving better quality, but also affects the fielsize. Higher values gives you worse quality, but also affect the filesize. Try and find a value that works for your specific video.
Values between 17 and 28 are sane values. Any lower or higher and you wont notice a difference in quality much, but the filesize will be huge difference.
I would almsot suggest to stay between 20 and 26 actually...

 

If on the othr hand, you only have a handfull of frames, then maybe image sequence will serve you better

[Rodrigo]

Hi @Hera and welcome to the GSAP Forums!

 

Unfortunately this is more trial and error more than anything else. My recommendation would be to avoid using videos on small devices in order to have better performance and use just some images from the video instead. You can still create a fun and engaging experience for phone users without creating a performance issue.

 

Keep in mind that small devices have less horse power hardware-wise, so you can't demand too much from them.

 

Happy Tweening!

[Hera]

14 hours ago, newguy123 said:

I've actually been doing some research in this recently as we've done a bunch of these types of projects recently, and I've come to the conclusion it depends on the lenght and resolution of the video. At some point, there's a bit of a tipping scale and android starts falling over, even on high end devices, where iOS keeps playing no matter if its an old device or new.

What you could try is adjust the CRF value. The command above mentioned 23. Now your milage may vary on this as I say depending on video lenght and resolution, but you can try values between 17 and 28, with lower values giving better quality, but also affects the fielsize. Higher values gives you worse quality, but also affect the filesize. Try and find a value that works for your specific video.
Values between 17 and 28 are sane values. Any lower or higher and you wont notice a difference in quality much, but the filesize will be huge difference.
I would almsot suggest to stay between 20 and 26 actually...

 

If on the othr hand, you only have a handfull of frames, then maybe image sequence will serve you better

Thank you for your guidelines. I'll try with CRF values between 17 and 28.

[newguy123]

19 minutes ago, Hera said:

Thank you for your guidelines. I'll try with CRF values between 17 and 28.

let us know what value ends up the magic number for your specific video
if 23 was stuttering, try 24, 25 , or 26
The higher you go, the smaller the filsize, and may start 'working' on some point on android. Probably also worth noting there's not much point in having 1080p video for this sort of thing unless its only few seconds. So for longer videos, try lowereing the resolution to 1280 or 960 even. There's a balance between absolute bad quality and trying to make it work on ALL devices. At some point you may have to sacrifice resolution or quality or both.

 

You can also make your logic so on desktop it uses a higher res video with crf 22 and on mobile lower res with crf 24 or 25 for example...

 

This bit in the ffmpeg command will keep aspect ratio and scale your video to 960 wide:
-vf scale=960:-1