Animations

Animating transitions between pages in Framer (Animation Lesson 14)

Joseph

8:46

21K views

Sep 18, 2025

About this lesson

Jumping between pages doesn’t have to feel jarring. With Page Effects in Framer, we can add smooth transitions that make our sites feel more cohesive — almost more “app-like”. Your site flows from one page to the next. It’s a small touch that helps everything feel more like a product and less like a collection of separate pages. In this lesson, I’ll show you how to easy it is animate between pages in Framer.

Grab the remix link from Framer Academy: https://www.framer.com/academy/lessons/framer-animations-page-transition-effects

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

https://www.youtube.com/watch?v=1hKaTVXX188&t=42s Previewing the completed example

https://www.youtube.com/watch?v=1hKaTVXX188&t=61s Project setup and navigation component

https://www.youtube.com/watch?v=1hKaTVXX188&t=98s Introducing page effects

https://www.youtube.com/watch?v=1hKaTVXX188&t=174s Exploring effect options and presets

https://www.youtube.com/watch?v=1hKaTVXX188&t=273s Customizing animation properties

https://www.youtube.com/watch?v=1hKaTVXX188&t=343s Fixing reverse navigation with push right

https://www.youtube.com/watch?v=1hKaTVXX188&t=453s Final preview of all transitions

https://www.youtube.com/watch?v=1hKaTVXX188&t=498s Wrap up

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

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

