Animated Navigation Bar in Framer

Copy component

Animated Navigation Bar in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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.

image of Nandi Muzsik
image of Matt Jumper

Created by

Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities
Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities
Framer website homepage with navigation menu and pixelated project previews showcasing web design tool capabilities
Professional developer wearing glasses and black sweater in home office setup with Framer logo, studio microphone visible in foreground

Related Lesson

Tutorial: Animated Navbar in Framer (New Trend)

Professional developer wearing glasses and black sweater in home office setup with Framer logo, studio microphone visible in foreground

Related Lesson

Tutorial: Animated Navbar in Framer (New Trend)

Professional developer wearing glasses and black sweater in home office setup with Framer logo, studio microphone visible in foreground

Related Lesson

Tutorial: Animated Navbar in Framer (New Trend)

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.

Framer logo design interface showcasing desktop and mobile component variants with remix options

The component variants setup for the navigation.

Framer logo design interface showcasing desktop and mobile component variants with remix options

The component variants setup for the navigation.

Framer logo design interface showcasing desktop and mobile component variants with remix options

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.

Framer design interface showing logo and scroll variant settings for responsive web design

The scroll variant effect applied to the component.

Framer design interface showing logo and scroll variant settings for responsive web design

The scroll variant effect applied to the component.

Framer design interface showing logo and scroll variant settings for responsive web design

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.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

  • New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation

    New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation

    New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation