Is there a way so that a function calls when another is completed?
Events.DragEnd, (event, layer) ->nav.shownav.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...
How does Nav.show animate? What do you call in the function?
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.
Hey Ben Adamson - you can simply include the AnimationEnd fading animation within your functions. Like this :)
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
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)
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
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 :)
Totally makes sense now. Thanks for breaking it down Benjamin!
Benjamin, why did you use the .clip variable in declaring the movParent?
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. :-)