Flickering lottie animation

Lottie in Web
1

Hi all,

I have a question. I made this animation: https://lottiefiles.com/share/Lcm5W8
And its working fine on chrome but on safari for desktop and Safari for ios its flickering.

When I use a different player like svgsprite lottie player and open it on safari on ios and and upload the json straight from my iphone the animation works well.

I saw different solutions for this problem, 1. Set render serttings from svg to canvas, and 2. somerhing with set subframe. Both are solutions in code.

My question, is there something I can do differently in After effects so i dont have to do things in code?

For my source file: https://www.dropbox.com/s/26qukaveo4xwg0n/test.aep?dl=0

1 Like
2

@oscarkuipers I tested your animation on the Google Chrome app for iOS and the Safari app for iOS. I can confirm that the animation is flickering. I have seen some of my animations flicker black and white sometimes on desktop on google chrome. I also tested your animation on the LottieFiles app for iOS and Android. The animation plays correctly in the LottieFiles apps. So maybe could just be a bug with chrome or safari. Also, your animation is playing correctly on Microsoft Edge browser too.

3

Hey Oscar, have you found a solution? My animations are jumping up and down on Safari (both MacOS and iOS)…

4

Not sure if anyone is still having this problem. I was having the same thing and I was on a time crunch so I set the height of the svg element to auto and slapped a !important on there and that seemed to fix it. Not the best solution so if anyone knows of any other solutions I would love to know.

5

I’ve found a strange fix for flickering animations on Safari. It can’t be an ideal fix, but I found putting the exact same animation right above the flickering animation (so there’s two of the exact same animation touching each other side by side) causes them both to stop flickering. Just hide the duplicate animation with CSS and also set it to 1px high or whatever so it doesn’t take up any space.

My intuition for even trying this was that the same flicker from both animations would cancel each other out, I’m sure that intuition was totally baseless but it still fixes the flicker. Hopefully it gives AirBnb some insight into what’s causing the flicker in the first place.