Website
App-Like Navigation in Framer
This is an app-like navigation built in Framer, without writing any code. It's app-like because it has a floating bottom navigation that animates seamlessly when switching between different pages. On top of this, the site content slides left and right when navigating to different pages.
Created by
About the resource
Being able to switch between pages with these slide transitions isn't a new thing in Framer. Page transitions have been in the app for a while now.
They can be applied to breakpoints, and you can define how pages are animated when transitioning from one to another.
About the resource
Being able to switch between pages with these slide transitions isn't a new thing in Framer. Page transitions have been in the app for a while now.
They can be applied to breakpoints, and you can define how pages are animated when transitioning from one to another.
About the resource
Being able to switch between pages with these slide transitions isn't a new thing in Framer. Page transitions have been in the app for a while now.
They can be applied to breakpoints, and you can define how pages are animated when transitioning from one to another.
Applying page transition effects to breakpoints.
Applying page transition effects to breakpoints.
Applying page transition effects to breakpoints.
On the other hand, being able to continuously animate elements like navigation when switching between pages wasn't possible before.
Now, with page transitions, we can do that. That's exactly what you see when navigating to different pages in this demo - the little highlighter circle moves and animates smoothly instead of reloading on page switches.
I talk in depth about how this is achieved in this resource.
A new feature with layout templates is the ability to exclude certain elements within the layout template from the page effect. So when the page content slides left and right, the navigation stays in place and doesn't move.
On the other hand, being able to continuously animate elements like navigation when switching between pages wasn't possible before.
Now, with page transitions, we can do that. That's exactly what you see when navigating to different pages in this demo - the little highlighter circle moves and animates smoothly instead of reloading on page switches.
I talk in depth about how this is achieved in this resource.
A new feature with layout templates is the ability to exclude certain elements within the layout template from the page effect. So when the page content slides left and right, the navigation stays in place and doesn't move.
On the other hand, being able to continuously animate elements like navigation when switching between pages wasn't possible before.
Now, with page transitions, we can do that. That's exactly what you see when navigating to different pages in this demo - the little highlighter circle moves and animates smoothly instead of reloading on page switches.
I talk in depth about how this is achieved in this resource.
A new feature with layout templates is the ability to exclude certain elements within the layout template from the page effect. So when the page content slides left and right, the navigation stays in place and doesn't move.
Excluding the navigation from page effects.
Excluding the navigation from page effects.
Excluding the navigation from page effects.
