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

What is Framer? Join the Community
Return to index
Ash Adamson
Posted Apr 14 - Read on Facebook

Is there a way so that a function calls when another is completed?

For example:

Events.DragEnd, (event, layer) ->
nav.show
nav.hide

Currently, coffeescript seems to run both at the same time, so nothing appears to happen since nav is shown and hidden at the same time.

I would like it to hide.nav after nav.show has completed it's animation. Can't figure out how to use Events.AnimationEnd either...

10 Comments

Jordan Robert Dobson

How does Nav.show animate? What do you call in the function?

Ash Adamson

Here's the real project. http://share.framerjs.com/7ajjgxcewa1h/ After you drag down, the pull to refresh activates the Navmovreact function and animation. BUT when it finishes, I want the opacity to return to 0. Currently, any attempt I do this in code, results in no change being seen.

Benjamin Den Boer

Hey Ben Adamson - you can simply include the AnimationEnd fading animation within your functions. Like this :)

Ash Adamson

OHHHH thank you Benjamin! So now this works, it creates a new problem. :O

Essentially, movrect needs to be animating when it disappears. In the current model, AnimationEnd is called when movrect stops moving. Is there a way I can use delay or timeout to change the opacity to 0 after several seconds? How does one use this concept in code?

NavMovrect =
pull: () ->
movrect.opacity = .2
movrect.animate
properties:
x: 200
time: 3
movrect.on Events.AnimationEnd, ->
this.animate
properties:
opacity: 0
x: 450
time: 0

Benjamin Den Boer

Hey Ben Adamson! Ah yeah - I see. The easiest way would be to simply wrap it in a parent layer and animate it before the refreshing animation is finished. Here is a quick demo of how to implement it within your example: http://share.framerjs.com/w8pudm1hlv5q/

(See the movParent layer, which will be animated using Utils.delay before movrect finishes its animation)

Ash Adamson

Benjamin, thank you! Why do we have to create a parent layer, and then "wrap" this? I'm sorry, not familiar with wrap or parent layers

Benjamin Den Boer

Ah, sorry for the jargon. Let's see, well, you essentially want to do 2 animations: 1. Move a layer (refreshing bar) and 2. Fade it out with opacity. So, the thing is, you want to fade it out *while* it is animating.

This can be easily done by essentially seperating the layers / animating two layers instead of one, as long as we place the movrect layer within another layer. If you're familiar with Photoshop or Sketch, consider having a layer group within another layer group → you can adjust the opacity of the highest layer group, which will also effect the opacity of all the layers it contains. (subLayers, child layers...)

So that is the principle we're using here. We create a new layer / "parent layer" that we will later place the "movrect" ("child-" or "subLayer" in this case) within. We do this by setting the superLayer of movRect to our movParent layer. So now, movRect is contained within that layer. Finally, we set a delay of about 1 second (which has to be shorter than the animation of the movrect) to trigger the fade-out animation of the movParent. So the movRect stays animating while its superLayer is fading out.

Hope this helps to clarify it :)

Ash Adamson

Totally makes sense now. Thanks for breaking it down Benjamin!

Ash Adamson

Benjamin, why did you use the .clip variable in declaring the movParent?

Benjamin Den Boer

Hey Ben Adamson - sure thing, glad it helped. Ah, in this particular case, it's kind of easier to disable masking (clipping) on our parent layer. If enabled, it would clip the movrect layer. We could also adjust the height and width of our movParent layer to match that of the movrect layer, but since we *only* need it to fade away, it's a little shortcut. :-)

Read the entire post on Facebook