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

What is Framer? Join the Community
Return to index
Nick Bewley
Posted Oct 23 - Read on Facebook

Trying to iterate through an array of layers and animate them with a delay between each animation.

If I have this array:

stuff = [ly.stuff1, ly.stuff2, ly.stuff3, ly.stuff4, ly.stuff5, ly.stuff6]

How can I iterate through this array to send each layer to x:0 with a delay of 0.2?


stuffAnimation = ->
for user in stuff
Utils.delay .2, ->
x: 0

Only animates the last layer ("ly.stuff6"). Not sure why.. ? Any other approaches that would be more effective would be appreciated.. Thanks for your ideas!


Ces Cortez

I think it's a closure thing. Try using forEach instead of for/in. So something like
stuff.forEach (i) ->

Emanuele Salamone

when i need to access objects within an array together with their index, i do the following: (underscores are for formatting!)

for i in [0..stuff.length-1]
__Utils.delay 0.2*i, () ->
________x: 0

also notices that you don't need Utils.delay for delaying an animation.
Animations already got the delay parameter, so you can do something like this:

for i in [0..stuff.length-1]
____delay: i*0.2
______x: 0

Nick Bewley

Yes. Thanks a ton guys

Ally Colquhoun

Hey guys

Ally Colquhoun

I'm trying to use the code suggested above but am getting errors. I see your answers were written over a year ago so am wondering if it's because Framer has changed since you posted.

Ally Colquhoun

From what I can tell, it's not working because of the 0.2*i or i*0.2 in the delay setting (for either Utils or animate). It returns the length of objects in the array. So if you have 3 objects the 'for' loop returns the number 3, three times, but only when you use the delay setting, it works fine without a delay. This actually causes an error in the function because an index of 3 is undefined, the array being [0, 1, 2] for three objects.
I'm not sure if I'm explaining this very well :-\
Would really appreciate your help if you can.

Nick Bewley

Can you post a small example file to illustrate your problem Ally?

Andrew Nalband

Hi Ally Colquhoun - is this what you're looking for? You can get the index value of the layer in your array and use it to determine any other values. I'm using x position here, but the same technique would work for Utils.delay

Ally Colquhoun

Hi Andrew & Nick, thanks so much for getting back to me so quickly!
If you open this project you'll see I've setup 2 tests running almost the exact code that Emanuele produced above.

Test one uses the Util.delay. You'll see the first console log produces the required results, but when placed after the Utils.delay method it goes a bit pear shaped :-\

Test 2 is calling .animate instead of Utils.delay. I've just realised you don't even need the delay for the same error to happen.

Marc Krenn

Ally, this thread from yesterday might be of relevance:

Ally Colquhoun

Awesome thanks Marc Krenn, that's solved it for the Utils.delay method. Still can't get it to work with .animate though!

Ally Colquhoun

Here's the (partial) solution:

Andrew Nalband

Hi Ally maybe it's just me but I'm unclear on what you are trying to achieve

Ally Colquhoun

Hi Andrew, I'm just try to achieve exactly what was asked in the original post. My query was that the provided answers (in 2014) did not work for me.

Ally Colquhoun

Andrew, I've just taken a closer look at the example you provided. At first glance I thought you were mis-understanding the problem I had, but on closer inspection your solution is spot on! The answer was in the way you push each layer to the array. I was just typing out the array as in myarray = ["this", "that", "theother"] which doesn't work. Thanks so much!

Andrew Nalband

Ah ok, actually my solution doesn't work for Utils.delay because it's delaying the call of the animation until after your for loop has already completed and because of scoping it no longer knows what the layer was that you wanted to animate

Andrew Nalband

You probably want something like this

Ally Colquhoun

Haha, yep, spot on again. Now I have a few ways to solve my original problem. You're awesome, thanks Andrew Nalband

Read the entire post on Facebook