Animations, Layout & Design, Navigation

Navigations: Mobile Menus 2

Benjamin

10:45

24K views

Jul 11, 2023

About this lesson

This release introduces three new features designed to improve navigations in Framer. First, we’ve added 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. Second, we’re upgrading the Transition property, which now can be added to any layer within your Variants. This gives you precise control over your animations, allowing you to target specific layers to animate, and exclude others. Third, we’re adding support for Transitions to Link Styles, so all of your links can now be animated on Hover. Combined, these features unlock new types of mobile navigations—beyond ones that animate to fill the viewport height. Demo: https://navs-fade.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00yo my name is Benjamin and in this video 0:04I'll cover a different way of setting up 0:07your mobile navigations 0:09specifically we'll cover menus that fade 0:12into view on tap instead of menus that 0:15animate their height 0:17if you haven't yet I recommend watching 0:20the previous video covering mobile 0:23navigation menus first 0:25as we'll be picking up where we left off 0:28in that video 0:30so in this demo project we currently 0:33have an identical setup 0:35we have this mobile navigation that 0:37animates to the full viewport height and 0:40it also collapses back to 64 pixels 0:44the links within it are clipped and they 0:48fade in and out of view as well 0:50so how do we go from this animation into 0:54one where we can simply fade the 0:56backdrop and the links in and out of 0:59view and even add a staggered effect 1:02in this release we're adding new 1:04features that unlock those navigation 1:07patterns as well 1:08I'll first resize the phone variant 1:12to a matching height of 800 pixels just 1:16so we can dissect the changes we're 1:18about to make 1:21and I'll also bring back this links 1:23stack by setting opacity to 1.1:28we don't want any clipping or hide 1:30animations 1:32so let's set overflow to visible on the 1:35phone variant 1:37next we'll set transition to instant on 1:40both the phone and the phone open 1:42variant 1:45so at this point we shouldn't have any 1:48more clipping or height animations in 1:50place 1:52this means we also no longer need to 1:54have a fill on these two variants 1:58instead we'll want to have a separate 2:01backdrop layer 2:02that always occupies the entirety of the 2:05viewport 2:06and that can fade in and out of view on 2:09tap so I'll simply draw this Frame set 2:12it to position absolute dock it to the 2:15left top and right sides and then I'll 2:18set height to viewport 2:20this is the first new feature of this 2:23release we recently added the ability to 2:27Define viewport units for the Min and 2:29Max sizing options and starting today 2:33you can also Define viewport units for 2:36the height property of any layer within 2:39a component which is very useful for 2:42backdrops like these 2:44[Music]2:45I'll grab the backdrop within the phone 2:48open variant as well and set visible to 2:51yes 2:53and a quick aside this is not 2:55overlapping My Links because the links 2:58already have a z index value of 2. and 3:01the backdrop gets a z index of one by 3:05default so we're lucky here it works out 3:07of the box if your backdrop happens to 3:10overlap your links make sure that your 3:13links have a higher Z index value so we 3:16have the backdrop layer in place however 3:19we know that our variants here have 3:22transition set to instant but we want to 3:26animate these two layers while keeping 3:28the variant switching instant the second 3:31new feature we're introducing in this 3:34release is the ability to add transition 3:37properties to any layer within a 3:40component so with both of these 3:43backdrops selected I'll head over to the 3:46Styles menu and I'll add a transition 3:49property and I can give these some nice 3:52spring values 3:55foreign next we'll do the same thing for 3:59the links parent I'll select both and 4:03let's give these the same transition 4:05values which is stiffness set to 400 and 4:10damping set to 50.4:13next let's set opacity back to zero on 4:17the links layer and also for the 4:20backdrop 4:22otherwise nothing would be animating in 4:24and out 4:27now because both of these layers here 4:30are overflowing 4:33we have to make sure that the pointer 4:34events are set to none otherwise they 4:38could be blocking interactions behind 4:40them finally we'll select the phone 4:43variant 4:44and we can resize its height back to the 4:48original 64 pixels so let's go back to 4:51the home page and give our phone 4:53breakpoint a preview 4:57as you can see we now have a nice fade 5:00in and Fade Out transition of our menu 5:03let me reset the background color here 5:06so at this point we've essentially 5:08reached our goal 5:10the menu now fades in and occupies the 5:14entirety of the viewport instead of 5:16animating the height and clipping its 5:19layers but there's more we can do and 5:22there is one more new feature I would 5:25like to highlight if we hover over these 5:28links here you can see that nothing 5:29really happens 5:31so let's change that and add a nice 5:34hover State the third new feature we're 5:37adding in this release is transition 5:40support for link Styles I'll edit the 5:44link style right here and as you can see 5:46we now get a nice transition control 5:49I'll first update the hover color and 5:53then we can add a nice subtle transition 5:55as well 5:57and if we now go back and give this a 5:59preview 6:00we now get a nice transition on Hover 6:04and this also works in the phone variant 6:08it works for any layer that has this 6:11link style applied so that is the third 6:15feature that we've designed to help 6:17improve your navigations 6:20finally there are more fun things we 6:22could do with the new transition 6:24property for example we could use it to 6:28add a staggered animation to our links 6:31in this menu 6:33so first let's select the link stack in 6:36the phone variant and add an extra 20 6:39pixel of left side padding 6:43then in the phone open variant I'll 6:46select all of these child layers 6:49and I'll add the transition property to 6:51these as well 6:54next we can start adding a unique delay 6:57value to each of these transitions 7:00so I'll add a 0.05 delay incrementally 7:04to each layer here 7:08starting from 7:100.1 seconds 7:12and ending at 0.5 seconds I'll go ahead 7:17and speed up this part just a little bit 7:19and there we go 7:22all links now have a unique delay value 7:25so let's go into the preview and see 7:27what we have so far so we can see that 7:30the delay is working but the links 7:32aren't fading in just yet 7:35so let's go back into our component 7:38select all of these layers within the 7:41phone variant and set opacity to zero 7:45if we now go back and give this a 7:48preview we can see that we have 7:50successfully designed a stagger in 7:53animation 7:55so let's go back and start designing a 7:58stagger out animation as well 8:01first I'll select the links layer in the 8:04phone variant and we can remove the 8:07transition and set opacity to one here 8:10as we're essentially animating all the 8:13child layers we no longer need to 8:16animate this parent stack as well and we 8:20can also remove it from the linked layer 8:23within the phone open variant 8:25all right so now it's just these layers 8:28themselves plus the backdrop that are 8:30animating here so we can do the same 8:32thing as before select all of these add 8:35a transition set it to Spring 8:39and then start adding a unique delay 8:41values except here we'll start from the 8:44bottom and we'll work our way upwards 8:47so again we'll start at 0.1 8:50then point 15 then 0.2 then point 25 and 8:56so on and so forth all the way up to 0.5 9:01and because this Fade Out or stagger out 9:03animation will now be delayed we'll also 9:07want to select the backdrop in the phone 9:09variant and give this a delay of about 9:130.5 as well 9:15this makes sure that the backdrop only 9:19Fades out once the links are done 9:21animating as well so let's go back home 9:24and give this another preview 9:27and now whenever we close the menu we 9:30get this nice stagger out animation as 9:33well 9:35and we can do a few more things like we 9:38could animate this line as well by 9:41setting the width to 1 pixel within the 9:44phone variant and animating it to fill 9:47the available space we can also play 9:50with the distribute property like 9:52animating it from the center here 9:55and if we now go back and give this 9:57another preview 9:59this gives us a nice subtle line 10:02animation as well 10:05and that's pretty much it for this video 10:08viewport unit support for the height 10:11property in components the ability to 10:15customize the transition of any layer 10:17within a component and the ability to 10:20add transitions to a link style all come 10:24together to unlock even more navigation 10:28patterns in framer thank you so much for 10:31watching this video and stay tuned for 10:34more Navigation updates coming soon 10:39foreign

TeachesStagger

Also coversBreakpoints Component Variants Components Frames Hover & Press Links Min & Max Sizing Sizing Spacing Stacks Transitions & Easing

Watch on YouTube ↗

‹ Framer Update: Code Blocks & Inline Code

Framer Community Show & Tell July 6, 2023—Cédric Moore, Madhuri Maram and Arjun Phlox ›