Creating persistent animations between pages in Framer
In this Framer tutorial, you will learn Creating persistent animations between pages in Framer. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
How can I keep persistent elements like headers or footers from animating out and back in during page transitions in Framer?
To keep persistent elements such as headers or footers from animating out and back in during page transitions, use layout templates in Framer. Select the element (e.g., the header bar), right-click it, and choose ’Create layout template.’ This places the element in a layout template, which you can then apply to every page. Next, select the persistent element within the layout template, go to styles in the right panel, add the ’page effect’ property, and set it to ’exclude.’ This ensures the element remains in place and does not participate in page transition animations.
What should I do if I see duplicate headers or footers after applying a layout template?
If you notice duplicate headers or footers after applying a layout template, it usually means those elements still exist on individual pages as well as in the template. To fix it, open each page, remove the extra header or footer, and keep those elements only in the layout template. This ensures they’re inherited cleanly and won’t appear twice.Inside the layout template, select the persistent element, open Styles in the right panel, and set Page Effect → Exclude. This tells Framer to leave it out of page transitions so it stays fixed while the rest of the page animates.
How can I make sure the correct navigation item is highlighted on each page when using a layout template?
To keep the right navigation item highlighted on each page, use a Link component with variants for default, hover, and active states. Create a Link style that includes these variants, then use it for each navigation item in your layout. When building individual pages, simply set the active state on the relevant Link so it highlights correctly. This approach is much simpler for new users and covers most navigation needs without extra setup.
Lesson details
