Animations, Layout & Design

Making elements revolve in Framer

Joseph

3:38

5.2K views

Jan 7, 2026

About this lesson

Framer Quick Tip: A simple way to add a little motion to your site is to make elements rotate using the Loop effect — but what about making them revolve… moving icons or avatars around a central point while keeping them upright at all times.

It’s actually not much more difficult at all so lets take a look at how it’s done.

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

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

0:00Framer quick tip. A simple way to add a 0:02little motion to your site is to make 0:04elements rotate using the loop effect.0:06But what about making them revolve?0:08Moving icons or avatars around a central 0:11point while keeping them upright at all 0:13times. It's actually not much more 0:15difficult at all. So, let's take a look 0:17at how it's done.0:22Let's take a look at the setup I have 0:24here in my project file. And it's really 0:26just a set of elements that are absolute 0:29position. And I've got them just 0:31optically in a circle here around the 0:34framer logo. And I know I'm not going to 0:36do anything with the framer logo itself.0:38So just to keep it out of the way, I'm 0:39going to rightclick and I'm going to 0:41choose to lock it. Or you can press 0:43command or control L on the keyboard if 0:46you like keyboard shortcuts. Then I'm 0:47going to click and drag a selection 0:49around all of these icons. And with them 0:52selected, I'm going to right click on 0:53any one of them and choose add frame,0:56which is going to wrap a frame around my 0:58entire selection. And now I can take 1:01that frame and I can come over here to 1:03effects. I can add an effect. And I'm 1:05going to add that loop effect that I 1:07mentioned earlier. And by default, the 1:09loop effect is going to rotate 360°1:13with a linear transition, which is 1:16pretty much exactly what we want. It's 1:18just going to be a bit too fast. In 1:19fact, I'll press command P here on my 1:21Mac to preview. So, you could see this 1:24is way too fast. And the reason is the 1:27default duration. So, I'm going to come 1:29back in here to the settings. I'm going 1:30to come into the transition settings.1:33And it's the time that is the issue 1:35here. I'm going to change this to 30 1:37seconds. I'm going to make it super long 1:39because I want a slow, subtle revolution 1:42of these icons here. And with that set 1:44to 30, if I press command P again on my 1:46Mac to preview, there we go. we have 1:48that nice subtle effect, but because we 1:50are rotating this whole frame, our icons 1:53are going wonky. They're going sideways.1:55They're going upside down. That's 1:57exactly what we don't want. So, I'll 1:59return to the canvas. And what I'm going 2:01to do to make life even easier is I'm 2:03going to rightclick on the loop effect 2:05that I just created on this frame, and 2:07I'm going to choose copy cuz I want the 2:10settings for the individual icons to be 2:12almost exactly the same. I just want to 2:14reverse it so that it cancels out that 2:16rotation. So, with that copied, I'm just 2:18going to click on my frame on the canvas 2:21and press return to instantly select all 2:24of the children. And then I'm going to 2:25come back over here to effects. And 2:27instead of adding the loop effect, I'm 2:28going to rightclick and paste the effect 2:30that I copied. So, now we're close. And 2:32if I preview this, you can see that 2:34we've actually made the problem a little 2:36bit worse. We've got the icons rotating 2:38in the same direction as the parent 2:40frame that's rotating. So, we've 2:42exacerbated the problem, but we're going 2:44to negate the problem by just going back 2:47into these settings and setting the 2:49rotation on the icons. Instead of 2:51positive 360°, we're going to go 2:54negative 360° to cancel out the rotation 2:57of the parent frame. So, again, I'll 2:59press command P on the keyboard. And 3:01there we have it. We've got the parent 3:03frame rotating positive 360° and we have 3:06each of those individual icons canceling 3:08out that rotation by rotating at exactly 3:11the same speed with the same linear 3:13easing but with a negative value. And 3:16there you have it. Just a pair of 3:17rotations that cancel each other out and 3:20we're all set. Drop a comment with what 3:22you want to learn to make next and I'll 3:23show you how to pull it off in the next 3:25Framer quick tip.

TeachesLoop Effect Absolute Positioning

Also coversFrames Keyboard Shortcuts Transitions & Easing

Watch on YouTube ↗

‹ Framer Update: On-Page Editing 2.0

Adding Inline Links as Overrides in Framer ›