Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/martenbjork/distribute-layers
Distribute an array of layers in Framer.js
https://github.com/martenbjork/distribute-layers
Last synced: 2 months ago
JSON representation
Distribute an array of layers in Framer.js
- Host: GitHub
- URL: https://github.com/martenbjork/distribute-layers
- Owner: martenbjork
- License: mit
- Created: 2016-05-27T09:25:03.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-03-15T19:44:46.000Z (almost 4 years ago)
- Last Synced: 2024-10-03T06:52:18.314Z (3 months ago)
- Language: CoffeeScript
- Homepage:
- Size: 22.5 KB
- Stars: 87
- Watchers: 6
- Forks: 2
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-framer - distribute-layers - This package helps you position multiple Framer layers with ease. (Modules)
README
# Distribute Layers for Framer
[Installation](#installation) • [Code Examples](#code-examples) • [Full documentation](#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](https://raw.githubusercontent.com/martenbjork/distribute-layers/master/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](http://share.framerjs.com/vzfqvb042lya/) (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](http://share.framerjs.com/widmwj40jovz/) (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](http://share.framerjs.com/s8um1517do7j/) (Click “open” to view code in Framer Studio)