search

jchavarri / framer-flex

Example project to show an integration of FramerJS with flexbox
11 stars 0 forks source link

Describe build process? #1

Closed tehfailsafe closed 8 years ago

tehfailsafe commented 8 years ago

So far looking at framer.debug.js I can see a few additional packages added like css-layout, but I can't find a few others like LayerLayout? Did you write this specifically for this use case?

jchavarri commented 8 years ago

css-layout is a library from Facebook, and I'm using it to calculate the flexbox layout positions for every layer.

LayerLayout is the helper class I've added to Framer so the layers positions can be recalculated for every property update. You can check the code on the flexbox branch of my Framer fork.

tehfailsafe commented 8 years ago

Got it. I'd really like to start tinkering with this. Do you plan for a different workflow than merging into framer source?

jchavarri commented 8 years ago

I just tried a much easier flow, and it works :) Download this repo and rename the folder to framer-flex.framer. Open it with Framer Studio, and start playing with it. If you don't have Framer Studio, let me know and I will add an easier way to play with it, as soon as I can.

The layout properties available on the Layer class are the same documented in css-layout readme: minWidth, flex, justifyContent... You can animate them as well –only the numeric ones, of course–.

Don't hesitate to share any examples, questions, or anything related either here or on the FB group.

tehfailsafe commented 8 years ago

Yes, I did that on your example and it works quite well. What I mean though is adding the LayerLayout more like a module or some other include, rather than swapping framer.js to the different framer.debug.js that bundles it.

That way it's separate from the framer source, and can be used in other existing projects, etc.

jchavarri commented 8 years ago

I see what you mean now, that's a good idea. So I extracted the code from the original pull request and put it in a library. I did it very quickly, so let me know if it works for you as I might have done some mistakes in the process.

tehfailsafe commented 8 years ago

Wow, you are fast! Got it up and running and will be playing with it on older prototypes. I'll let you know how it goes!

jchavarri commented 8 years ago

I think we can close this. The library code, independent from Framer, is here