Jump to content
GreenSock

Filip Winiarski

Animation lags with video playing in the background.

Recommended Posts

Hi, are there any methods to prevent GSAP animations stutter themselves and <video></video> playing in the background? Any animation I'll play on other elements, even the very basic ones, affect the video performance - resulting in a slideshow.

Video is 720p, 60MB. Video without other animations works perfect. And so animations without a video work perfect too. Any ideas?

Link to comment
Share on other sites

Performance optimization is a pretty huge topic, so it's very difficult to know exactly what's causing the problems on your particular page. In general, the biggest problem tends to be the browser's graphics rendering, so make sure you're affecting the smallest number of pixels possible, that the bounding box for those changes is as small as possible, and that you're not animating things that could affect document flow (like top/left, margin, etc.) 

 

If you still need some help, feel free to post a link or a reduced test case so we can see what's going on. 

 

Happy tweening!

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

@GreenSock thanks for the tips! I forgot that loading time affects the performance of animations, therefore I minimized the video from 60MB to 5MB, added some sexy grid to cover this low quality and everything works sweet :) For production I will also download the video on website preload so everything should work basically in an instant. Cheers!

NOTE: Moving any animations to canvas and SVGs seems to have lower impact on the video playback.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×