Animations

Mastering transitions and easing in Framer (Animation Lesson 3)

Mastering transitions and easing in Framer (Animation Lesson 3)

Mastering transitions and easing in Framer (Animation Lesson 3)

Joseph

·

11:01

·

20K views

·

Jul 16, 2025

About this lesson

A good animation isn’t just about making things move — it’s about how they move. Transitions in Framer let us control duration, easing, and even emulate real-world physics using springs. In this lesson, we’ll explore how to craft transitions that feel smooth, intentional, and expressive — whether you're fine-tuning a micro-interaction or choreographing an entire hero section.

Grab the remix link here: https://www.framer.com/academy/lessons/framer-animations-transitions-and-easing

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

https://www.youtube.com/watch?v=bOgUXDibygM&t=7s What are transitions?

https://www.youtube.com/watch?v=bOgUXDibygM&t=21s Setting duration

https://www.youtube.com/watch?v=bOgUXDibygM&t=38s Choosing an ease curve

https://www.youtube.com/watch?v=bOgUXDibygM&t=62s Previewing transitions

https://www.youtube.com/watch?v=bOgUXDibygM&t=76s Using presets for consistency

https://www.youtube.com/watch?v=bOgUXDibygM&t=97s Understanding “smart animate”

https://www.youtube.com/watch?v=bOgUXDibygM&t=123s Using transition effects on components

https://www.youtube.com/watch?v=bOgUXDibygM&t=150s Nesting transitions

https://www.youtube.com/watch?v=bOgUXDibygM&t=181s Avoiding common transition mistakes

https://www.youtube.com/watch?v=bOgUXDibygM&t=227s Examples of good transitions

https://www.youtube.com/watch?v=bOgUXDibygM&t=265s Scroll-based transitions

https://www.youtube.com/watch?v=bOgUXDibygM&t=312s Best practices for responsive motion

https://www.youtube.com/watch?v=bOgUXDibygM&t=360s Performance considerations

https://www.youtube.com/watch?v=bOgUXDibygM&t=430s Recap and wrap-up

https://www.youtube.com/watch?v=bOgUXDibygM&t=590s Final thoughts

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

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

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