0:00Jumping between pages doesn't have 0:01[music] to feel jarring. With page 0:04effects and framer, we can add smooth 0:06transitions that make [music] our sites 0:07feel more cohesive, almost more applike.0:11In this lesson, I'll show you how easy 0:13it is to animate [music] between pages 0:15in Frame.0:19Let's take a quick look at what it is 0:21that we're trying to build here in the 0:23first place. Let's look at the starting 0:25point. This website has three simple 0:27pages. And as we click from page to 0:29page, we get an instantaneous transition 0:33from one page to the next, like you'd 0:35expect. That's the default behavior of 0:37clicking on a link on the web. But if I 0:39head over to our completed example to 0:41show where we're headed here, now when I 0:43click, we get this animated transition 0:45where the page we're coming from gets 0:47pushed away and the page we're going to 0:50gets pushed into view. So quite a bit 0:52more visually dynamic. I'll close the 0:54tab for my completed example here and go 0:56back to our start project. And you'll 0:58find a link to remix this start project 1:01in the description below. But here 1:02again, we've got three pages, a 1:04homepage, a stories page, and a page 1:07called features. But I'm going to go 1:08back to the homepage. And I also want to 1:09show you that our nav items are actually 1:12an instance of a component. And if I 1:14double click on this component, you can 1:15see that I have several variants. I have 1:17one for each page showing the active nav 1:20item that clarifies which page we're 1:22currently on. And if I preview this 1:24component, it's actually animated. But 1:26we didn't see those animations happening 1:28because as soon as we clicked on one of 1:29the links, it loaded the next page. So,1:31we never got to see this animation 1:32happen. We're going to come back to 1:34that, but for now, I'm going to leave 1:36the preview and head back to our 1:38homepage. And now, it's time to make the 1:40magic happen with what are called page 1:43effects. And what we do is we add a page 1:45effect to the page that we're 1:47transitioning from. So, here we'll start 1:49with our homepage. Now to add a page 1:51effect in the first place, we have to 1:53select the desktop breakpoint. And with 1:55the breakpoint selected, we can come 1:57down here to effects on the properties 1:59panel. And when we click, we get two 2:01different options. Now, these are both 2:03for adding page effects. We can either 2:05choose to add a page effect to all 2:08pages. We can add the same effect to 2:09every page of the entire site all at 2:12once. Or we can choose to add an effect 2:15that goes from this page to another 2:17specific page. All pages is nice,2:19especially if you have a large site. If 2:21you have tens or even hundreds of pages,2:24you can take care of the transition from 2:26every page to every page by setting it 2:28up just once here. So, let's actually do 2:30that. I'm going to click all pages. And 2:33then here in the popover, you'll see 2:35that our target is indeed set to all 2:37pages. But one thing I also want to 2:39point out is that the all pages option 2:41only shows up when you're editing the 2:44homepage. If you're editing any other 2:45page of the site, you won't get the all 2:47pages option. So, if you're not seeing 2:49it, make sure you're looking at the 2:50homepage. And then we have some preset 2:53animations that we can choose from. And 2:54these are a lot like the animation 2:56effects that we talked about earlier in 2:58the course. We have things like fades.3:01We have slides. We have pushes, which is 3:03what you saw in the example at the 3:04beginning. And then we have some wipes 3:06that actually use a mask to reveal 3:08what's underneath. I'm going to go with 3:10push left as our default for all of our 3:12pages here. And here we see an effect 3:14for this page and an effect for the next 3:16page. In this case, instead of next 3:18page, it actually says any page because 3:20we're targeting all of the pages of the 3:22site at the same time right now. But the 3:24reason we have two effects is because a 3:26transition has two parts. How the 3:28current page exits from view and how the 3:31next page enters into view. And you can 3:34really think of these like the animation 3:36effects that we learned about earlier in 3:37the course. But instead of animating a 3:39layer, we're animating an entire page.3:42the entire page within the viewport as 3:44if it's one gigantic layer. And in this 3:46case, we've got the page we're looking 3:48at now. That's one gigantic layer. And 3:50then we have the page we're 3:51transitioning to, which is the second 3:53gigantic layer. So in the event of push,3:56we're sliding the current page out of 3:58view. And at the same time, we're 4:00sliding the next page into view. So the 4:02new page is pushing the old page out of 4:05the way, hence the name push. And we can 4:07of course click in here to make changes 4:08to the animation effect that's happening 4:10to the outgoing page and the incoming 4:12page. We can play with opacity, scale,4:15rotation, offset. In this case, negative 4:17100% which means move 100% of your own 4:21width out of the way on the x-axis. In 4:23this case, a negative number means move 4:25to the left. A positive number would 4:27mean move to the right. And similarly, a 4:29y offset would let us move the page up 4:31or down. We also get a special little 4:33setting here called mask, which lets us 4:35choose from a variety of different 4:36presets to wipe away or reveal the page 4:39on the screen. And you get a little 4:41preview below that shows what each one 4:42does and different parameters to play 4:44with depending on which type you choose.4:47And then if we go back, last but not 4:49least, we have our transition where we 4:51can customize the easing or spring and 4:53we can set a duration for the transition 4:55that takes place. So, a lot of what 4:57you'd expect from animation effects, but 4:59with the added bonus of those masks. I'm 5:01going to go back a couple of times, and 5:03I'm just going to switch us to that push 5:06left preset that I had chosen before.5:08And now, let's preview this. Let's see 5:09what we've actually ended up with here.5:11I'm going to press command P on my Mac 5:13to go into preview. And now, when I go 5:15from home to stories, we should get that 5:17push left effect. And boom, there it is.5:20And since we chose to apply this to all 5:22pages, when I go from stories to 5:24features, we get the push left again.5:27But when I go from features to stories,5:29it still pushes left. And from stories 5:31to home, it still pushes left, which in 5:33my opinion feels kind of backwards 5:35because we've got this physically 5:36plausible slide from one page to the 5:39other. If you go backwards, the 5:41transition should theoretically go in 5:43the other direction. So, let's fix that.5:45Starting with the stories page, I'm 5:47going to head to the pages panel. I'm 5:49going to go to the stories page. And 5:51again, we've got to select the break 5:53point to add an effect. And what's cool 5:56is that even though we have push left 5:58set to all pages, all pages really means 6:01all pages unless specified otherwise. So 6:04here we're going to specify otherwise.6:06I'm going to click to add an effect. And 6:08I do want the target set to home cuz I'm 6:11setting the transition from the page 6:12that we're on, which is stories, to the 6:14homepage, which again, that's one of the 6:16ones that should go the opposite 6:17direction. And I'm going to switch the 6:19preset here to push right instead of 6:22push left. And now we should be all good 6:25because the only time that we're 6:26transitioning from stories to a page 6:29that's the other direction is when we're 6:31going from stories to home. When we go 6:32from stories to features, we're still 6:34pushing left. We're still going in the 6:36same direction as what we set on all 6:38pages. So we don't have to go and set 6:40that one again manually. But let's 6:41preview this. Let's make sure that it's 6:43looking all good. We're on the stories 6:44page. I'm going to click to go to home.6:46We should get the push. Right. There we 6:48go. So, home to stories, push left,6:50stories to home, push right. And then 6:53last but not least, we'll just have to 6:55fix the transitions going from the 6:56features page to both stories and home.7:00So, we'll have to set two effects, one 7:02to target each of those two pages. And 7:04we'll do that now. I'll leave preview 7:05mode, head to the features page again,7:08select the breakpoint for the page, and 7:10then head down here to effects and click 7:12to add that first effect. It defaulted 7:15to home, which is one of the targets 7:16that we want to fix. And I'm going to 7:18switch that from crossfade again to push 7:20right. And then I'll add one more again 7:23by clicking on effects. And then that 7:24automatically defaulted to stories 7:26because we had already set an effect for 7:28the other page. And again, I'll set the 7:30preset to push. Right. Now, we should be 7:34really good to go. I'll press command P 7:35again on my Mac to preview. We're 7:37starting on the features page here. And 7:39when I click over to stories, there we 7:41go. Pushing in the correct direction.7:43When I go from stories to home, again,7:44we already fixed that one. From home to 7:47features, all good. And then from 7:48features all the way back over to home,7:51again, we're all good. But I did mention 7:54earlier that this navbar component was 7:56animated. And we don't get to see the 7:58animation cuz it slides off the screen 8:01and then comes back. In fact, the entire 8:03header bar slides off the screen only to 8:06get pushed back in, which doesn't make a 8:08whole lot of sense. That's what we would 8:09call a persistent element. It's an 8:12element that was there before and is 8:14there after, it should really just stay 8:16put. And that's exactly what we're going 8:18to fix in the next lesson. And there you 8:21have it. With page effects, your site 8:23flows from one page to the next. It's a 8:26small touch that helps everything feel 8:27more like a product and less like a 8:30collection of separate pages. That's it 8:32for this one. I'll see you in the next 8:34one.

TeachesPage Transitions

Also coversBreakpoints Collections Component Variants Components Frames Links Remix Links Sizing Transitions & Easing

Watch on YouTube ↗

‹ Framer Update: Lightbox Effect

Framer Update: Fit Image ›