Add a few animations to enhance our application. Use the animate function inside of your interactions.
- [Instructor] Our prototype is now finished. But it's missing some final touches that could bring it to the next level, especially for our contact Detail view. Let's get to it. First thing I want to do is create a new layer, and we'll do it right above the detail_view. We'll call this the modal.background, and it's going to add a really nice touch to it, so whenever you use iPhone, for example, and you click on the modal view, sometimes the background kind of dims and turns black.
Well, this is what we're going to do. We're going to bring the Detail view into the screen, and then, while we're doing that, there's going to be a layer that will kind of go over everything else so it looks nice. You can see right away what it's going to do to the background. This layer will have a width of 750, height of 1220, like so, and an opacity of zero to get started with, because we don't want to see it from the get go.
Then what we'll do, we'll use a function in Framer that's called placeBehind, because if you bring it back into view, so let's bring it back, you see that it goes just a tad over that button here, so that doesn't look good, so we'll make sure that it goes behind that particular button. There's a function in Framer that you can put something behind or before, so we'll do exactly that. We'll use modal.background, like that, and do the function placeBehind, and you can see what kind of functions we can use as well.
There's placeBehind, placeholder, placeholderColor, placeBefore, when you start typing place. We want to do placeBehind, and do placeBehind add button, like so. OK, perfect. The next thing we want to do is add a little bit more magic to our animation. Let's go to our very basic animation here, and do some of the stuff. With the animate function here, there's multiple options that you can add.
If you're familiar with all the terms of animations, so Bezier curve, you can do spring and so on and so forth. These are all available on Framer, and you can take a look at the documentation to get a little bit more information around those, but there's plenty of options. We'll use a few of those in this code. Do options, and then the curve that we'll use is the spring, and we'll do a damping of 0.6.
You can look those up, damping will basically give you that spring effect. Let's go ahead and demonstrate instead of just explaining it. If you're like me, you're visual, you like to see things, and I'll do that in a second. We'll also animate the modal. The modal background will be at an opacity of one. When we click on the people list, we'll have the detail view popup with the spring, and then we'll have the modal background animates with an opacity of one, which will kind of cover that screen here to do that effect that I was explaining earlier.
Let's click on this. As you can see, the screen is covering our stuff. We had the nice spring and let's hide it away, and increase that spring to nine, for example. Let's press and you see it slower. I like it when it's just spring, so if you put it at one, it'll be much faster. It's almost elastic effect.
I really don't like when it's really that fast. I think six is the best representation of what we'd like to have. OK? What we want to do after that is basically copy and paste the same code across and then make some very minute change. Let's copy and paste first, like so. What you want to do for the close corner, you only want to have the opacity changed to zero, and then your Y to 70.
For this one, we keep it that way, and we bring the opacity to zero, and then for the last one, we want to do opacity at zero as well, and then everything else is the same. Let me validate that everything is good. I think I put the time to one in the past and I liked it very much, so let's do that. It's going to make the animation just a little bit smoother. Let's test this.
Again, these are all aesthetic choices, so pretty much like CSS, you can make your own choices, you can change some of these, you can decide to start from further or arrive a little bit lower on the screen. You can play with this as you like, and it's going to make this prototype yours. Let's click on this. Let's click on the X. Something isn't working, so let me just make sure, it's probably one of my value.
When we close the corner, it should not be at 70, it should be at 1370, like so. OK, now it's going to work. OK, good, spring. Get out, spring again, and go to Edit, and my overlay is still there. This is the Edit section, and it shows me in there right here.
The Edit section, actually, you need to put that at the end, because the options for the animation are going to go over that like so. We should be good now, okay. Let's go ahead and do that, Edit, we're good. Let's go back, boom, delete, and we're back. The only thing that doesn't seem to be up to my liking is the button here.
Let me just take a look at the top here to make sure that we are doing the right stuff, add the form button. OK, so I know exactly what just happened here, so it's not the add form button, because that's the add button here, so that's not what I need behind. What I need behind is the add button, like so. Save, click on this, we have the layer that's behind our button, we click, it's gone, click again, we edit, everything's good.
Let's go back to our main view. We click, we delete. Beautiful. Let's go back again and close it, awesome. That looks better. Let's move on.
- Researching UI colors, styles, and fonts
- Using assets available in Framer
- Creating views
- Adding navigation
- Using classes and loops
- Importing a module to extend Framer
- Creating inputs
- Adding a detail view
- Adding final interactions
- Animating a popup
- Animating a function