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

What is Framer? Join the Community
Return to index
Matthew McGriskin
Posted Apr 01 - Read on Facebook

hi all,
I am just working on showing a download state. So when the user hits download the icon changes state to indicate its downloading. I have done that simply by using when the event is clicked. But I want to be able to show a download complete icon to replace the downloading icon if the download isn't cancelled. Does anyone have a way of doing this? I am sure its simple! but just not sure of the best route to go down. thanks!


Stephen Crowley

Hi Matthew, you could have your "downloading" layer overlap and on click have it display and include another animated property on that layer that has a delay to hide it after a certain amount of time?

Matthew McGriskin

Yer that sounds about right! So when I set a delay to hide the downloading icon, i am assuming i would include a delay to introduce the download complete icon? Any idea what that code is?

Ian McClure

I think better than a delay, you can create an "on AnimationEnd" event for the download status animation.

Matthew McGriskin

I have never used an "on AnimationEnd". I think i might need to only have the animation start once an event has been clicked. its looking a little something like this:

layers[“playlist_download_icon_1"].on Events.Click, ->
layers[“active_download_ring_1"] (["stateA","stateB"])
layers[“inactive_download_ring_1"] (["stateA","stateB"])
layers[“inactive_download_icon"] (["stateA","stateB"])
layers[“active_download_icon"] (["stateA","stateB"])

animationA = new Animation({
layer: layers[“download_complete_1"],
properties: {opacity: 1},


Ian McClure

Can you share your project, so we can see that you are doing better?
The other thing is that I was assuming you had a download progress bar and that the AnimationEnd event would fire off that.

Matthew McGriskin

I can't i am afraid, it is a potential prototype to showcase an interaction to a client. Sorry a pain i know.

Ian McClure

So based on the snippet there, when you are making the active layers visible and the inactive layers hidden and you are fading in a download complete.
How you have things right now, I do think that adding a delay to your animation would do what you need. I say that because from what I can see none of the four layers that change states have any animation to them.
Delay is a property of an animation block. It makes the animation fire one second later. Looks like this:

animation = new Animation
layer: layers["download_complete_1"]
opacity: 1
delay: 1
Do any of your state changed have an animation to them?

Matthew McGriskin

yer that works well. I think i just need to figure out how to call that animation only when the download icon has been selected.

Read the entire post on Facebook