New version here: https://github.com/awt2542/Select-for-Framer
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).
- Download the Layers.coffee file
- Add it to the /modules folder in your project
- Add Layers = require 'Layers' to the top of your app.coffee file
- 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
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
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
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'
for layer in Layers.withState 'popup'
layer.states.switch 'popup'
for card in Layers.startingWith 'card'
card.findSubLayer('delete').on Events.Click, ->
@findSuperLayer('card').destroy()
layer.opacity = 0.2 for layer in Layers.where opacity: 1