CODEWITHSUNDEEP
javascriptanimationsvgcss-animationsbodymovin
Jay
Jay

Reputation: 336

Question of browser performance and using Bodymovin and CSS animations

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

Upvotes: 1

Views: 256

Answers (1)

Jay
Jay

Reputation: 336

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.

Upvotes: 1

Related Questions