Animations

Using Hover and Press Effects in Framer (Animation Lesson 2)

Joseph

5:42

37K views

Jul 9, 2025

About this lesson

Let’s start with the basics — how to make things feel alive when visitors interact with them. Hover and press effects are small touches that make a big difference — by giving visitors tangible feedback that makes it super clear if something is clickable in the first place — and if they’ve clicked it successful. In this lesson, we’ll walk through how to create these two effects in Framer in just a couple of clicks.

Grab the remix link here: https://www.framer.com/academy/lessons/framer-animations-hover-and-press-effects

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=0s Intro

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=5s Why hover and press effects matter

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=19s Jumping into the Framer project file

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=43s Starting with the hover effect

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=62s Choosing and previewing hover settings

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=96s Adjusting transition with spring physics

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=150s Finalizing hover effect settings

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=174s Previewing the hover effect

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=195s Introducing press effects

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=219s Adding a press effect in Framer

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=235s Scaling for a pressed state

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=255s Matching spring settings to hover

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=266s Previewing the press effect

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=279s Adding rotation to the press effect

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=301s Final preview with rotation and scale

https://www.youtube.com/watch?v=ZzK8E-qEwo8&t=356s Wrap-up

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Let's start with the basics. How to make 0:02things feel alive when visitors interact 0:04with them. Hover and press effects are 0:07small touches that make a big difference 0:09by giving visitors tangible feedback 0:11that makes it super clear if something 0:13is clickable in the first place and if 0:15they've clicked it successfully. In this 0:18lesson, we'll walk through how to create 0:19these two effects in Framer in just a 0:21couple of clicks.0:26To get us started, I'm going to jump 0:27straight into our project file here,0:29which you'll find if you're watching 0:30this video on framer.com/academy 0:34right below the video. I'll include a 0:35remix link there for you. If I scroll 0:37down in this project file, you can see 0:39that I've got some examples here for us 0:41to work on. And we're going to start 0:43with hover. So, to add the hover effect,0:45I'm going to select this layer. And this 0:47layer is just a frame with an image 0:49fill. And I'm going to head over here to 0:50the properties panel and head down to 0:53effects. Now, when you click here to add 0:55an effect, you'll find that there are 0:56quite a few of them. And by the end of 0:58this course, you'll be familiar with 0:59every single one of them. But for now,1:01we're going to start with the hover 1:03effect. And when I add the hover effect,1:05I get this little modal where I can 1:08choose how I want this layer to appear 1:11when the cursor is hovered over it. So,1:13what we're seeing on the canvas here is 1:15a reflection of the settings that we 1:18modify here in the modal. So, for 1:20example, if I bring our scale up to 1.3,1:23you can see that it's now 1.3 times the 1:26size that it was before on the canvas.1:29But we're only seeing that on the canvas 1:30because we have the hover effect modal 1:33open. So, we can preview the effect that 1:35we're creating as we create it. I could 1:38also set an offset if I want to and have 1:40the layer move on hover. I could have 1:42the layer rotate a little bit on hover.1:45And let's actually do that just to make 1:46it more obvious, make it more drastic. I 1:49can play with the opacity. You can see 1:50all the properties here that we have to 1:52play with. And then finally, we have the 1:55transition, which determines how the 1:57movement actually happens. Now, the next 2:00lesson is where we're really going to 2:02get into transitions and master the 2:04different easing curves that we have 2:05available to us. So, stay tuned for that 2:08one. But for now, we'll probably just 2:10stick with a basic spring. I'll set this 2:12to a physicsbased transition. And uh I'm 2:16going to bring down the stiffness quite 2:18a bit here to sort of let this thing 2:20wiggle. And I'll bring the mass up a 2:23little bit. And again, we're going to go 2:24over all of this in the next lesson. So 2:27don't worry too much about what all 2:29these properties mean cuz we're going to 2:30go through them one by one. But now,2:32essentially, we've decided that on 2:34hover, we want this layer to grow to 1.3 2:37times its original size or 130% is 2:40another way to describe that. And we 2:41also want it to rotate 20°. And we also 2:44have a toggle here between 2D and 3D 2:46rotation. I'm going to stick with 2D for 2:48now, just so we rotate on that Z-axis 2:51only. But really, the fun comes from 2:53previewing this. So, I'm going to close 2:55the modal. I'm going to press command P 2:57on my Mac to go into preview mode here.2:59And we'll scroll down and find that 3:01layer. And when I hover over it, there 3:02we have it. It's doing that spring 3:04effect. And it's returning back to its 3:07default position when I'm no longer 3:08hovered over it. So, on hover, we get 3:10that transform that we created. And when 3:12we hover away, it goes back to normal.3:15It's that simple. Press is very similar,3:19except the triggering action is going to 3:21be clicking down the mouse button or 3:23pressing with our finger on mobile 3:25instead of just hovering the cursor over 3:27it. And naturally, hover is specific to 3:30desktop where we actually have a cursor,3:32whereas press applies to both desktop 3:35and mobile. So, I'm going to go back to 3:38our design canvas here. I'm going to 3:40select this layer and I'm going to go 3:42back to the effects section on the 3:43properties panel. I'm going to click and 3:45this time I'm going to choose to add a 3:47press effect. So in this case the 3:50defaults are a little bit different.3:51You'll notice that it's scaled to 0.9.3:53It actually scales down instead of up by 3:55default. And that's to kind of give the 3:57effect of pushing the thing in. It's 3:59pushing away from us. So it's getting a 4:01little bit smaller. So I'm going to run 4:02with that. I'm actually going to let 4:04that scale down to 0.8 or 80% of its 4:07original size. And uh I'm going to leave 4:09these things alone for the most part 4:11except maybe the spring. Maybe I'll set 4:13the spring to similar settings that I 4:15did for our hover here, which I believe 4:17was around 200 for the stiffness.4:19Damping I think I left at 30. And mass 4:21I'm going to double to two. And again,4:24I'll dismiss that modal. I'll press 4:25command P to go into preview mode here.4:27And now when I hover, nothing cuz again,4:30we set this interaction to be on press.4:32When I click, there we go. When I click,4:35we see that effect taking place. And I 4:38think in my example, I had this rotating 4:4090 degrees as it pressed as well, which 4:42I thought was kind of a cool effect. So,4:44at any time, we can select this layer 4:45again. We can go back to the effect 4:47modal here, and we can say, yeah, let's 4:50rotate this 90° as well. And let's see 4:54what that looks like. Again, command P 4:56on my Mac to go into preview mode.4:57Control P if you're on a PC, by the way.4:59And there we go. Now, we've got that 5:01rotation happening with the scale as I 5:03press. And hover again happens as soon 5:06as the cursor mouses over it. And there 5:09you have it. With hover and press 5:11effects in place, your sites will 5:12immediately feel more tactile and alive.5:15And they don't just make an experience 5:17more visually delightful. These effects 5:19are subtle cues that help visitors 5:21navigate with even less effort. Again,5:24great interactions aren't just about 5:26motion. They're about meaning. That's it 5:28for this one. I'll see you in the next 5:30one.

TeachesHover & Press

Also coversCustom Cursors Frames Links Remix Links Transitions & Easing

Watch on YouTube ↗

‹ Framer Update: Search for Pages, Layers, and Assets

Bringing websites to life with animation in Framer (Animation Lesson 1) ›