Animations · TOPIC

Transitions & Easing

Every Framer lesson that teaches or touches on Transitions & Easing

Lessons that teach this

2 lessons teach this topic

11:01

Mastering transitions and easing in Framer (Animation Lesson 3)

Animations

20K views

July 16, 2025

2:14

Framer Update: Time-Based Springs

Framer Update, Animations

6.7K views

September 11, 2024

Where it comes up

288 moments across 58 lessons

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

0:05Transitions in Framer let us control 0:07duration, easing, and even emulate 0:14transitions that feel smooth,0:35page here called easing, and you'll find 0:44different easing curves that we have to 0:46work with. And easing is really all

Creating Animated Component Interactions (Animation Lesson 11)Joseph

0:49variant that we transition to. Then 1:01easing of the transition itself. And of 4:08be able to click on and transition to 4:24called a transition. events are 4:28for now we want to do transitions. But 4:30choosing new transition here isn't

Navigations: Mobile Menus 2Benjamin

1:37next we'll set transition to instant on 3:22transition set to instant but we want to 3:34release is the ability to add transition 3:46Styles menu and I'll add a transition 4:03let's give these the same transition 5:00in and Fade Out transition of our menu

Framer Update: Custom CursorsBenjamin

2:32to add a transition which we'll look at 3:47seamlessly transitions into our label 5:33much smoother by adding a transition 5:43transition to this 5:50create unique transitions for our cursor 5:59spring transition between the movements

Animating vector paths in Framer (Animation Lesson 18)Joseph

5:50transition, we get the usual animation 5:54this to ease in or ease in and out or be 6:01Continuous with no easing just seems to 6:06this one, I'm cool with ease in and out.7:35easing in and out, I think I'm just 7:37going to have it ease out instead. So

Using the Appear Effect in Framer (Animation Lesson 6)Joseph

2:23transitions in. Where's it going to come 2:33what it's going to transition to is the 3:02let's just fiddle with this transition 3:06want this to ease out nicely. I want it 3:13I'm just going to switch the easing 3:14curve here to ease out. And just to make

Setting Up custom cursors in Framer (Animation Lesson 16)Joseph

2:51the last property here is transition.2:53And what transition is going to do is 2:55add a little bit of easing between the 5:58transition property does. So, let's go 6:06spring transition here. If I get rid of 6:23movement when we apply a transition that

Animating transitions between pages in Framer (Animation Lesson 14)Joseph

0:06transitions that make [music] our sites 0:29page, we get an instantaneous transition 0:43click, we get this animated transition 2:24you can take care of the transition from 3:26transition has two parts. How the 4:49least, we have our transition where we

Using Events for nested interactions in Framer (Animation Lesson 13)Joseph

0:52drive some of the transitions that are 5:51like to add a new transition that goes 6:02add a new transition, and have that go 6:12transition, and we want this one to go 6:24transition to variant 2. If I click on 6:30called right is going to transition to

Framer Update: Time-Based SpringsBenjamin

0:08have two types of transitions in framer 0:11ease and spring these easing transitions 0:14use easing 0:16functions like linear ease in ease in 0:20out ease out and more and they allow you 0:27spring transitions so let's have a look

Framer Update: Scroll TransformsBenjamin

1:34and then we have this new transition 2:54magical property here called transition 3:08transition in framer 3:33and it's smoothly transitions back into 4:53and then let's apply a transition as 5:58transition and then I'll hit command P

Transforming elements on scroll in Framer (Animation Lesson 8)Joseph

3:24transition to pretty much be over by the 4:45Now, let me show you what transition 4:51transition, you'll notice that in the 4:53transition settings, I just get the 5:00get those easing curves because again,5:23that stopping point, that spring easing

Triggering animations on scroll in Framer (Animation Lesson 7)Joseph

4:45we have the transition where we 9:20transition, the movement that's going to 12:03transition is taking place over an 12:18transition that's visible, we only want 12:29So in this case, transition is set to 12:47leave it on ease in and out. So that way

Framer Update: New EffectsBenjamin

1:33also customize the transition 2:15and I'll tweak the transition just a 2:48transition options we customized earlier 4:23can use a different transition like a 5:49the transition a little bit so as soon 7:10with the transition property here you

Framer Update: Page Effects (View Transitions)Benjamin

