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 theHeight
property of any layer within aVariant
. This helps you design new interactions, such as backdrops that should fade in-and-out.Setting a
Transition
property on individual layers inside yourVariants
. This gives you precise control over your animations, allowing you to target specific layers to animate, and exclude others.Add
Transitions
to yourLink Styles
so all of your links can now be animated onHover
.