This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Marc Krenn
Posted Jul 14 - Read on Facebook

Hi folks,

when toying around with framer 2 back in February, I had no troubles picking it up and coming up with some cool stuff very quickly - even though I just had very limited programming experience (mostly Processing).

Going from Processing to framer.js back then was super-easy, however, Framer Studio's mandatory coffeescript is giving me a LOT of headache for the past few days.

For example, this basic for-loop is something I just can't figure out how to do in coffeescript:

for (i = 0; i < 10; i++) {
card[i] = PSD.layer[i];

Now, of course I've looked this one up on all the coffeescript-references I could find and I'm pretty sure it's related to a logic called "comprehensions". Thing is, it seems like I'm just too plain stupid to comprehend (ha!) those "comprehensions". Could someone please do me a favor and explain the following to me:

1. What's the best/easiest/most elegant coffeescript solution for my javascript-snippet written above? js2coffee gives me some - seemingly - inelegant, un-coffeescript'ish result. Can/should this js-logic even be applied to coffescript or do I need to learn a completely new concept for what I'm trying to achieve?

2. Could you please explain the "comprehension"-syntax like you were talking to a five year old?


x for x in [0..9]


eat food for food in ['toast', 'cheese', 'wine']

symbol | my best guess | js for-loop symbol

first x | the loop's "counter" | [i]
second x | I have no idea | ???
[0..9] | simplified vers. of | (i = 0; i < 10; i++)

Thanks a lot - I really appreciate your help!


Aaron Carámbula

On you'll find for loops are super east.

for layer in arrayOfLayers
layer.opacity = .5

Tisho Georgiev

Things will start making a little more sense if you let go of the notion of a "counter" in a loop. CoffeeScript's for-in loops are a way to say "with each element of an array, do this". This is what you're seeing in "for x in [0..9]", since [0..9] is syntactic sugar for generating a range-like array, which is basically [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]. So it translates to "for every number in the array of numbers from 0 to 9, do something". If you need access to the index of the current element as you're iterating through an array, you can do that like so:

for number, i in [0..9]

Now loop comprehensions are a special way of using for loops that will aggregate the results of each iteration into an array. Say you wanted an array of each number from 0 to 9 multiplied by 2. You can do this like so:

doubledNumbers = (number*2 for number in [0..9])

Loops in CoffeeScript have a few other really nice properties like filtering or stepped iteration:

// this will double all even numbers
doubledNumbers = (number*2 for number in [0..9] when number % 2 is 0)

If you'd still rather keep a counter and use that to iterate, you can use the while loop in CS:

i = 10
while i -= 1

Hope this helps!

Marc Krenn

Thanks a lot, Tisho and Aaron! :)

Marc Krenn

Unfortunately I'm still not able to figure it out. I'm pretty sure I get the idea of comprehensions now, but I'm not sure if that's the right tool for what I'd like to achieve - somehow I think I'd need a combination of "" and "for...of" :/

# Starting point: PSD-import with 10 layers (PSD.layer0-9)
# Goal: Do the following with a loop:

card0 = PSD.layer0
card1 = PSD.layer1
card2 = PSD.layer2
card3 = PSD.layer3
card4 = PSD.layer4
card5 = PSD.layer5
card6 = PSD.layer6
card7 = PSD.layer7
card8 = PSD.layer8
card9 = PSD.layer9

# ^ can be be regular objects ("card0") or an array ("card[0]")
# so I can later use them like
# card1.opacity = 0.2
# or
# card[1].opacity = 0.2

Tisho, would you please be so kind and tell me how you would solve this particular problem? Thanks!

And btw I'm not able to use the more traditional "while"-loop as a fallback solution as it's restricted by FramerStudio. Koen, could you please explain why while-loops are forbidden?

Jared Palmer

Couple of things.

1. Add this snippet right after you import from Sketch or Photoshop to access layer names more easily (credit the Carousel Onboarding example...

for layerGroupName of PSD
window[layerGroupName] = PSD[layerGroupName]

for layerGroupName of PSD
PSD[layerGroupName].originalFrame = window[layerGroupName].frame

2. For your looping/array comprehension can do something like the following:

# create an array of the cards
cards = [card0, card1, card2, card3]

# loop through the array, add the 'open' state to each card, space and animate them relative to their index
margin = 10
for card, i in cards
__ card.states.add 'open', x: margin, y:i*margin
__ card.states.animationOptions =
__ __ delay: (i*0.4)
__ __ curve: 'spring(300,28,10)'

In this example, card references each layer object and i get's you the relevant index in the array.

Marc Krenn

Thanks a lot, Jared - seems to be exactly what I was looking for.

Oh and I was looking up the ".originalFrame"-attribute(?) and it pointed me to Cemre's "shortcuts-for-framer" on github. One of those shortcuts does the same with the following line:



Talking about libraries, I have a feature request for FramerStudio, Koen.

"Procssing-like 3rd party libraries"

User puts 3rd party lib into "~/FramerStudio/libraries/ ".
In FramerStudio "File -> include library" would then let the user pick the library to include. After the selection it would have to do the following:

1. put the necessary library-files in the project folder (~/framer/)
2. adds "<script src="framer/library.js"></script>" to index.html

Read the entire post on Facebook