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 .states.next 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!

8 Comments

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"].states.next (["stateA","stateB"])
layers[“inactive_download_ring_1"].states.next (["stateA","stateB"])
layers[“inactive_download_icon"].states.next (["stateA","stateB"])
layers[“active_download_icon"].states.next (["stateA","stateB"])

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

animationA.start()

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"]
properties:
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