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, -> user.animate properties: 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!
I think it's a closure thing. Try using forEach instead of for/in. So something like...stuff.forEach (i) -> stuff[i].animate...
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, () ->____stuff[i].animate______properties:________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]__stuff[i].animate____delay: i*0.2____properties:______x: 0
Yes. Thanks a ton guys
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.
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.
Can you post a small example file to illustrate your problem Ally?
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 http://share.framerjs.com/02g5mtv6jmgf/
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.
Ally, this thread from yesterday might be of relevance:https://www.facebook.com/groups/framerjs/permalink/752692391524501/
Awesome thanks Marc Krenn, that's solved it for the Utils.delay method. Still can't get it to work with .animate though!
Here's the (partial) solution:http://share.framerjs.com/1meg92bmp1ma/
Hi Ally maybe it's just me but I'm unclear on what you are trying to achieve
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.
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!
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
You probably want something like this http://share.framerjs.com/esb01xpcse8z/
Haha, yep, spot on again. Now I have a few ways to solve my original problem. You're awesome, thanks Andrew Nalband