Flexer is a FramerJS module that allows you to create flexible layouts. This means you can use proportions or relative values instead of absolute pixels to position and animate layers on your prototypes.
NOTE: Flexer is in a very early stage of development, so unexpected behavior is... expected. It's a work in progress. All bug reports, feature requests, and general feedback are greatly appreciated! ๐
- Main demo(wip). You can check the code in the gh-pages branch.
- Animated accordion menu demo in less than 30 lines of code.
In order to install it, you will need node/npm.
- From your Framer project folder, type
npm install flexer
. Hint: You can add the--save
flag if you want the package to appear in your project dependencies. - Create a file
npm.coffee
in yourmodules
folder, with this line:exports.flexer = require "flexer"
- Lastly, add the following line in
app.coffee
(or your main file):{ flexer } = require "npm"
For further information about modules, check the awesomic Framer documentation.
Once you import the module on your main file, Flexer will add the properties listed below to the Layer
class. Flexer tries to not be intrusive and doesn't modify your layers until you use one of these properties.
This means you can have in the same project some layers with the default Framer layout (using x
, y
, width
, height
) and other layers with a flexible layout.
NOTE: Once a layer becomes flexible, you should use left
, right
, top
, bottom
and fixedWidth
, fixedHeight
instead of x
, y
, width
, height
. If you want to position elements absolutely and not relatively to their parents and siblings, use position: absolute
.
From css-layout readme:
fixedWidth
,fixedHeight
: positive number (animatable)minWidth
,minHeight
: positive number (animatable)maxWidth
,maxHeight
: positive number (animatable)left
,right
,top
,bottom
: number (animatable)margin
,marginLeft
,marginRight
,marginTop
,marginBottom
: number (animatable)padding
,paddingLeft
,paddingRight
,paddingTop
,paddingBottom
: positive number (animatable)borderLeftWidth
,borderRightWidth
,borderTopWidth
,borderBottomWidth
: positive number (animatable)flexDirection
: 'column', 'row'justifyContent
: 'flex-start', 'center', 'flex-end', 'space-between', 'space-around'alignItems
,alignSelf
: 'flex-start', 'center', 'flex-end', 'stretch'flex
: positive number (animatable)flexWrap
: 'wrap', 'nowrap'position
: 'relative', 'absolute'
NOTE: borderWidth
is not available for now, until I find a way to solve the conflict with the existing Layer
property.
If you want to animate the layout transitions, you can use the layout.curve
property of the layer. For example:
# Now all layout modifications on layerA and sublayers
# will be animated
layerA.layout.curve = "spring(300, 40, 10)"
- A complete guide to flexbox (css-tricks.com)
- Using CSS flexible boxes (Mozilla Developer Network)
- CSS flexible box layout specification (w3c.org)
- Koen Bok for open sourcing the amazing FramerJS library
- Christopher Chedeau for open sourcing the amazing css-layout library