Animations

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

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

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

Joseph

·

7:42

·

10K views

·

Sep 30, 2025

About this lesson

When elements are shared between pages, it can still feel a bit jarring... or at least unnecessary for those elements to transition away only to come right back a moment later.

Fortunately, Layout Templates in Framer have a trick up their sleeve. In this lesson, I’ll show you we can keep animations — and even static elements in place — completely uninterrupted, when navigating from page to page.

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

Learn more about Layout Templates: https://www.framer.com/academy/lessons/framer-fundamentals-layout-templates

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

https://www.youtube.com/watch?v=kW35bBvajXg&t=27s The problem with persistent elements

https://www.youtube.com/watch?v=kW35bBvajXg&t=60s Creating a layout template

https://www.youtube.com/watch?v=kW35bBvajXg&t=130s Clean up

https://www.youtube.com/watch?v=kW35bBvajXg&t=180s Excluding elements from page effects

https://www.youtube.com/watch?v=kW35bBvajXg&t=310s Fixing the nav active state

https://www.youtube.com/watch?v=kW35bBvajXg&t=436s Wrap up

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

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

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

0:00When elements are shared between pages,0:02it can still feel a bit jarring or at 0:04least unnecessary for those elements to 0:06transition away only to come right back 0:09a moment later. Lucky for us, layout 0:12templates in Framer have a trick up 0:14their sleeve. In this lesson, I'll show 0:16you how we can keep animations and even 0:18static elements in place completely 0:20uninterrupted when navigating from page 0:23to page.0:27Let's recap the problem we're trying to 0:28solve and then take a look at the 0:30finished result that we're going for.0:32Here in the example that we finished up 0:35at the end of the previous lesson, if I 0:37click from page to page, you'll see that 0:40the entire header bar that's at the top 0:42of the page is getting pushed away only 0:45to get pushed back into view, which is 0:47kind of silly. This is what we might 0:49call a persistent element because it was 0:51there before the transition and it's 0:53there after the transition. So, it 0:55should really just stay put. The fact 0:56that it's getting pushed out of the way 0:58only to come right back into view is a 1:01little disorienting and it interrupts 1:03the animations with the logo on the 1:04lefth hand side and it interrupts the 1:07animations that should be taking place 1:09between the different nav items because 1:10that is in fact an animated component.1:13So, let's take a look at what it should 1:15look like in the completed example. When 1:18I click from home to stories, the whole 1:20header bar stays put. the animations 1:22remain uninterrupted and we can actually 1:24see that our nav is an animated toggle.1:27The key to making this happen is layout 1:30templates which we talked about in the 1:32frame fundamentals course. So if you 1:33haven't watched that, I'll put a link in 1:35the description below. Go check that out 1:37to get a more comprehensive look at what 1:39layout templates are all about. But 1:41because they're the key to pulling this 1:42off, we're going to go and we're going 1:44to create one. So, I'm just going to 1:46close our completed example and head 1:48back to the design canvas of our start 1:50project. The easiest way to create a 1:52layout template and put this whole 1:54header bar in there is just to select 1:56the header bar itself, rightclick it,1:59and choose create layout template.2:01That'll create our first layout template 2:02and it'll put the header bar in there 2:04automatically. I'm just going to name 2:06this main cuz it's going to be our main 2:08layout template in this project. And 2:10when I click create, here we go. We get 2:12our placeholder for the content that's 2:14going to be on each page. We get the 2:15header bar, which is where I 2:17right-clicked from. So, that came over 2:18automatically. And at the bottom, we 2:20probably want to have our footer as well 2:22because the footer is going to repeat on 2:23every page. So, I'm going to leave the 2:26layout template. Go back to the 2:27homepage. Come down here and grab our 2:30footer. And I'm just going to hit 2:31command X on my Mac. That'll be control 2:34X on your PC. And then to get back into 2:36the layout template, I can just 2:38doubleclick on the header bar since it's 2:40part of the layout template. And now I 2:43can just hit paste. I have the 2:44breakpoint selected and hitting paste 2:46drops the footer right in there. So I've 2:48got the header bar. I'll have the 2:49content of each page. And I've got the 2:51footer at the bottom. So basically how 2:53you would normally set up a layout 2:55template because these elements repeat 2:56on every page. You'll save yourself a 2:58bit of work to establish these elements 3:00in the layout template and then apply 3:02the layout template to each and every 3:03page. So that way if you need to make a 3:05change, you can do it in one place.3:06It'll happen on every page. Again, we go 3:09over that in frame fundamentals. So 3:10going back to our homepage now, if we 3:13look at the layers panel, we only see 3:15the content of the page. We don't see 3:16the header bar or the footer anymore 3:19because they're part of the layout 3:20template. They're sort of integral to 3:22the breakpoint itself. So I'm going to 3:24go to the other pages and take a look at 3:27what we've ended up with. Because while 3:29the other pages do in fact have our 3:31layout template applied, they also still 3:33have those duplicate elements. They 3:36still have their own header bar, which 3:37I'm going to delete. And they have their 3:39own footer, which I'm going to delete 3:41cuz I sure don't want two footers. And 3:44then I'll go to the features page and do 3:45the same thing. I'm going to delete the 3:47header bar and delete the footer. So 3:49that way we aren't inheriting those and 3:50then inserting a duplicate on top. Cool.3:53So, let's go back to our homepage. And 3:56I'm going to press command P on my Mac 3:58to preview this. And you'll notice that 4:00nothing has really been solved here. We 4:03have the same problem that we had from 4:05the very beginning. And that's because 4:07there's one more step we have to do to 4:09tell an element that we want to exclude 4:11it from the page effect. We don't want 4:13it to participate in the animated 4:15transition that's taking place here. So,4:17we'll leave preview mode. I'll double 4:19click on the header bar to go back into 4:21the layout template. And with the header 4:23bar selected, I'm going to come down 4:25here to styles. And I'm going to click 4:28to add a style. And you'll find here on 4:30this big long list that there is a page 4:33effect style. You can think of it more 4:35as a property than something that's 4:36stylistic. But with the page effect 4:38property added, we can set it to 4:41exclude, which is going to do exactly 4:43what we want. So I'll go back to the 4:45homepage. I'll press command P to 4:46preview this. And now when we click from 4:49page to page, there we go. Now we're 4:52talking. This header bar element is no 4:54longer participating in those page 4:57effects, and therefore remains in place,4:59keeps all of its animations persistent,5:01and we get exactly the result that we're 5:03looking for. But there is still one more 5:05teenytiny problem, and it's that if we 5:08start on a page that isn't the homepage,5:10like if we start on the stories page for 5:12example, if we land on that page first,5:16you'll notice home is still in its 5:18active state. And that's because in the 5:21layout template, we've got this navbar 5:22set to one particular variant. The 5:24variant that has home highlighted. So 5:27with this layout template applied to 5:29every page, we get home highlighted on 5:31every page. We don't want that. Let's 5:33look at how to fix it. I'm going to head 5:35back to the canvas. I'm going to go back 5:37into the layout template and I'm going 5:39to select this component. Now, when I'm 5:42editing the guts of what's inside of the 5:44layout template, I can of course change 5:46the variant on the properties panel 5:48here. But when I'm looking at a 5:49particular page that the layout template 5:50is applied to, all this stuff is kind of 5:53encapsulated almost like it's one 5:55gigantic component. So just like we 5:57would with components, we can add a 6:00variable to make this property 6:02accessible from the outside of the 6:05component, from the outside of the 6:07layout template. So let's do that. I'll 6:09select my nav component. The variant is 6:11the thing that I would like to expose 6:12from the outside. So I'm going to click 6:14on the word variant. I'm going to choose 6:16to create a variable out of that. And 6:18now we'll just give the variable a name.6:20I want to give it a name that's going to 6:22make sense to me later. So I'm just 6:24going to name it nav because nav variant 6:261, nav variant 2, nav variant 3, that's 6:28enough information that I think I'll be 6:30able to make sense of this later. And 6:32then when I head back to the stories 6:34page, for example, now with the page 6:36breakpoint selected, we see the 6:38properties of our layout template which 6:40now include the nav variable that we 6:43just created. So for this page, we can 6:45switch to variant three, which is where 6:47features is highlighted, or we can 6:48switch to variant two, where stories is 6:51highlighted. And since we're currently 6:52looking at the stories page, that's the 6:54one we want. And then we'll switch to 6:56the features page, and do the same 6:58thing. We'll select the breakpoint over 7:00here on the properties of the layout 7:01template. We've got our nav variable,7:03which we can switch from variant one to 7:05variant 3, which is the one that has 7:08features highlighted. So now, no matter 7:10which page a visitor initially lands on,7:13they're going to see the correct nav 7:14item selected. And there you have it.7:17Persistent animations give our site a 7:19sense of stability and continuity.7:22Layout templates make it possible and 7:24keep global elements feeling as unified 7:26as they should be. That's it for this 7:28one. I'll see you in the next one.

TeachesPage Transitions Layout Templates

Also coversBreakpoints Component Variants Components Frames Links SEO Audit Templates Transitions & Easing Variables

Watch on YouTube ↗

‹ Wireframer: Blogs and Changelogs with CMS

Framer Update: Stagger Effects ›

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.