I have a video controlled by scroll that’s already encoded using FFmpeg, but it’s not smooth on mobile devices

[Sina.GST]

I have a video on my website that’s controlled by scrolling up or down, meaning the video plays forward or backward as the user scrolls. I followed this post to achieve this effect and already encoded the video using FFmpeg with this command:

ffmpeg -i input.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output.mp4

It works smoothly on desktop, but not on mobile devices. I’ve tested it on my Android phone, and the performance is far from smooth. Any ideas on how to fix this?

 

Thank you all!

See the Pen GgRmeMv by Sina-GST (@Sina-GST) on CodePen.

[Rodrigo]

Hi @Sina.GST and welcome to the GSAP Forums!

 

I'm afraid that you've reached the limits of what the hardware can give, that's all. This all boils down to rendering and that is most likely a bottleneck created by the fact that mobile devices have less powerful hardware, that's all.

 

You can explore other solutions in order to encode your video but I can't guarantee anything. Keep in mind that GSAP and ScrollTrigger are just updating the time position of the video, nothing more. The actual rendering of that position of the video falls on the browser not GSAP.

 

What you could try is that instead of the video use an image sequence on devices as shown in this demo:

See the Pen VwgevYW by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

 

 

 

[Sina.GST]

Hi dear @Rodrigo ! And thanks a lot for your message!

 

In the meantime, where I've been waiting for an answer here, I was trying to implement something like the codepen you sent me, but I never managed to make it work smooth like this!

 

May I ask how should I try this code using my video? I mean where should I put my url?

 

Thank you!

[Rodrigo]

Hi,

 

That is not a video is a sequence of images rendered in canvas and updated using ScrollTrigger. Here is the base URL for the images:

https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/

 

Goes from image 0001.jpg to 0147.jpg after the final slash (/).

 

Hopefully this clear things up

Happy Tweening!

[Sina.GST]

Got it, I thought I could put the video url into the JS code and get images as a sequence automatically inside the canvas tag, instead of having a bunch of images in my project structure!

[Bhavin]

Its a option if you make one more helper function or use api in that helper function which converts your video to image sequence and upload that sequence in somewhere with giving ou total images exact count which you can put in that value.

But your images name should be in that format only image0001.webp or any image extension but webp is better for performance. ( you can change total numbers by padstart but name syntax hould be like image00 image01 image02. I mean in sequence only)

But making that helper function for video to image and that much code is not likely better option. So its better to use image sequence only by providing images in sequence.