Framer Classic » Text Layers » Auto-sizing

Auto-sizing

When you make changes to the text (as in the former example projects), and also when you change the text’s size or line height (as in the upcoming examples), your Text Layer must be able to resize. (And that’s why all these example projects have resizing enabled.)

It’s best to enable auto-sizing in Code because that’s where you’ll have more options.

In Design, you can give a text block a fixed size …

or set it to auto-size in both directions:

But in Code, you can decide in which direction the text should resize.

Auto Height

When you enable autoHeight, the Text Layer will maintain the width you gave it, but change its height to make room.

text.autoHeight = yes

To illustrate the difference, this is the behavior of a layer that was given a fixed width and height in Design:

Text that got a fixed width and height will not resize automatically
Download Framer project

Tapping the ‘more text’ button will add an extra paragraph:

# More text
buttonB.onTap ->
    theTextLayer.text = """Then came the night of the first falling star. It was seen early in the morning, rushing over Winchester eastward, a line of flame high in the atmosphere. Hundreds must have seen it, and taken it for an ordinary falling star. Albin described it as leaving a greenish streak behind it that glowed for some seconds. Denning, our greatest authority on meteorites, stated that the height of its first appearance was about ninety or one hundred miles. It seemed to him that it fell to earth about one hundred miles east of him.

I was at home at that hour and writing in my study; and although my French windows face towards Ottershaw and the blind was up (for I loved in those days to look up at the night sky), I saw nothing of it."""

… but nothing will change because the Text Layer is not set to adapt its height (nor its width).

(A Text Layer will mask the text it contains—its clip is always on.)

And here’s what happens when autoHeight is enabled:

Auto Height enabled in code
Download Framer project

Now that the text block resizes, I can also adjust the position of the —•— underneath it by looking at the Text Layer’s maxY:

# Place the line under the text
lineUnderText.y = theTextLayer.maxY + 20

Auto Width

There’s also autoWidth, for when the text block should stick to a certain height, and you only want its width to adapt.

text.autoWidth = yes

But there’s a limit: a Text Layer will never become wider than its parent layer, or when there’s no parent, wider than the screen.

Auto Everything

And if you want a text block to resize both vertically and horizontally, you can switch on its autoSize

text.autoSize = yes

… but that’s, of course, the same as the default behavior in Design:

One more thing: Setting a layer’s width or height will disable its auto-sizing for that direction. Remember that width and height are also changed when you set size or frame.


Leave a Reply