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

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

Coffeescript question. If I have an array:

arrows = [arrow1, arrow2, arrow3]

How do I iterate over the arrows individually so I can add a delay to their animation? Something like:

for arrow in arrows
__Utils.delay 0.5, ->
____arrow.animate
______properties:
________opacity:1

So that "arrow1" would appear first, "arrow2" would appear after the 0.5 delay, "arrow3" would appear after a delay of 1, etc..

Any ideas to help? Thanks a ton!

8 Comments

Chris Camargo

Have you tried Utils.delay (0.5 * arrow), ->

Chris Camargo

Since it's an array, it should produce a 0-based index, which would give you what you want.

Nick Bewley

Hey Chris! Thanks for posting! I tried what you have suggested above only the final arrow animates.. Maybe my implementation is flawed? Feel free to check this share link if you have a second and/or are interested: http://share.framerjs.com/s56s4cvjideo/

Fran Pérez
Kevin Velasco

Where's that closure link that someone posted earlier?

Someone will find it eventually.

Anyway, wrap your delay function in a do () -> and pass arrow into it.

for arrow, index in arrows
....do (arrow, index) ->
......arrow.animate
........properites:
..........opacity: 1
........delay: 5*index

EDIT: Found it http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/

EDIT2: actually, in this case, because there isn't a utils.delay call, it shouldn't need to be wrapped in a do.

Kevin Velasco

Also, try and use the animation class when you can. It's cleaner and easier to maintain.

Nick Bewley

Fran and Kevin that's awesome thanks a ton! Fran that is actually exactly what I was hoping to do.. Truly appreciate it. Kevin is that animation class documented anywhere? Couldn't find it on the framer site.. Appreciate you guys!

Fran Pérez
Read the entire post on Facebook