0:22the view transitions API framer is one 0:53the same transition across all of your 1:35we can also Define custom transitions 2:02gently transition into view and you can 2:24transition when opening a blog post so 4:36transition and from the blog

Animating text in Framer (Animation Lesson 17)Joseph

3:34have our transition, which is currently 5:07I can get into the transition and slow 6:04way I can get to the transition so that 7:23way I can get back to the transition so 8:03that little bit of playful easing that

Using the Drag Effect in Framer (Animation Lesson 5)Joseph

2:23you instead get to choose an easing 3:25and have a transition. And the 3:28transition is because we have a 3:37boundary. So that transition sort of 4:09fix that by either increasing the radius

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

2:35a transition, let's actually preview this. Let's see what it looks like. Le 2:51easing curve here that makes this motion look very robotic. It's instantane 3:02the modal here for the effect. We'll go to the transition. And rather than 3:06linear, let's start by changing that to ease in and out. So that way it 5:38the same easing, because we copied and pasted this from the other one. So w

Framer Update: Flow EffectBenjamin

1:25can even apply unique transitions to 1:55that transition. The rest of the page 2:34transition values it uses to do this.2:58will automatically grab the transition

Creating persistent animations between pages in Framer (Animation Lesson 15)Joseph

0:06transition away only to come right back 0:51there before the transition and it's 0:53there after the transition. So, it 4:15transition that's taking place here. So,

Framer Update: Lightbox EffectBenjamin

0:51and of course the transition where we 1:10gives us seamless transitions with 1:44the highest fidelity transitions where 1:47you can control the spring or easing

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

1:55transition, which determines how the 2:02get into transitions and master the 2:04different easing curves that we have 2:12to a physicsbased transition. And uh I'm

Framer Update: Component EffectsBenjamin

2:30transition let's use a time of about 1 3:49and tweaking the transition values and 6:07of the canvas I'll also add a transition 7:11customize the transition as

Animating Vectors in Framer (Vectors Lesson 5)Justin

0:32to animate elements from transitions to 1:56and transition. Length controls how much 2:43And finally, we have transition. Like in 3:41transitions, can make a big difference

Making elements revolve in FramerJoseph

1:13with a linear transition, which is 1:30to come into the transition settings.3:13easing but with a negative value. And

Adding animated effects at the component level in Framer (Animation Lesson 12)Joseph

1:52transition, I'm just going to have this 1:53ease out. So, I'll go to the ease tab 1:56and switch to the ease out preset. But

Layout Templates: Mobile Menus, Page Effects, and SidebarsBenjamin

1:21transition and animation settings here 1:33transition property to 2:00included in the page effect transition

4 Ways to Update Form Status in FramerJoseph

3:52transitions confirmation without leaving 4:37a smooth transition then I'll head to 5:12transition to happen since this is a

Create an animating shimmer effect like the Linear app website without any codeFramer

2:26transition type from linear to 4:05changing the transition again from 4:07linear to ease out

Framer Update: CMS SectionsBenjamin

5:19and I'll keep the transition for now 5:31transition is a little fast so let's go 5:40I'll set the enter and exit transition

Framer Update: Slideshow 2.0Framer

1:26and this all uses the same transition 1:45and I'll start by decreasing the width 3:04transition and finally we can use the

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

0:59to follow. Things like easing,2:06smoothly transition between entire

2024 Framer Awards: Announcing the WinnersAndy

1:27Transitions and delivered an exper 3:15transitions so Mega congrats team on

Styling Frames in Framer (Fundamentals Lesson 16)Joseph

2:59see that increasing one does not affect 4:06by increasing the radius it's by default

Adding Links in Framer (Fundamentals Lesson 15)Joseph

4:07here to add a transition and have it 4:09kind of ease in and out and that has its

Framer Event — Fall 2024, Introducing Plugins, and CMS ReferencesAndy

5:50we're releasing today.10:06releasing something very special and

Framer Update: Variables for StylesBenjamin

0:20transition so I'll select my image here 1:39scroll bars and transition allowing you

Framer Update: Flow Effect in Layout TemplatesBenjamin

1:11transition between the two variants.1:19transition. And we're going to go back

Scaling a clipped image on hover in FramerJoseph

4:14transition would look really good.

Framer Update: Stagger EffectsBenjamin

0:43stagger within the transition