Lottie Full Screen Breaking Site

Design help Animations & Interactions
1

Hi everyone,

Got quite a big issue with a lottie animation that I’m thinking of either sacking off or maybe if anyone has any recommendations, I’m all ears.

The run down; using a lottie animation as a hero section for a site I’m working on and it causes safari to crash on mobile and gets close to it on Chrome desktop. I’m pretty sure this isn’t just my devices as they’re pretty new devices I’m testing on.

I’ve added the share link to the project for you to see the issue and if anyone has any advice.

If there’s no solution for getting this section to work smoothly, I’ll either try to change the file to an MP4 (if anyone knows a good way to do this, please let me know!) or I’ll just redesign the hero section with a static background.

FYI - the site is still in development so there will be issues across the site, that’s not a problem, I’m just looking for some help on the home page hero section.

Thanks Webflowers!

Jake

Here is my public share link: LINK
(how to access public share link)

2

Hey @jakedoubleu and welcome to the forum.

It’s never advisable to have a dynamic background. Lottie animations, gifs, or videos would all have pretty serious performance issues. If you absolutely have to use an animation, you could get creative with css animations that are based mostly on opacity and transform. But it needs pretty good knowledge of css.

3

@jakedoubleu Were you able to solve this issue?