Learn Framer animation in 8 minutes (step-by-step)

Whatever software you're using to design your icons, illustrations, and logos, the hard part is actually bringing them to life with some animation. And a lot of software can have a pretty steep learning curve. But this is where Framer makes things ridiculously simple. And I've partnered with Framer for this video to show you how to set your files up correctly, how to animate your designs with a few different styles, and then how to get the animation working inside a real website. Now, whilst you can use frame as design tools to create your graphics, you guys know that I use Illustrator a lot. So, I'm going to start with my graphic in Illustrator here. And you'll need to separate and group the different elements together into bits you want to animate and bits that you don't. Now, these video players you can see me waving around here. I want those to scroll across the screen. And I'm going to rebuild those in Framer. So, we're going to get rid of them from this file. And then we need to select and export the different assets so we can bring them back into Framer. And I'm going to export these as SVG files. This stands for scalable vector graphic. And to be honest, a lot of design software should let you export as an SVG format. So, we've done that for the light bulb. Now, we're going to do it for the laptop and the other elements that make up the desk setting. Okay. Next, we need to import all of these different pieces into Framer and set up everything so it's ready to be animated. And fortunately, this is super simple. Find those SVG files. Uh, I'm going to rename them first. So, we'll go with bulb and we'll call this one base. And then all we have to do is simply drag these files into Framer. So we'll drag them in there. And let's get rid of this window. Now the frame size I'm using, that's the artboard or canvas. That is the same size as the space on my website. So that will make a bit more sense later on. And we've popped it in the center. And now I'm just going to go down to the layers. So I've got these two groups here. And we'll give these some appropriate names, bulb and base. And now what we're going to do is grab the rectangle tool and we're going to draw out that screen area. And the reason I'm doing this bit in frame is because I want to use that as a clipping mask. And we'll come back to that in a minute. So we're getting rid of the fill and we're going to sample the same color for the stroke. And then let's duplicate it and I'm going to resize this one and effectively rebuild that video player graphic in center. Now this graphic is made up of two different stroke weights, one and two point. And you can also edit a lot of the properties of an SVG file in Framer. And you'll see that in action a bit later on. But for now, I'm creating a polygon. And I'm going to change the number of sides to six. And round off the corners ever so slightly. And of course, we're going to get rid of that fill and add a stroke with the same color and the same thickness as the other elements. And of course, let's rotate you around and pop it in the center. And lastly, I'm going to grab the path tool just to add a line along the top. So it makes this window look like a browser of sorts. And again, same stroke weight, same stroke color. And honestly, you can't really tell which bits were Illustrator and which bits were framer at this point, which makes this whole workflow super seamless. Now, it's time to animate. And honestly, this couldn't be easier. And first, we're going to start with a simple loop animation. So, first I'm going to select all of the shapes I just created and then group these together with command or control G. And let's give said group a name. And then we need to duplicate this with command or control D. And then holding shift and using the left arrow key, I'm going to nudge a copy out to the left. We're going to do another copy to the right. Another one to the right. And another one to the left. And this is so our loop animation is completely seamless. Now let's select all of them and group them together as well. And give the group another name. Now that first rectangle I made that is effectively the screen, we need to rightclick this and add a frame. And this is very important because now we can drag the windows inside that frame. And if we then select the frame layer, we can go over to the right hand side. And then under overflow, we can change this to clip. And this effectively masks the content inside the frame. And to see the whole stroke, we're just going to have to change the alignment to the inside as well. And there we go. That should be set up correctly. So if I now go and select the windows, I can move these left and right. And you can see they don't go outside of the frame that they are clipped in. Right. All right, let's name this frame as well. And this is a good habit to get into naming the layers things that make sense, just so you don't get confused like me. And I'm also adding a frame to these other groups as well because we're going to need to use frames to be able to add the animation effects later on. So most of these groups are now framed. And we've named all of our layers appropriately. And to animate this, we need to select all of our frames, press command or control C to copy, and we need to add this to a live page. And you have to do this to be able to access the animations and effects. Right now, what we're going to do is twizzle this down and select our Windows frame. And then we're going to go over here, go to effects, click on the plus, and we have lots of different types of animation here. And we're going to start with loop. So, we click that. And we get a window pop up with loads of settings. And let's get rid of 360 because that will make things go a little bit crazy. And we can adjust the X and Y offset values to move things horizontally or vertically. So you can see here I've shifted this along. And under transition, we can play around with a few settings. We'll come back to these in a minute. But we can also adjust the time in seconds. So I want this animation to play out over 2 seconds. Click play. And you can see we now have a looping animation. Now for the light bulb, we're going to use a similar animation. And this will make it levitate, moving up and down indefinitely. So let's go ahead and select our light bulb. Just make sure that you do select the frame in the layers panel. That's quite important. And then we can go back to effects. Now again we're going to choose loop. But there is another one that we can select. And that option is going to be mirror. First of all, let's get rid of the 360 rotation and then go and choose mirror up here. And this one will play out the animation and then reverse it as well. So let's go and adjust the offset here for the Y value. And we can move this up or down. And then for the transition, we don't really want a linear one because this will look a bit too rigid. So, let's go and choose an easing like ease in out. This will be nice and smooth. And then if we go and click play to preview, you can see just how easy this is. And we have our levitating light bulb. Now, to make it feel more like it's part of the graphic, I'm going to move it down a bit. But you can see obviously we've got transparency in there, which looks a bit weird, but we can double click the icon and select the individual part of the SVG file. And then I can go and adjust those properties over here in Framer as well. So, if we now give this a solid white fill. In fact, while we're here, let's select the orange as well, and we'll give this a really cool gradient. So, let's go and change this for like a a lighter color. Maybe like a orangey yellow. Yeah, something like that. And you can also adjust the gradient directly on the canvas as well by clicking and dragging on these two control points. There we go. I think that looks pretty good. Let's give this one a play. And we can now see it hovering over and in front of the laptop. And honestly, these animations, they look so good and they're so easy to do. And lastly, we can actually apply another type of animation to the entire graphic as a whole. And this is perfect if you want to build something that's perhaps a bit more complex and then add a hover animation to the whole thing. So let's select all of the frames and then add another frame with the keyboard shortcut command or control and return. Let's give this another name, master frame. There we go. And on our master frame, if we go over to the right again, we can add an effect. And this time we're going to choose hover. So when a user hovers their mouse over this graphic, we can set here exactly what happens. So, by default, we have a slight increase on the scale, but you can, of course, adjust other properties. And then when I mouse over, you can see the scale goes up, mouse off, the scale goes back down. And lastly, we're going to take the finished animation and we're going to add it to a live site. My site, in fact. So, I'm going to try my best not to break anything. Don't break the website, Dan. So, let's go and select the master frame. I'm going to switch over to my website here. And I've replaced the old graphic with a gray rectangle. You can see that here. So, I'm going to paste in my master frame. And then I'm going to drag this so it sits just above the rectangle. So, let's put it up here. Yeah, just so it sits inside promo box. And if we then go to hide that rectangle. And if we go and give this a play, you can see this in action on the site. And it's literally that easy to play around with this and build it in a separate file and then copy and paste it to your live framer site. And if you'd like to give Framer a go, you can use the code dansky with the link below to get a free month of Framer Pro. And if you'd like to learn how to use Framer's design tools to create icons, illustrations, and logos, then this video is the one to watch next.