SIMPLE Animation in Figma

And we're going to go back. Oh, actually, let's go ahead and command. Click our letters. We're going to move them out of the frame view. And now we're going to select these container frames and we're going to hold command and we're going to move these out of the way like so. And our prototype details are still in place. So now we should be able to come back here and see hit R to restart it. And now we can see this is animating just like we want it to. It's not too different than what I've got going on here. The only other difference is that I've got these growing from the top, but I'm using the exact same method for this other stuff. So if we wanted to pop one in real quick, let's just do this 200 hit shift A. Let's take that color. Actually, the color is background on that. And then I'm going to change. Change that a little bit around these corners. I'm just going to draw a line right here. If I hit command Y, I can see the line there. I want to grab this frame like any of these frames that has the stroke added. And I'm going to hit command option C. That way I can grab my stroke. And now hit command option V. And it's going to paste that same style onto that line. So now you can see that it popped in that stroke that I need. And I want to line this up to where it's in the middle of one of these. I don't want to just align it to the middle of the box. I don't want to mistakenly add this here. I want it to terminate right in there. And then I'm going to Horizontally center this 200 with that line, I think. I did not do dash lines. I thought it looked better with straight line. You can position this wherever you want. I did 20 from the line, I believe. And so now we're going to take both of these. We're going to hit command option G. We're going to call this left. And again, we want this to be clipped content because we want the same thing to happen. But notice that this line is now gone away. So we need to hold command and going to We're. And we need to bring our frame out right there to include it. And I also don't really want this line to terminate right there. I want it to go off the edge. So I'm just going to bring that out a little bit. All right. So I've got my left line. We Also need our gray line as well. So let's go ahead and create it by. This is actually why I ended up with the guide frame, because I didn't want a bunch of just random guide pieces everywhere. So we got that. Actually, we don't even need. We don't really need to move that down. What we can do is grab this individual line and we can just copy it by option, dragging it. So if we hid all of these and then we just made this stroke this simple. Two, just so we have a little bit of a reference to go back and forth. All right, so I'm going to go to the prototype tab and just drag that over there. And it copied the previous interaction from the other document. So I'm going to go ahead and remove those. There we go. So I'm going to just grab this little node and bring it over there. I want to change this to after delay. I'm going to hit zero. It's going to change it to one millisecond, which is fine. And I want to make sure this is at smart animate. And we'll just leave that there. And we're going to repeat the process to go back to this one, change it to after delay 0,3 milliseconds. We probably will go back and add. And change this a little bit. We're going to bring this down so we can see it a little bit more clearly. I don't know. We'll leave it. We'll leave it as it is. All right, so let's hit play and see what happens here. So you can see the bee is bouncing in and out like a madman. So that's not exactly what we want, but it is a start. So now. So if we look back at this one right here, you can see it comes out, it stays for a little while, and then it goes back in. And it's not going super fast because you almost want to tease out the animation a little bit. And that one's going just a little bit too chaotic. So all we have to do here is get in and start tweaking our interaction. So maybe we wait 300 milliseconds, maybe we spend 600 milliseconds animating, and then we add those same parameters to this one as well. So we're going to wait 300 and then we're going to animate 600. So now we're going to go back and we can see. Boom, it's going back in. The animation is a little better, but it's still not waiting long enough. So what I want to do is now click both of these. Click interactions. And I want the delay. I'm going to actually go 1200 milliseconds. I'm going to go back. So there we go. That's not too bad. Now we can play around if we wanted to and we could go maybe ease in and out, see how these different things are working. Can go back and change. Look back at this one. That's about the same speed. So now if we wanted to create that, the gray stroke effect, we are going to need to grab this. So a lot of times you might get this figured out. And as soon as you want to add or change something, it becomes a little, a little bit more difficult because you have to do it in both frames. Every frame needs. Needs exactly the same layers, period. So you can't go change one frame and not change it in the other. And a lot of times it's better to change it in the ending frame and then go back and redo your first frame. So that's what we're going to do here and I'm going to show you why. So I'll just leave that one for now and let's come back here and I'm going to duplicate this frame and we'll call this my guide. I'm going to temporarily move this over here. I want the guide to not have a B in it. And I want this red to be more of a gray. So I'm just going to change that to a gray. And so if we didn't do anything at all to this other frame, let's just look what happens. The B is going to still animate, but now the position of the frame is animating. And because this frame doesn't exist in the previous frame, it's just going to fade in. That's going to be the default if it doesn't exist. Now, you can use that if that's something that is desired, but that's not what we're trying to go for here. So let's go back. So I want to center this directly on top of the guide. And over here I'm going to paste the guide in. I'm going to send it to the back. And now I want this frame the same way that we're hiding the bee with a mask, with a frame border, the clipped mask. I'm going to do the same exact thing with this stroke. And the easiest way for me to do that is create another frame around that B frame. Because this frame has the stroke. This frame is now going to be clipping the content. But you can see now we're clipping off part of the stroke, and we don't have a parent frame on this other one. So we're going to have to be careful with how we handle this. So I don't want to go too much further with this frame because I think it's important to start with your ending frame. So I'm actually going to delete this because it's just. It's going to be too messy. So now that I know that I want to animate this frame, I'm going to create another frame around this B. I'm just going to do parentheses B, so I know it's like a B container. All right? So I want this one to clip the content, and then I need to hit command option and drag this out at least to right there. So if I hit command Y, you can see that this frame is here, and that is the one that is setting stroke. And then this frame is on the outside. So now if I change the width of this frame, I'm just holding command and moving this around. You can see how it's getting the stroke and the B all together. See, this frame right here is clipping the B. So you could make a decision whether or not you wanted that to clip or not. But all of these little tiny details go a long way in trying to figure all this out. But this is going to be the ending screen. So I don't actually want to do all this right now. I'm just setting up those pieces right now. So now let's option drag this over here, call this simple one, and let's move our B back out of position. And what we're going to do now is grab this container and we want to pull this all the way back out. But you'll notice you can't make a frame less than 1 pixel. So we're going to have to come all the way out this way if we want to make it fully invisible. We took the exact same frame structure from the ending animation piece and we put it into the first one. And now we can just go back and see what that looks like. Oh, you know what? We actually, we deleted our interaction. Probably shouldn't have deleted that. So now we need to go back and add it back on. That is a good case for potentially just deleting what's inside of the frame versus the entire frame that is gone. And we're just going to. We're going to add this back. And sometimes this can be. Especially if you'd already made Those adjustments and maybe you didn't remember what they were. Set this back to ease in and out. That's there. So now we're going to test this again. Hit play. Let it build. And you can see our stroke is animating. That's how you do that particular one. If we really wanted to. What I would do, if I wanted to add the other letters, I would go ahead and delete the stuff out of here. And then we would make our updates inside of here. So we're going to line that up. So this is going to be. Let's call this. We'll call this one O and we'll call this one X. And then we're going to select all of these, create another frame and call it guide. See what we got there? And then we're going to turn this one into the O. And we want to make sure that we update these layer names because like I said, it's going to look for similarly named items when it's smart animating between frames. So we're going to put that there and we're going to duplicate it and then we're going to put an X on that one. Update these layer names. Why do I have two O's? Okay, I duplicated that one too many times. So we got B, we got O, we got X. And then I'm going to select all of that just to tidy things up a little bit. And that's why in the previous one I had guide and content. I might make this one a little bit darker, something like right in there maybe. And then I'm going to center that. So now I've got all of this. We've got the guide and the content. So now I'm going to copy both of these frames and paste them in here. And the guide is going to stay. So we don't need to touch that. So I'm going to lock it just so I don't mess anything up. And then I'm going to command, click down onto the letters and I'm going to nudge them all out of their frame. Actually, they're still in the frame. They're just out of the frames view. And because we have preselected clip content on every one of them, then it totally works. Now I'm going to select these and I'm going to command. Make sure you're holding command when you do this. If you grab, if you don't move the command or if you're not holding command, let me just go back and show you what happens. For example, so if we started changing this, see how the B is like moving around and that's not what we want. So if we hold command, even if that is set to center, it's not going to move things around. So it's really important to hold command while you change this. These. So remember, we're not changing the box of the bee itself. We're changing the container that has the stroke. So we're going to pull that while holding command all the way to the other side. Okay. And I see a mistake here. See how this is not quite lined up? That makes me know that I have that same mistake potentially over here. Yep, you can see those squares. So if you notice that you mess something up, you got to start over because your animation is not going to work if everything's not on point. So let's do a little investigating here. I'm going to actually, I'm going to call these guide X, guide. Oh, and guide B, just so I don't get confused. One thing that you can do a little hack here is select all these and hit shift A to create auto layout. And then you can use either negative or positive values to adjust how it needs to be. I'm going to use negative because I want. We have these four pixel strokes and I don't want to see both boxes strokes, I want to see only one of them. So we need to go negative four and then I can do the same thing with this one. These actually don't have to go negative because they don't have that extra padding to incorporate the stroke. So they are good to go. But I want to make sure that I ungroup these frames, these auto layout frames, because if you try to auto layout something and animate something inside of an auto layout frame, it's not going to work very well. So on this one, let's just double check that we're good here. So that one looks pretty good. I'm not going to worry about putting the content and the guide frames back in right now. I'm going to just paste them in this and same color as that. Then that becomes part of the guide and we could go back in here, command option G and do guide right here. Just to keep things nice and tidy. However, we would need to make sure that we go here and delete these guides out and then paste those guides in, send them to the bottom. Also want your layer order to be the same if you can help it. And so now we want to copy this left piece over here. The way I did this was I wanted this thing to Hide behind there. It's still in the frame, but it's. We didn't pull it completely out of the frame. We just nudged it where it was not in the frame view. And then for this line, I have these growing from the actual left edge of that B, because I thought it would be cool to have all of the same color kind of originating from the center point. See how this is pulling in? It's all kind of originating from that point from going right and left. So all we're going to do is pull this back across and make sure that we go all the way to the other side so that none of the color items are showing. And now we're just going to hit play and let it build again. And there you go. So we would just repeat the same process to create the top and the side and the bottom. And that's pretty much it. Now, for these other ones, it's the same exact concept. So I'm building out this screen with a bunch of rectangles or frames, and then I'm just kind of haphazardly placing them somewhere else and setting those same animation delays. This one is really similar to the first one, where I've got two different layers, one with the guide, like the rectangles and everything. And then the other one, I have the design underneath. And I'm just using that frame. I'm animating that clipped content frame over the top of this one. So if you go over here and you look at this, these particular frames, you can see that I've got outline mode here, this frame. And so if I hold command and I drag it, you see that it's what's getting revealed. So I'm really just making use of these clever little clipping masks, and I'm moving things out in and out of the frame view, and I'm using those clipping masks to make sure it kind of all comes together. This one's a little bit different. It's not really using masking. It's just kind of stretching objects. But the concept is still the same. So make sure that you have similarly named layers and that you are experimenting every time you make a small change. Go back and test that preview, the little the preview build up there as you make changes. And if you have to kind of delete what's in a frame because you made a change in the resolving animation or you had a new idea, just go ahead and delete it and then bring that back over and you'll end up with a pretty cool animation. If you want to see stuff like this throughout the week. Make sure you're following me on Twitter. I'm DS if you want to see more videos like this, more video breakdowns, make sure you hit that subscribe button. Drop a comment below if you have any questions. And until next time, I will see you in the next one. Sam.