Question of browser performance and using Bodymovin and CSS animations

Question

I am in the process of building a website full of SVG illustrations that have animated components that are being animated with Bodymovin.

But the backgrounds are also sometimes animating to show movement (a runner SVG with his arms & legs moving and a background SVG moving right to left showing progress).

Am I right in trying to limit using Bodymovin to the complex animations for the characters so I can use CSS transform3d animations for the simple background movements?

I'm trying to make things animate smoothly whilst being easy on everyone's browsers!

I would usually install GSAP and animate stuff with that, but that would mean adding a second JS animations library for the backgrounds as the client has a designer generating the Bodymovin animations.

Any advice would be welcome. Thanks

Answer 1

Bodymovin appears to be lagging with multiple animations on a page, so I ended up animating the backgrounds with CSS animations to keep the browsers' workload to a minimum.

And through animating translate3d, the css animations were smooth, too.