0:00A good animation isn't just about making 0:02things move. It's about how they move.0:05Transitions in Framer let us control 0:07duration, easing, and even emulate 0:09realworld physics using springs. In this 0:13lesson, we'll explore how to craft 0:14transitions that feel smooth,0:16intentional, and expressive. Whether 0:18you're fine-tuning a micro interaction 0:20or choreographing an entire hero 0:22section,0:26again, for this one, we're going to hop 0:28into a project file. And this is 0:29actually the same project file as the 0:31previous lesson. So if you remix that 0:33one already, just head to the second 0:35page here called easing, and you'll find 0:37exactly what I'm looking at here on my 0:39screen. What we'll start with is down 0:42here. We're going to compare some of the 0:44different easing curves that we have to 0:46work with. And easing is really all 0:48about creating motion that feels 0:51natural, that feels right. And linear is 0:54one of those curves that just feels 0:56robotic. So what I'm going to do, I'm 0:57going to go into preview mode. So, we 0:59can look at all of these at the same 1:00time and compare them. And you'll find 1:02that this linear motion is 1:05instantaneously reaching its maximum 1:07speed. It's going the same speed the 1:09entire way, and it's also 1:11instantaneously stopping when it reaches 1:14the other end, which is very robotic.1:16This works well for animations that sort 1:19of whiz by, but not necessarily 1:21animations that start on the screen or 1:24end on the screen where you can see the 1:26object begin to move or you can see the 1:28object come to rest. Those situations 1:32lend themselves better to easing in or 1:34easing out, which we'll talk more about 1:36in a moment. In fact, the next one down 1:38that you see on my screen is ease in 1:40out, which means ease in and out. Ease 1:43in at the beginning, ease out at the 1:45end. And what you're seeing here is sort 1:48of a gradual acceleration at the 1:49beginning and then we reach sort of the 1:51peak velocity in the middle here and 1:54then a gradual deceleration at the end 1:57where it comes to rest kind of naturally 1:58kind of like a ball. You roll a ball by 2:01transferring energy into it which has to 2:03happen gradually even if it seems 2:05instantaneous like a baseball bat 2:07hitting a baseball but let's talk more 2:08like a gentle roll of a ball. We slowly 2:11transfer energy into it. that energy 2:13eventually gets scrubbed off and the 2:16ball comes to rest. So most objects in 2:18the physical world have a period of time 2:20where energy is transferred into them 2:23and then a period of time where energy 2:24is lost. So ease in and out shows that 2:27happening on both ends. Whereas ease in 2:30you see the energy being transferred 2:32into the object. It sort of eases into 2:34that movement and it reaches its peak 2:36velocity at the very end and then stops 2:39instantaneously. So ease in is best when 2:42you don't see the end of the animation.2:44You only see the beginning of the 2:45animation. So that way you see the 2:47gradual start. You see that kinetic 2:49energy being transferred in and then 2:51that instantaneous stop hopefully 2:52happens offcreen so you don't see it 2:55just come to an abrupt halt. Ease out on 2:58the other hand does just the opposite.3:00It starts at peak velocity and then at 3:02the end it comes to rest gradually. So 3:06again, like a ball rolling into view, it 3:08would slow down gradually and eventually 3:10come to rest. So much like ease in, but 3:12the opposite. You'd probably want to see 3:14this object come to rest at the end, but 3:17you wouldn't want to see it 3:18instantaneously accelerate to full 3:20speed. So hopefully these objects start 3:23off the screen and end on the screen.3:26And then last but not least, we have 3:28spring. And spring is really cool in 3:30framework because we actually have two 3:31different ways of approaching how we get 3:33this spring animation, this sort of 3:36spring energy to an object. We can 3:38either set it based on the time and just 3:40say we want it to be a certain amount of 3:42bouncy or we can start with the physics 3:44and then the time is determined by the 3:47physics that we choose for our 3:48transition. So we'll talk about that 3:50more in a moment here. You can see that 3:52the gist of this is that at the very end 3:55here we see the energy sort of 3:58overshoot. We see that this goes past 4:00the end point here. So if we had this 4:03transitioning a value of let's say a,000 4:06pixels, it's actually moving further 4:07than a,000 pixels and then it's 4:10gradually coming back. Sort of like a 4:12spring that has the freedom to overshoot 4:14and then eventually come to rest with 4:17sort of a little wobble to it. So now 4:19let's look at how these different easing 4:21methods pair with some of those contexts 4:23that I mentioned a moment ago. Things 4:25coming on the screen, things going off 4:27the screen, things going across the 4:29screen, starting and ending off the 4:31screen. And that's just below here. So 4:33we'll go down to examples. And you can 4:35see here that that linear easing makes a 4:38whole lot of sense for something that 4:40starts off screen and continues and goes 4:42off screen. Almost like a ticker. You 4:44don't see how it got rolling. you don't 4:46see where it ends. It just sort of 4:49continues along doing its thing. It's 4:51also good for rotation that just 4:53continues on and on. You know, perpetual 4:55motion type of things. And then here we 4:57have ease in and ease out where the 4:59object starts on the screen and ends on 5:02the screen. So, we see it get going, we 5:04see it come to rest. Therefore, we ease 5:07it in and we ease it out. And then 5:09below, if we only see it coming to rest,5:12we can ease that energy out. And if we 5:14only see it get going and we don't see 5:16it come to rest, then we can ease that 5:18energy in. There's really no reason to 5:20ease both if we don't see both. So by 5:24using ease out or ease in, we can 5:25dedicate more of the duration to that 5:28ramp up or that ramp down rather than 5:31using half of the duration to ramp up 5:33and then half of the duration to ramp 5:35down after the layer is already gone. So 5:37now let's look at how these things 5:38actually manifest themselves as settings 5:41in Framer. If you watched the previous 5:43lesson, then you saw that we added a 5:44hover effect to one layer and we added a 5:46press effect to another layer. So, I'm 5:48actually going to go back to the 5:49homepage, which is where we did just 5:51that. And we'll play with the easing and 5:53duration for those very effects. So,5:55again, I'm going to come over here to 5:56the effect itself. And at the bottom,5:59transition is where we make these 6:01decisions for our easing and for our 6:03duration. Right now, this is set to 6:05spring, but I'm going to switch back to 6:07ease because most of the easing curves 6:09that we talked about a moment ago are 6:11found on the ease tab. And you can work 6:13with presets from this drop- down menu 6:15here, like linear, which we talked 6:16about, ease in, ease in and out, ease 6:19out, or do a little bit of overshoot.6:22But I want to show you how the graph 6:24editor here works. So, I'm going to 6:25start with the ease in and out preset.6:27But the graph editor just above lets us 6:30customize that. So if we want a little 6:32more easing on the end or we want a 6:34little more easing at the beginning or 6:36we want all the easing to happen more 6:38gradually and for the middle section to 6:39happen more quickly, we can do all that 6:41here on the graph editor. So I can just 6:43click and drag these bezier handles and 6:46sort of determine how the speed is going 6:48to ramp up at the beginning and how the 6:50speed is going to ramp out at the end.6:53And wherever we drag these blue handles 6:54to, the coordinates of those positions 6:57are shown down here in the bezier field.7:01So if I did something very specific 7:03here, and I was really happy with it, I 7:06could take this and copy and paste it 7:07into the easing for other layers to make 7:09sure that I'm being totally consistent 7:11here. So the first two numbers are 7:12really just an XY position for the first 7:14dot. And then the second two numbers are 7:16the X and Y position of the second dot.7:19So if for example I wanted this dot to 7:21be at the very bottom and halfway across 7:24that would be 0.5 to be halfway across 7:27and that would be zero to be all the way 7:30at the bottom. So you can manipulate 7:31these numbers here directly if you 7:33wanted to. And similarly I could say I 7:35want the X position of the second handle 7:38to be halfway across and I want it to be 7:40all the way at the top which is going to 7:42be one. And then the time will determine 7:45how quickly this happens from beginning 7:47to end. And down here, this preview 7:49gives us a handy little visualization of 7:52what that time, delay, and easing are 7:55going to look like when it all comes 7:56together. And if we didn't want the 7:58transition to start immediately, we've 8:00also got this little delay field here.8:02But before we wrap up, let's talk about 8:04springs here for a moment. If we go to 8:06the spring tab, we get two different 8:08modes to create this spring animation.8:10One is time, which is sort of a 8:12simplified mode that lets us say how 8:15long we want this transition to take.8:17Let's say just an even 1 second. And you 8:20can see here that from beginning to end,8:22the transition does take 1 second. But 8:25then based on the bounce value, we could 8:27determine just how bouncy and wiggly 8:29this gets as it comes to rest. So with a 8:32lower bounce value, this is going to 8:34happen more gradually and less is going 8:36to happen at the end. And with a higher 8:38bounce value, it's going to happen more 8:39quickly at the beginning so that it has 8:41more time to get all that bouncing done 8:44by the end of that 1 second duration. So 8:47essentially with these timebased 8:48springs, we're saying we don't want the 8:50transition to take any longer than this.8:52Get all the bouncing done before we 8:54reach that time limit. So the more 8:56bouncy it is, the more quickly it's 8:58going to appear to happen. And the less 8:59bouncy it is, the less quickly it's 9:01going to appear to happen, even if you 9:03leave the time alone. So it's kind of a 9:04balancing act between the time and the 9:06bounciness. Physics, on the other hand,9:08lets us set stiffness, damping, and 9:11mass, and then the amount of time that 9:13takes is calculated based on those three 9:15variables. So by messing with these, we 9:17are effectively going to change the 9:19amount of time that it takes. So if we 9:22stiffen this up, things are going to 9:23happen quicker, but as a result of 9:25happening quicker, there's more energy.9:27So there's going to be a little bit more 9:28bounciness. If we don't like how much 9:31bounciness there is, we can add more 9:33damping, and damping will sort of mute 9:35that out. Kind of like a shock absorber.9:37So it's like we got a spring and a shock 9:39absorber, like the suspension on a car.9:41If we reduce the damping, then the 9:43spring is free to bounce and bounce and 9:45bounce and bounce and sort of continue 9:47until eventually coming to rest on its 9:50own. And naturally, the more mass we 9:52add, the more energy this is going to 9:54carry. So again, it's going to get 9:55moving a little bit slower, but then 9:57it's going to carry more energy and it's 9:59going to take longer for it to come to 10:01rest. So again, we've got a balancing 10:03act here. We've got to figure out how 10:05fast do we want this to move. Larger,10:07heavier objects add mass. objects that 10:10you don't want bouncing around for a 10:12long long time, add damping and then use 10:14stiffness to determine how explosive or 10:17how gentle that motion is. But again,10:19the amount of total time that this 10:21transition is going to take up is a 10:23byproduct of how we balance all these 10:25things. So now, if I go into preview 10:28mode and we take a look at this, we've 10:30got that gentle heavy bounce on hover.10:33And there you have it. From easing 10:35presets to spring physics, transitions 10:37help define your site's personality.10:39Mastering these tools means your 10:41animations won't just move, they'll move 10:43with purpose, elegance, and the 10:45tangibility of the physical world.10:48That's it for this one. I'll see you in 10:49the next one.

TeachesTransitions & Easing

Also coversDrawing Vectors Hover & Press Remix Links Variables

Watch on YouTube ↗

‹ Using the Loop Effect in Framer (Animation Lesson 4)

Optimizing Images, Icons, and Interactive Elements in Framer (SEO Lesson 3) ›

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.