Lottie animations lag on Mobile

Design help General
1

Hello people,

I’m currently building my website based on vector graphics and lotties and while it looks smooth on desktop - on mobile it looks laggy, slow and I don’t know what to do to fix that. The lotties I use, aren’t big in size: Most of them are under 100 kb and one is slightly heavier - almost 400 kb. The framerate is 60 fps.

Maybe someone has some suggestions on how to solve this?

Here is my site Read-Only: https://preview.webflow.com/preview/brandalf?utm_medium=preview_link&utm_source=designer&utm_content=brandalf&preview=0b047136cdbca24c8bded9a2d03571c4&mode=preview

Here is the published website: https://brandalf.webflow.io/#Services
(once you start scrolling down on mobile, you should encounter the obvious lag)

2

Hi,

Really cool site by the way!

In the Lottie animation settings, if you changed the mode to canvas instead of SVG it should prevent the flickering/flashing which happens when the animation is taking place, if that’s the problem you are referring to.

Hope this helps!

3

Hi @cccurtis! Thanks for your reply, but I tried to change the mode to canvas and I wouldn’t say it had any visual impact on lagging on mobile view :frowning:

4

Hmm, that’s weird.

I just tried the site on my mobile (iPhone 8+, Safari) and everything ran smoothly, aside from a very obvious flickering/flashing on your Lottie animations that I know is caused by selecting SVG rendering instead of canvas in the Lottie settings.

Could it be your device perhaps?

1 Like
5

That would be a relief! I’m using an android device. Unfortunately, I don’t have an iPhone nearby to double check, but your review has been very valuable. Thanks!

6

No worries.

Here’s my screen so you can see exactly what I am seeing to clarify things further, as you can see the animations seem to be very smooth aside from the flickering. Hope this helps.

(It look like it was laggy at the start but thats because I refreshed the page)

RPReplay_Final1588286353_2

1 Like
7

It’s totally opposite of what I see when I use my Android phone. I can see that it looks totally smooth on your phone and I’ll change the mode to canvas to avoid flickering which is obvious here (no flickering however on Android). Thank you for this record, appreciate your effort!

1 Like
8

No problem, unfortunately I can’t think of a reason why it would lag for you as your Lottie files are very small. I hope you can find a fix for this.

9

Same on iPhone 5S (older iPhone). Very smooth but also flickering at the logos. Might be an Android thing.

Check this: Lottie Animation rendering is not smooth on Android Device · Issue #1436 · airbnb/lottie-android · GitHub

1 Like
10

Thanks for a suggestion. It says that android doesn’t support expressions. I’m not familiar with the term, but it seems to be affecting the preview of lottie files then. I guess, this is the end of my quest here :slight_smile:

11

Expressions are movement effects like whiggle and stuff. You place them in After Effects. Maybe try to take all that sweet whiggles out :smiley: *Kidding

Smoothing or even ease could be something like that.

1 Like
12

My aftereffects motion has been done just by rotation, position and path points editing. No other effects were involved :slight_smile:

Could it be, that my webflow’s interactions (which are affected by 70% smoothing) is causing this lag while experiencing the website on Android? Because not only Lotties are lagging, but moving text objects as well. Not that much as lotties, but still looks unuceptable :confused:

13

Oh ok, do you have the chance to test it on a new Version of your smartphone?

Please also share the Version of yours.

14

20200501_023740

At the moment I use an old Samsung Galaxy J3, but I’ve tested the website on few different Android smartphones (newer ones as well) and all of them have encountered the same laggy experience :confused:

15

That’s so sad. Seems to be time for creating a fallback on mobile :clown_face: