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

What is Framer? Join the Community
Return to index
Jonas Treub
Posted Mar 02 - Read on Facebook

If your prototype stutters when it animates, chances are you are animating a property that isn't hardware accelerated.

These properties are well performing animatable properties:
• scale (scaleX, scaleY)
• x and y positions
• opacity

A lot of the other properties cause repaints, which takes more time to render. For example:
• size (width, height)
• shadow
• background and border colors

Sometimes it is possible to translate a bad performing property to a hardware accelerated one. If you like to know the trick for animating shadows. This following example is for you.

5 Comments

Sergey Voronov

yeap, shadow stuff is just killing cpu :/ i was using proxy and modulate the shadow alfa

Danny White

Are the other properties limited by hardware (GPU vs CPU)? Or is this something that might be worked on in the future? Apart from tricks like the example you attached

Jonas Treub

The slow properties require a re-render by the CPU while the quick ones can be transformed by the GPU, which is almost instant. This is probably not going to change anytime soon.

Jordan Robert Dobson

This a very awesome thing to mention. Not a lot of people know this unless they've done heavy front end animation work.

Leon Kosters

👏🏼👏🏼

Read the entire post on Facebook