Animations

Using the Drag Effect in Framer (Animation Lesson 5)

Using the Drag Effect in Framer (Animation Lesson 5)

Using the Drag Effect in Framer (Animation Lesson 5)

Joseph

·

5:34

·

15K views

·

Jul 23, 2025

About this lesson

The drag effect lets visitors reach right in and grab elements on the page — by making elements physically moveable in the browser. It might be more playful than functional — but one things for sure — it’s fun. In this lesson, I’ll show you how to make any element draggable with just a couple of clicks.

Grab the remix file: https://www.framer.com/academy/lessons/framer-animations-drag-effect

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

https://www.youtube.com/watch?v=lbYuJzFfmXE&t=7s What is the drag effect?

https://www.youtube.com/watch?v=lbYuJzFfmXE&t=28s Setting up drag interactions

https://www.youtube.com/watch?v=lbYuJzFfmXE&t=48s Restricting drag directions

https://www.youtube.com/watch?v=lbYuJzFfmXE&t=67s Using boundaries

https://www.youtube.com/watch?v=lbYuJzFfmXE&t=87s Adding elasticity and momentum

https://www.youtube.com/watch?v=lbYuJzFfmXE&t=112s Final tips and wrap-up

Sign up: https://framer.link/yt

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

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

0:00The drag effect lets visitors reach 0:02right in and grab elements on the page 0:04by making elements physically movable in 0:06the browser. It might be more playful 0:09than functional, but one thing's for 0:11sure, it's fun. In this lesson, I'll 0:14show you how to make any element 0:15dragable with just a couple of clicks.0:18[Music]0:21For this one, again, we're going to be 0:23using that same project file that we 0:24used for the previous couple of lessons.0:26So, head to framer.com/academy.0:29if you're not there already and grab the 0:31remix link from the description below 0:33this video. So, here in this project,0:35we've got our examples down below. We've 0:37already knocked out the first three and 0:38now we're on to the fourth. And what I 0:41want to do here is make this element 0:44dragable. So, with it selected, I'm 0:46going to head over to the properties 0:47panel, scroll down to effects, and click 0:50to add the drag effect. And in the drag 0:52effect model, naturally, we get some 0:54settings here. And we'll go through each 0:56of these one at a time. The first one 0:58being free form. Do we want to allow the 1:00visitor to drag this element around 1:03wherever they want or do we want it to 1:04be constrained? I'm going to leave it on 1:06free form for now. We're going to 1:07preview this and then we'll go back and 1:09look at the alternative. But with it set 1:12to free form, we can decide whether or 1:13not we want it to snap back to its 1:15original position when we release the 1:16cursor. I'm going to leave it on 1:18snapback. And let's just preview this to 1:20see what the defaults look like. I'll 1:22press command P on my Mac. Scroll down 1:24here. And there we have it. This thing 1:26is dragable and when I let go, it 1:29returns back to its original position.1:31And that is because of that snapback 1:33setting set to yes. If I set this to no 1:36and preview once again, you'll see that 1:38I can just drag this wherever I want. I 1:41can just place it, including outside of 1:43the bounds of this frame that it's 1:44inside of. And the overflow is set to 1:46hidden. So when I drag beyond those 1:48bounds, uh, we actually can't even see 1:50it anymore. And we're allowed to do that 1:51because again, we have it set to free 1:53form. And that's how free form works.1:55But let's go back and fiddle with some 1:57of these settings here. You may have 1:58noticed that when I switch snapback to 2:00no, we got this new setting called 2:03momentum. And with momentum turned on,2:05now if I go and preview this, when I 2:07click and drag, if I release before I 2:09stop moving my cursor, you'll see it 2:11flew away. There's some momentum there.2:14There's some inertia transferred into 2:15the object and it carries. It continues.2:18If you have snapback turned on, you 2:20don't get that because it's just going 2:21to return back to its original position.2:23you instead get to choose an easing 2:25curve for how it snaps back into its 2:28original position. But let's look at the 2:30alternative to free form real quick. I'm 2:32going to come back here and set free 2:34form to no. And when free form is set to 2:36no, we get to choose a section on the 2:39page that's going to behave as a 2:40container, sort of like a boundary that 2:42the dragable object can't go outside of.2:45So we don't have any sections on this 2:46page. So, the first thing I'm going to 2:48do is select the frame that I want to 2:50behave as the container, as the 2:52boundaries, which is this frame here.2:54And I'm going to come down to the bottom 2:56of the properties panel and add a scroll 2:58section. By adding a scroll section, I 3:01can now declare a name for this. And 3:03then we can choose that name when we're 3:05determining what bounds our dragable 3:08layer should stay within. So, again,3:10back over to the drag effect modal. And 3:11now, when we go to choose a section,3:13there's that drag frame section that I 3:15just created. And then I'll leave 3:17momentum turned on so I can chuck this 3:19thing around. And you'll notice now 3:21unlike when we had free form set to yes,3:23we can now choose to turn on momentum 3:25and have a transition. And the 3:28transition is because we have a 3:30boundary. And when the object gets 3:31dragged to the boundary or the momentum 3:33hits that boundary, it's going to come 3:36back. It's going to stay within the 3:37boundary. So that transition sort of 3:39determines what that motion looks like.3:42And I'm just going to stick with the 3:43default spring for now. And again, I'll 3:45hit command P on my Mac to preview. And 3:47we'll see what this looks like. There we 3:50go. A little bit of momentum. And look 3:52at that. It bounces off the edge. It's 3:54staying within this container. We don't 3:56have to worry about it completely flying 3:58into oblivion. And the only thing we 4:00really do have to worry about is when it 4:02gets into these corners, it gets a 4:03little bit cut off because the corner 4:05radius of this frame is larger than the 4:07radius of the circle. But we can easily 4:09fix that by either increasing the radius 4:11of the square or we can just set the 4:13overflow to visible instead of hidden.4:16And now when we preview this, rather 4:18than getting clipped, the dragable layer 4:20is allowed to kind of pop out. It's just 4:23getting clipped at the bottom and the 4:24right. And that's because the frame 4:26wrapped around this still has the 4:28overflow set to hidden. So if we wanted 4:29to, we could go back, press the escape 4:31key to select the parent. We could also 4:33rightclick on this, go to overflow, set 4:36that to visible. And for good measure,4:38I'll press escape one more time just to 4:40double check, make sure there's not 4:41another parent frame that's clipping 4:43this. And this could be. So, we'll go 4:45and set the overflow from hidden to 4:48visible on this as well. And then escape 4:50one more time. Looks like we're good. I 4:52don't think we have any other frames 4:54that are at risk of clipping this. So,4:56again, command P on my Mac. Go into 4:57preview mode. And now, there we go.5:00There's nothing around the sides of this 5:03that's going to clip it anymore. So, we 5:05don't have that issue in the corners and 5:07we don't have the issue of this flying 5:09off into oblivion. And there you have 5:11it. With drag effects, visitors can take 5:14control, literally. It's a small feature 5:16that opens up fun possibilities for more 5:18playful, tangible sites. That's it for 5:21this one. I'll see you in the next one.

TeachesDrag Effect

Also coversCustom Cursors Frames Links Remix Links Transitions & Easing

Watch on YouTube ↗

‹ Site Settings & Global Accessibility Features in Framer (SEO Lesson 5)

Page Titles, Descriptions, and URLs in Framer (SEO Lesson 4) ›

More in this topic

Framer Update: Logo Shaders

Framer Update12K views · 1 month ago

Framer Update: Holo Shader

Framer Update: Holo Shader

Framer Update6K views · 2 months ago

Shader: Chromatic Aberration

Shader: Chromatic Aberration

Framer Update7K views · 2 months ago

Announcement23K views · 2 months ago

Framer Update: Flow Effect in Layout Templates

Framer Update: Flow Effect in Layout Templates

Framer Update10K views · 3 months ago

Building an Expanding Article Stack in Framer

Building an Expanding Article Stack in Framer

Animations4K views · 4 months ago

Scaling a clipped image on hover in Framer

Scaling a clipped image on hover in Framer

Animations7K views · 5 months ago

Making elements revolve in Framer

Making elements revolve in Framer

Animations5K views · 5 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.