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

What is Framer? Join the Community
Return to index
Anton Kosarchyn
Posted Jan 05 - Read on Facebook

Hi, does anyone faced the performance issues with the textLayers? It seems like they're forcing the synchronous layout render each time the prototype loads and during interactions. It's ok if prototype contains the few of text layers but could cause drastic performance flaws when there are plenty of them especially during animations. Noticed this when tried to debug my prototype in Chrome dev tools.

7 Comments

Dmytro Zaliznyj

interested as well

Ian McClure

That makes sense to me that textLayers are resource heavy. A font is basically a vector image with a bunch of other features added in. So, each letter has to be computed then drawn.

It might be worth seeing if rendering text as an image for your prototype where you can. More specifically, try and make those images larger than they need to be so things are always getting scaled down. Scaling images for a computer is usually a matrix transformation which are really easy to do unless you are trying to add information.

Anton Kosarchyn

Browser tells that the performance bottleneck is a "forced synchronous layout". Here are the details:
https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts

It tells that the function which caused this is an internal Framer function, called "TextLayer.renderText". I'm not the coder at all but I think that function refers to some CSS property, that doesn't already exist and to get it browser should calculate the layout first and then get back that property. Please correct me if I'm wrong.

And it appears in all the prototypes I did, in every place where the textLayers were used.
It would be good to hear the Framer developers opinion on this.

Anton Kosarchyn

This issue was already described here: https://github.com/koenbok/Framer/issues/533
But looks like it's still there.
In my case I have a bunch of textLayers placed inside the scrollComponent, and they render each time I scroll, due to some strange reason. I'm wondering are there any quick fix for that?

Yasin Arık

I am making an Instagram clone and I use many textLayers too and in each reload, I assign them different texts like user names and like counts etc.

So I'm waiting a fix for this situation too.

Dear Anton Kosarchyn and Ian McClure thank you for your contributions and valuable information.

Anton Kosarchyn

Any updates on this?)

Josef Richter

sounds like you might be using Framer for something that it's not intended and optimized for. what's your use case? how many text layers are we talking about?

Read the entire post on Facebook