Typographic Lottie animation is slowing down website

[Jasper_de_Waard]

Hello wizards of the web!

I’ve been working on an animation for a typeface I designed. I made the animation in After Effects, exported it as json using Bodymovin and imported as Lottie animation on the webpage. I put it on top of the webpage so you won’t have to scroll. The problem is, while it looks great in Chrome, it is basically not working in Safari. In Safari it is very slow, taking up way to much cpu, and quickly Safari tells me that it has refreshed the page because it was consuming too much energy.

Any idea what is causing the problem? I tried switching to canvas instead of svg, but that makes all of the masks used to make the animation visible, and doesn’t seem to help with the problem. The animation itself is only 133kb, which makes it a very elegant solution. If only I could get it to work…

Read-only link: https://preview.webflow.com/preview/goldich-microsite-db6b1614d8f85421ebccb?utm_medium=preview_link&utm_source=dashboard&utm_content=goldich-microsite-db6b1614d8f85421ebccb&preview=5f03729e1791db4565d4dfed9f7801a3&mode=preview

Published webpage: https://goldich-microsite-db6b1614d8f85421ebccb.webflow.io/

Thanks in advance!

Jasper

[Jasper_de_Waard]

To be fair I should probably add that it is also slowing down the website on Chrome.
Is the animation just too complicated? (Despite its small file size…)

[Steve_Wright]

Have you tried changing the Lottie render type to canvas? Makes Lotties play nicer with safari in my experience.

[Jasper_de_Waard]

Yeah I read that a couple times, and also tried it. Not only does it not solve the problem. It also makes all of the Track Mattes used to create the animation visible, like an ugly look behind the scenes. See attached images if that explanation doesn’t make sense