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

What is Framer? Join the Community
Return to index
Alvaro Lourenço
Posted Oct 11 - Read on Facebook

Is it possible to set "Pin" positions and "Flexible" dimensions by code?


Alvaro Lourenço

I'm talking about this:

Lukas Guschlbauer

The Align-functions can help you with pinning.

Alvaro Lourenço

I'm looking to access the same *automatic* behaviors of Framer's "Pin Positions" and "Flexible Dimensions". The ones of the figure in my comment above.

Alan Travis

You can do height, width, x and y as percentages, relative to the parent in code. This gives you the same results as pinning in design.

ex) if the parent is 1000px wide, and you create a layer that's parent.width*0.5 it will always be 50% of the parent width regardless of if the parent width changes.

the same holds true for other size/positioning parameters...

Alvaro Lourenço

Yes but this would force me to implement several 'change' listeners in order to get the automatic behaviors that Framer already offers in Design Tab.

Suppose I want animate parent's dimensions, for instance... I'd like children to be repositioned accordingly. Just as it happens when you use Design Tab's configurations.

When using those Design Tab controls I posted in my first comment, positioning and dimensioning are **automatically** updated upon parent changes. This happens even when change occurs by code, so the logic is there... I just couldn't find the proper documentation.

Alan Travis

I haven't tried resizing via animation something I created in design that has pinned children...

you could flexbox it... I've seen a couple examples of flexbox+framer... I think there's even a module for it...

I haven't looked deeply.

At some point though in an update/render event something is going to have to recognize that the size/position has changed...

Alvaro Lourenço

Yes we can aways listen for 'change:x/y/width/height' events.
And flexbot can be handy indeed, thanks for the tip. I'm looking to update some of my libraries... and was thinking that it would be leaner if I used Framer native resources 😕

Read the entire post on Facebook