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

What is Framer? Join the Community
Return to index
Koen Bok
Posted Jan 12 - Read on Facebook

Fun experiment. I have been thinking on a nice way to handle positioning and positioning updates in Framer. Apple for example has autolayout, but while it's very powerful I find it hard to use for simple things and overkill for Framer.

So I came up with layer.anchor. You use it with 6 simple rules: top, left, right, bottom, centerX, centerY. Like this: layer.anchor({top:100, left:100}). It will then stick to this position, also when resizing the window.

Here is a module project to play around and see how you like it: http://share.framerjs.com/r9yd2nqg8kpo/

It's just testing so these things are unsolved:

- What happens with animations and anchoring? Who wins?
- What to do with unsolvable rules (centerX:0 and unequal left and right).
- Only works fullscreen for now.

10 Comments

George Papadakis

I recall suggesting this for Sketch. It's tricky yes, but could come in super handy.

As for who wins when, you could introduce a "favor" attribute to resolve this conflicts.

e.f: favor: "anim".

Jay Stakelon

This is cool! I played around with something similar months ago which would update on window.resize (http://stakes.github.io/fluid-framer/) so I could use Framer for responsive web prototyping but this syntax is WAY better.

Personally I'd say animation should override an anchor by default: I imagine that would be my intent if I animated an anchored layer.

Johannes Eckert

This is really great! I'm a huge fan of constrained based design and try to use autolayout in iOS and GSS on the web wherever I can. I think the anchor should win against animation — unless the anchor is animated? Could you animate an anchor?

Andrew Nalband

John Kopanas I saw you asking about responsive layouts - you may find this useful

John Kopanas

Andrew Nalband thanks!!!

Javier Eduardo Treviño

I'm curious, what design tools you dou guys use before animating with framer? Photoshop? Sketch?

Andrew Nalband

Javier Eduardo Treviño If I'm going to use something usually sketch, but these days I pretty much skip those altogether and try to do just about everything right in Framer. I'd only go to those tools for something like photo editing

Javier Eduardo Treviño

Cool , didn't know that was possible

Andrew Nalband

Javier Eduardo Treviño some things are actually easier to create using code. Like a list of layers

Javier Eduardo Treviño

Do you use framer studio or just the library?

Read the entire post on Facebook