Layers-for-Framer

KO | EN

gitlite — search

#hacktoberfest #react #ai #typescript #deep-learning #macos #nodejs #java #windows #vue #awesome-list #pytorch #mcp #open-source

Layers-for-Framer

(★ 34)

Framer.js module that makes it easier to find layers in your project

Layers-for-Framer 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

New version here: https://github.com/awt2542/Select-for-Framer

# Layers for Framer.js

Inspired by jQuery's selectors, this module makes it easier to find and target layers in Framer.js. Find all layers in your project, target layers that shares the same name, create custom naming schemes for default behaviors, find layers with a certain state defined and more.
Some methods require the .name property to be set (automatically done if you import from PS/Sketch).

## Installation

1. Download the Layers.coffee file
2. Add it to the /modules folder in your project
3. Add Layers = require 'Layers' to the top of your app.coffee file
4. Use eg. Layers.containing(string) to return an array of all layers with names containing the string

More info about modules in Framer and how to install them: [FramerJS Docs - Modules](http://framerjs.com/docs/#modules)

## Methods

Each method on the Layers object returns an array with layers:

.all() - All layers in your project

.withName(string) - Layers with exact name as string

.withWord(string) - Layers with name containing string separated by underscores

.get(string) - Same as .withName, but returns the first match

.containing(string) - Layers with name containing string

.startingWith(string) - Layers with name that starts with string

.endingWith(string) - Layers with name that ends with string

.withState(string) - Layers with matching state defined

.withCurrentState(string) - Layers with match state currently active

.withSuperLayer(string) - Layers with matching superLayer

.withSubLayer(string) - Layers with matching subLayer

.where(obj) - Layers matching properties and values

The following methods are also added to your layers:

layer.findSubLayer(string) - Traverse down the tree and return first matching layer

layer.findSuperLayer(string) - Traverse up the tree and return first matching layer

## Examples

### Fade-in all layers 
	for layer,i in Layers.all()
		layer.opacity = 0
		layer.scale = .5
		layer.animate
			properties:
				opacity: 1
				scale: 1
			time: 0.5
			delay: i/20
		
### Create custom naming schemes with default behaviors
	for layer in Layers.endingWith '_drag'
		layer.draggable.enabled = true 
		layer.draggable.speedX = 0

for layer in Layers.endingWith '_btn_wip'
		layer.on Events.Click, -> 
			print "This feature is still work in progress"

for layer in Layers.containing 'person'
		layer.opacity = .5
		
	layer.visible = false for layer in Layers.endingWith '_hide'

### Switch to the "popup" state on layers where it has been defined
	for layer in Layers.withState 'popup'
		layer.states.switch 'popup'

### Travel up and down the layer tree 
	for card in Layers.startingWith 'card'
		card.findSubLayer('delete').on Events.Click, ->
			@findSuperLayer('card').destroy()

### Find layers by their current values
	layer.opacity = 0.2 for layer in Layers.where opacity: 1

Layers-for-Framer

Layers-for-Framer 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Layers-for-Framer

Layers-for-Framer 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README