New
New
New
Animation
Animated Navigation Bar in Framer
This is a recreation of the MOD website's captivating navigation bar, now available as a Framer component. The logo starts big and bold, then seamlessly integrates into the nav as you scroll down. It's a great example of how you can create fluid, responsive designs in Framer without writing a single line of code.
About the component
Creating an animation like this in Framer is easier than you think. When we think about it, we only have two states. In one state of the navigation, we have the text (or logo) as a large full-width element below the navigation. In the next state, the logo is now part of the navigation as a regular-sized element.
So if we can set these states up with a nice structure so they're also responsive and adapt to different width changes on the website, we're all good. We can use a simple scroll variant effect to change between the two component variants on scroll.
About the component
Creating an animation like this in Framer is easier than you think. When we think about it, we only have two states. In one state of the navigation, we have the text (or logo) as a large full-width element below the navigation. In the next state, the logo is now part of the navigation as a regular-sized element.
So if we can set these states up with a nice structure so they're also responsive and adapt to different width changes on the website, we're all good. We can use a simple scroll variant effect to change between the two component variants on scroll.
About the component
Creating an animation like this in Framer is easier than you think. When we think about it, we only have two states. In one state of the navigation, we have the text (or logo) as a large full-width element below the navigation. In the next state, the logo is now part of the navigation as a regular-sized element.
So if we can set these states up with a nice structure so they're also responsive and adapt to different width changes on the website, we're all good. We can use a simple scroll variant effect to change between the two component variants on scroll.
The component variants setup for the navigation.
The component variants setup for the navigation.
The component variants setup for the navigation.
As you can see in the image above, I have the component set up with two variants that I can use for animating this element. Make sure to remix the project to see how it's set up because it's important to combine relative and absolute positioning correctly to achieve responsive behavior.
As you can see in the image above, I have the component set up with two variants that I can use for animating this element. Make sure to remix the project to see how it's set up because it's important to combine relative and absolute positioning correctly to achieve responsive behavior.
As you can see in the image above, I have the component set up with two variants that I can use for animating this element. Make sure to remix the project to see how it's set up because it's important to combine relative and absolute positioning correctly to achieve responsive behavior.
The scroll variant effect applied to the component.
The scroll variant effect applied to the component.
The scroll variant effect applied to the component.
On the main desktop breakpoint, I'm applying the scroll variant effect triggered by a scroll section. So when I start scrolling down the website and reach a certain section, the navigation component will switch from its Entry variant to the Default variant.
Quick tip: the animation of this variant switch happen according to the transition settings set inside of the component, so if you want the logo to move a little bit faster, you can adjust the transition settings of the primary variant of the navigation component.
On the main desktop breakpoint, I'm applying the scroll variant effect triggered by a scroll section. So when I start scrolling down the website and reach a certain section, the navigation component will switch from its Entry variant to the Default variant.
Quick tip: the animation of this variant switch happen according to the transition settings set inside of the component, so if you want the logo to move a little bit faster, you can adjust the transition settings of the primary variant of the navigation component.
On the main desktop breakpoint, I'm applying the scroll variant effect triggered by a scroll section. So when I start scrolling down the website and reach a certain section, the navigation component will switch from its Entry variant to the Default variant.
Quick tip: the animation of this variant switch happen according to the transition settings set inside of the component, so if you want the logo to move a little bit faster, you can adjust the transition settings of the primary variant of the navigation component.
