Animation lags with video playing in the background.

[Filip Winiarski]

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?

[GreenSock]

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!

[Filip Winiarski]

@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.