distribute-layers
distribute-layers copied to clipboard
martenbjork
Distribute an array of layers in Framer.js
Distribute Layers for Framer
Installation • Code Examples • Full documentation
This package helps you position multiple Framer layers with ease.
You can position layers in three ways:
| sameDistance | sameMargin | spaced |
|---|---|---|
The layers are positioned every nth pixel, regardless of their height.  |
The layers follow each other with a constant margin between them.  |
The layers fill upp the space. The spacing between them is equal.  |
You ➡️ can ➡️ also ➡️ distribute ➡️ layers ➡️ horizontally.
Installation
- Download distributeLayers.coffee.
- Open your project folder (YourProject.framer). Inside it, there is a modules folder. Put distributeLayers.coffee inside it.
- At the top of your main Framer file, require the package using
{ distributeLayers } = require "distributeLayers"
Code examples
{ distributeLayers } = require "distributeLayers"
layers = []
layers[0] = new Layer
layers[1] = new Layer
layers[2] = new Layer
distributeLayers.sameDistance
layers: layers
distance: 250
Full documentation
There are three functions:
- distributeLayers.sameDistance(options)
- distributeLayers.sameMargin(options)
- distributeLayers.spaced(options)
All functions accept one argument: an options object. The functions can be called with the following arguments:
| Name | Type | Required | Description |
|---|---|---|---|
| layers | array | yes | An array containing the layers you want to distribute. |
| direction | string | no | horizontal or vertical. Defaults to vertical. |
| startOffset | int | no | X/Y starting point for the first layer. X when direction is horizontal, Y when vertical. |
➡️ distributeLayers.sameDistance()
In addition to the parameters above, distributeLayers.sameDistance() accepts these additional arguments:
| Name | Type | Required | Description |
|---|---|---|---|
| distance | int | no | How much space to add between each arguments. Defaults to 500. |
See example project (Click “open” to view code in Framer Studio)
➡️ distributeLayers.sameMargin()
In addition to the parameters above, distributeLayers.sameMargin() accepts these additional parameters:
| Name | Type | Required | Description |
|---|---|---|---|
| margin | int | no | Margin between each arguments. Defaults to 10. |
See example project (Click “open” to view code in Framer Studio)
➡️ distributeLayers.spaced()
In addition to the parameters above, distributeLayers.spaced() accepts these additional parameters:
| Name | Type | Required | Description |
|---|---|---|---|
| max | int | no | The max area within which the layers should be rendered. Defaults to 1000. |
See example project (Click “open” to view code in Framer Studio)
martenbjork