Animations

Using the Loop Effect in Framer (Animation Lesson 4)

Using the Loop Effect in Framer (Animation Lesson 4)

Using the Loop Effect in Framer (Animation Lesson 4)

Joseph

·

6:56

·

20K views

·

About this lesson

Sometimes, animation doesn’t need a trigger — it just needs rhythm and flow. The Loop effect in Framer is perfect for things like pulsing indicators, moving backgrounds, or attention-grabbing icons. In this lesson, I’ll show you how to set up a looping animation and make it feel just right.

Grab the remix link here: https://www.framer.com/academy/lessons/framer-animations-loop-effect

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

https://www.youtube.com/watch?v=R72JK-V_kXs&t=7s What is the loop effect?

https://www.youtube.com/watch?v=R72JK-V_kXs&t=25s Creating a simple loop

https://www.youtube.com/watch?v=R72JK-V_kXs&t=42s Adjusting duration and delay

https://www.youtube.com/watch?v=R72JK-V_kXs&t=60s Looping multiple elements

https://www.youtube.com/watch?v=R72JK-V_kXs&t=80s When (and when not) to use loops

https://www.youtube.com/watch?v=R72JK-V_kXs&t=108s Combining loops with other effects

https://www.youtube.com/watch?v=R72JK-V_kXs&t=133s Understanding sync options

https://www.youtube.com/watch?v=R72JK-V_kXs&t=159s Looping inside a component

https://www.youtube.com/watch?v=R72JK-V_kXs&t=183s Previewing the animation

https://www.youtube.com/watch?v=R72JK-V_kXs&t=214s Looping on hover vs scroll

https://www.youtube.com/watch?v=R72JK-V_kXs&t=245s Using loop on multiple layers

https://www.youtube.com/watch?v=R72JK-V_kXs&t=282s Final preview and wrap-up

https://www.youtube.com/watch?v=R72JK-V_kXs&t=370s Recap and closing thoughts

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

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

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

