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?

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},


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.

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