Mobile Menu: Fade-In

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

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.