0:00Sometimes animation doesn't need a trigger, it just needs rhythm and flow. The loop effect0:05in Framer is perfect for things like pulsing indicators, moving backgrounds, or attention0:11-grabbing icons. In this lesson, I'll show you how to set up a looping animation0:15and make it feel just right. For this one,0:21we're going to jump into the same project file that we used for the previous0:24couple of lessons, this animation effects project, but we're going to head down here to0:29the loop example. And in this loop example, we've got two little slider handles and0:34we want to animate them so that they automatically slide back and forth, back and0:39forth, back and forth, both of them in opposite directions, sort of bringing this icon0:44to life. So what we're going to do here, I'm going to start with the0:47first handle and I'm going to head down to effects and this time I'm going0:51to add the loop effect. And much like the hover and press effects that we0:56learned about before, we get a modal where we can determine how we want to1:00transform this layer. And because it's a loop effect, that can either happen over and1:05over again from beginning to end in loop mode, or it can happen from beginning1:10to end and then from end back to beginning in mirror mode, which is exactly1:15what we want. We want this dot on the right to move itself to the1:18left, and then reverse that and move back to the right. So we want the1:21mirror effect here. We don't want any delay yet because we want to see what1:26this looks like with no delay and then we'll dial that in as needed. But1:29what I do want to do for sure is offset the position of this layer.1:34And this can be a positive number to go to the right or a negative1:37number to go to the left. I'm going to set a negative number and I'm1:41going to go way to the left here until this lines up with the other1:44handle below it, which ends up being an offset of about negative 110 pixels.1:50By default, it also gave us this rotate value because by default, it's going to1:54create a looping 360 degree rotation animation. I don't want that. So I'm going to1:59zero out the rotation. We don't need that. We wouldn't even be able to see2:02it with just a white circle spinning around. So just the offset. That's all we2:07need. And then down here, because this loop animation is going to happen on its2:11own. It's going to start on its own and it's going to keep going forever.2:14We could decide whether or not we want the browser to continue playing it even2:18when we can't see it because the viewer scrolled past it or the viewer hasn't2:22scrolled down to it yet. Or we can have it pause to save resources in2:27the browser. I'm going to keep this on pause to keep our page from getting2:30too resource intensive as we add more and more animations. And then before I set2:35a transition, let's actually preview this. Let's see what it looks like. Let's see if2:38we're even on the right track. And there we got something going on. We have2:42the slider going from right to left. We have it going from its starting position2:46to its transformed position that we set in that modal. But we've got a linear2:51easing curve here that makes this motion look very robotic. It's instantaneously starting,2:57instantaneously stopping. So let's make that look a bit more natural. We'll head back to3:02the modal here for the effect. We'll go to the transition. And rather than being3:06linear, let's start by changing that to ease in and out. So that way it3:12gets moving slowly and it sort of comes to rest a bit slowly. And that's3:16going to happen in both directions because we've got this mirrored. So it's going to3:20be even both ways. Whatever we set here is going to happen again backwards. So3:25I'll hit command P again on my Mac to go into preview mode. And now3:28that's looking a bit more natural. At least it's not instantaneous. We've got that energy3:33being slowly transferred in and out definitely looks a bit more natural, but I'm going3:37to go back and let's make it a little more playful. Let's give it a3:39bit more character. I'm going to go to spring. I'm going to do this based3:42on physics, and I'm going to make this a bit less stiff and I'm going3:47to increase the mass so that way it gets going a bit gradually. And then3:52it has enough energy to sort of wiggle its way to rest. And we can3:55also remove some of the damping here so that it kind of wobbles to rest3:59a bit more dramatically here. And I can click the preview to show you what4:03that's going to look like. And the preview is highly applicable here since we're animating4:06a slider and the preview is a slider itself. So we're getting a really good4:11sense of what that's going to look like. So let's preview it again. See if4:15we're happy with the first one. And if we are, yeah, that's looking pretty cool.4:19Maybe we want a little delay in the middle. Maybe we want it to rest4:22for a moment before it ping pongs back and forth. So let's go back to4:27the loop and let's add a very small delay here. I'm just going to do4:31half a second 0 .5 and we'll preview this again. Okay. So4:37that delay is a little long for my taste. So I'm going to go back4:40and just cut this down to 0 .2 and we'll say that's probably a happy4:45medium. And now we want to apply that same animation, but going the opposite direction4:49to the other handle. So rather than reinventing the wheel here, what I'm going to4:54do is with this first one selected, I'm going to right click on the loop4:57effect on the properties panel, and I'm going to press copy. Then I'm going to5:01come over to the second handle here, select it, head over to effects, right click,5:07and I'm going to choose paste. Now, the problem is that I had the first5:11one animating to the left and then coming back to the right, which means this5:15one is going to animate to the left and then come back to the right.5:17But we really wanted to do exactly the opposite of that. So when I click5:21on the effect modal to bring it back up, you can see that that transformation5:24is just pushing this even further to the left. Definitely don't want that. So the5:29opposite of moving it negative 110 pixels is moving it positive 110 pixels.5:35So that should be enough to do the trick. And we've got the same delay,5:38the same easing, because we copied and pasted this from the other one. So we5:42should have a perfect reciprocal animation between the two. And if I now go into5:47preview mode and scroll down, watch what happens here. We've got our loop starting. And5:53then the second one is a little bit off in timing. That is because we5:57had this animation paused. We had both of these animations paused until they came into6:03view. So since the first one came into view first, it started first. Second one6:07came into view later, started later. So now they're not synced up with one another.6:11So to resolve that, we can make a small performance concession here. And we can6:16say that we want this to continue playing while it's off screen. And when I6:20preview again, I'll scroll down extra slow to exaggerate what caused the problem originally. And6:25you can see that these are now perfectly in sync with one another. And there6:29you have it. Looping animations are a great way to add motion without needing any6:33interaction. This is a fun one, but as with most things, don't go too nuts.6:38Motion should support your content, not distract from it. That's it for this one. I'll6:43see you in the next one.

Watch on YouTube ↗

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

Mastering transitions and easing in Framer (Animation Lesson 3) ›

More in this topic

Framer Update: Logo Shaders2:05
Framer Update: Logo Shaders
Framer Update12K views · 1 month ago
Framer Update: Holo Shader1:46
Framer Update: Holo Shader
Framer Update6K views · 2 months ago
Shader: Chromatic Aberration1:56
Shader: Chromatic Aberration
Framer Update7K views · 2 months ago
Framer Shaders2:28
Framer Shaders
Announcement23K views · 2 months ago
Framer Update: Flow Effect in Layout Templates2:12
Framer Update: Flow Effect in Layout Templates
Framer Update10K views · 3 months ago
Building an Expanding Article Stack in Framer13:14
Building an Expanding Article Stack in Framer
Animations4K views · 4 months ago
Scaling a clipped image on hover in Framer5:41
Scaling a clipped image on hover in Framer
Animations7K views · 5 months ago
Making elements revolve in Framer3:38
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.