This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Paweł Ludwiczak
Posted Jan 03 - Read on Facebook

Do you guys have any tips & tricks for improving animations performance on Android devices?

I've got a prototype with bunch of animations/transitions. It works perfectly fine when I preview it on mac's Framer app but when I try it on Framer Preview on Android device (in this case: Samsung Galaxy Tab S2) it becomes a bit laggy:
- reaction time on events (click/tap) sometimes feels longer
- all transitions and animations look more choppy

So I wonder if there are any special tricks or best practices to make everything faster and smoother on devices that don't like moving elements :)

2 Comments

Anton Kosarchyn

Hi, Paweł Ludwiczak
I would recommend great free course of how to improve the performance of the web projects (could be applied to a framer prototypes, as well).
https://www.udacity.com/course/browser-rendering-optimization--ud860
Spending time on it (I spent few evenings) totally worth it.

Performance mostly depends on the hardware and on the browser you use to run the prototype. If prototype hits fps on your mac it simply means that it has enough power to forgive the mistakes in the code (unlike the portable devices).

In short, there are few tips:

- try to use as few images as possible, if layout component could be done within Framer - do it.

- try to avoid referencing CSS properties of other layers too much (especially in loops). If you need to do this a lot - create a variable, then store CSS property to that variable an use it. Eg instead of using Screen.width you can create an alias "screen" to store all the screen properties you'll need in future and use it instead.

- use functions to store repeatable bits of code

- try to avoid CSS properties which are expensive for the browser, you can use this site to find them: https://csstriggers.com/. Usually, translate(move), scale, opacity properties are safe to use.

- if something could be done during the prototype loads (elements creation, images, font's load) - use this possibility instead of doing it during the animation. You can load everything from the start and then hide until your animation starts.

- avoid "force2d" property in dynamic prototype (disabled by default) because it could cause a lot of paint -> performance will be low.

I'm not an expert in coding, but all the tips are from my own experience. Please correct me if I'm wrong somewhere.
Would be happy to hear some optimization tips as well ))

Paweł Ludwiczak

Here's interesting trick – I've added CSS style: `will-change: transform` to some of the layers I wanted to animate (especially those heavy animations). It is way better - not perfect but better. (of course, I'm transitioning `transform` properties)

Read the entire post on Facebook