New
New
New
Animation
Unusual Navigation in Framer
This is an unusual navigation pattern recreated in Framer without any coding, based on the original design by Daybreak design studio. If you want to see how something like this can be built in Framer just by drawing rectangles on a design canvas, feel free to remix the project and dive into the layers and components.
Created by
About the resource
To create this interaction in Framer, you need to create a navigation component that takes up the full width and height of the website. This is needed because when the navigation is opened, we need to blur the background, which is only possible if we have a large frame as an overlay over the whole website content.
About the resource
To create this interaction in Framer, you need to create a navigation component that takes up the full width and height of the website. This is needed because when the navigation is opened, we need to blur the background, which is only possible if we have a large frame as an overlay over the whole website content.
About the resource
To create this interaction in Framer, you need to create a navigation component that takes up the full width and height of the website. This is needed because when the navigation is opened, we need to blur the background, which is only possible if we have a large frame as an overlay over the whole website content.
The large navigation component.
The large navigation component.
The large navigation component.
So we can see that despite the navigation being a simple button in the bottom left corner, we still create a large component for it that we set to fixed position and pin to all sides with 0 values.
Within the component, we just have to set up the closed and opened variant, and the interactions for switching between these variants.
So we can see that despite the navigation being a simple button in the bottom left corner, we still create a large component for it that we set to fixed position and pin to all sides with 0 values.
Within the component, we just have to set up the closed and opened variant, and the interactions for switching between these variants.
So we can see that despite the navigation being a simple button in the bottom left corner, we still create a large component for it that we set to fixed position and pin to all sides with 0 values.
Within the component, we just have to set up the closed and opened variant, and the interactions for switching between these variants.
The component and its variants.
The component and its variants.
The component and its variants.
When you preview the animation, you might notice a little trick: the cards are not coming in at the some time, but with a little staggered effect. How to create that?
Well, you’re in luck because I have a tutorial covering the staggered animation technique. Watch the second half of this tutorial and you’ll learn all about it.
When you preview the animation, you might notice a little trick: the cards are not coming in at the some time, but with a little staggered effect. How to create that?
Well, you’re in luck because I have a tutorial covering the staggered animation technique. Watch the second half of this tutorial and you’ll learn all about it.
When you preview the animation, you might notice a little trick: the cards are not coming in at the some time, but with a little staggered effect. How to create that?
Well, you’re in luck because I have a tutorial covering the staggered animation technique. Watch the second half of this tutorial and you’ll learn all about it.
