Website
Continuous Navigation Animation with Layout Templates
This is a continuous navigation animation created in Framer using layout templates. The crazy thing is that it was created without writing any code. It's possible because elements in layout templates don't get reloaded when switching between pages. Feel free to remix the project and see how it's structured.
Created by
About the resource
This is created with layout templates which is a brand new feature in Framer that mainly helps with creating scalable site structures with fix elements like Navigation and Footer that repeat on all pages where the layout template is applied.
About the resource
This is created with layout templates which is a brand new feature in Framer that mainly helps with creating scalable site structures with fix elements like Navigation and Footer that repeat on all pages where the layout template is applied.
About the resource
This is created with layout templates which is a brand new feature in Framer that mainly helps with creating scalable site structures with fix elements like Navigation and Footer that repeat on all pages where the layout template is applied.
Layout templates in Framer.
Layout templates in Framer.
Layout templates in Framer.
On top of allowing us to create scalable websites, layout templates have another big advantage. Fixed elements inside layout templates don't reload when switching between pages. This means that when switching between pages with different navigation variants, the animation of the navigation can play completely since the component doesn't need to reload.
The key is to simply create variants for the navigation where each one has a different link highlighted.
On top of allowing us to create scalable websites, layout templates have another big advantage. Fixed elements inside layout templates don't reload when switching between pages. This means that when switching between pages with different navigation variants, the animation of the navigation can play completely since the component doesn't need to reload.
The key is to simply create variants for the navigation where each one has a different link highlighted.
On top of allowing us to create scalable websites, layout templates have another big advantage. Fixed elements inside layout templates don't reload when switching between pages. This means that when switching between pages with different navigation variants, the animation of the navigation can play completely since the component doesn't need to reload.
The key is to simply create variants for the navigation where each one has a different link highlighted.
Navigation component variants.
Navigation component variants.
Navigation component variants.
Then, to set different variants on different pages, we need to create a variable for the navigation's variant property inside the layout template.
Then, to set different variants on different pages, we need to create a variable for the navigation's variant property inside the layout template.
Then, to set different variants on different pages, we need to create a variable for the navigation's variant property inside the layout template.
Creating a variable inside the layout template, for the navigation's variant.
Creating a variable inside the layout template, for the navigation's variant.
Creating a variable inside the layout template, for the navigation's variant.
Then, all we need to do is go to different pages on our website and change this newly created variable to set the correct navigation variant. On the resources page, for example, I'll set it to the "Resource" variant.
Then, all we need to do is go to different pages on our website and change this newly created variable to set the correct navigation variant. On the resources page, for example, I'll set it to the "Resource" variant.
Then, all we need to do is go to different pages on our website and change this newly created variable to set the correct navigation variant. On the resources page, for example, I'll set it to the "Resource" variant.
Changing the navigation variant on individual pages.
Changing the navigation variant on individual pages.
Changing the navigation variant on individual pages.
And that's it! When switching between pages, the navigation will smoothly animate according to the transition settings inside the component.
Layout templates take Framer sites to the next level. They're the new standard for every Framer site, so make sure you learn how to use them.
And that's it! When switching between pages, the navigation will smoothly animate according to the transition settings inside the component.
Layout templates take Framer sites to the next level. They're the new standard for every Framer site, so make sure you learn how to use them.
And that's it! When switching between pages, the navigation will smoothly animate according to the transition settings inside the component.
Layout templates take Framer sites to the next level. They're the new standard for every Framer site, so make sure you learn how to use them.
