Search

navigation

start

navigation

design

navigation

scroll

navigation

effects

navigation

cms

navigation

localization

navigation

insert

navigation

templates

navigation

management

navigation

integrations

navigation

code

navigation

courses

Mobile Menu: Fade-In

Design mobile menu’s with custom fade-in animations.

Design mobile menu’s with custom fade-in animations.

Make your mobile menu animations more interesting by adding custom transitions.

Intermediate

Instead of the typical height animation commonly seen in mobile menus, Framer also enables you to smoothly fade your menus using separately controlled transitions. Combined, these features allow many types of mobile navigations—beyond ones that animate to fill the viewport height:

  • Viewport unit support to the Height property of any layer within a Variant. This helps you design new interactions, such as backdrops that should fade in-and-out.

  • Setting a Transition property on individual layers inside your Variants. This gives you precise control over your animations, allowing you to target specific layers to animate, and exclude others.

  • Add Transitions to your Link Styles so all of your links can now be animated on Hover.