Video animation choppy in chrome

[dhurley]

Using ScrollTrigger and Scrollproxy in react to animate an MP4 video. The video animates great in Safari but it's very choppy in Chrome. How do I get it to animate it in Chrome like it does in Safari?

https://codesandbox.io/s/eloquent-margulis-bv62k

[ZachSaucier]

Hey dhurley and welcome to the GreenSock forums.

 

This has to do with your video's format/compression. You can see that GSAP is doing its job by logging the scrollPos variable in your onUpdate. That means that the choppiness is coming from the video time update, not from GSAP. You can try exporting the video with more keyframes. But videos aren't made to play in reverse so I'm betting it will still be choppy in reverse. EDIT: You can get significantly better results by changing the video's encoding. See this demo for more info.

 

The more foolproof way to move forward would be to export a series of images (or a sprite depending on your needs) and use those instead of a video. Or change the way the functionality of the page works so that you are just playing a video when it's reached (i.e. not scrubbed through).

[dhurley]

Thanks for the reply! 

 

That makes sense but why would it work in Safari? Shouldn't I be able to use JS to make the scroll behaviour consistent across browsers? Is that not the point of ScrollProxy?

 

 

[ZachSaucier]

2 minutes ago, dhurley said:

why would it work in Safari?

Browsers handle rendering differently, including rendering of videos.

 

2 minutes ago, dhurley said:

Shouldn't I be able to use JS to make the scroll behaviour consistent across browsers?

The scroll behavior is consistent across browsers. As I said before, logging the scrollPos shows that. It is the rendering of the video that varies across browsers and unfortunately GSAP can't fix that.

[dhurley]

Thanks! You'd think it would. be easier to animate videos on the web. Would increasing the fps on the video help? 

 

Your images ideas is interesting. We've explored using Lotties but files are huge! What do you think the best approach would be for something like this?

[ZachSaucier]

5 minutes ago, dhurley said:

You'd think it would. be easier to animate videos on the web.

You'd think a lot of things would be easier on the web than they are  That's in part why GSAP exists, hah. But browsers are complex beasts.

 

5 minutes ago, dhurley said:

Would increasing the fps on the video help? 

Yes, it likely would as I mentioned in my first reply here. 

 

5 minutes ago, dhurley said:

What do you think the best approach would be for something like this?

If you need the amount of detail that's in the video then I would go with images. That approach does well across browsers. Most likely that's what I'd go forward with, as stated earlier.

 

If you could simplify the illustration to have less shadows, reflections, and potentially less textures then you could create something like it with SVG. A WebGL approach might allow you to retain more shadows and textures but would be more work. 

 

It all depends on your team's abilities and the way you want it to feel  

[dhurley]

Right now the video is already 120 frames (60fps). Using 120 images for something like this seems like it would be too much. Is that what you are suggesting? 

[ZachSaucier]

Just now, dhurley said:

Using 120 images for something like this seems like it would be too much. Is that what you are suggesting? 

Yep. Using modern image formats and compressing them as much as possible can get file size down. As would simplifying the image content itself.