Framer Update, Navigation

Relative Overlays: Collision Detection

Benjamin

2:49

11K views

Nov 7, 2023

About this lesson

In this Relative Overlays Update, we’re adding Collision Detection. Design menus without worrying about them getting cut-off or clipped. Framer will intelligently reposition your menus and submenus, even flipping their transform origin in the process. We’re also adding support for nesting via Components, allowing you to design submenus. https://framer.com/updates/collision-detection/

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

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

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

0:00[Music]0:11yo my name is Benjamin and this is 0:15Collision detection in framer so here we 0:18have a navigation bar containing a 0:21single drop- down 0:23menu this drop down is a relative 0:27overlay the overlay itself is also a 0:30component so if I double click into this 0:33one you'll see that all rows here also 0:37have relative overlays applied so each 0:41one has its own unique submenu this 0:44release adds support for setting up 0:46nested menus like this where your 0:49overlay is a component containing layers 0:52also triggering different overlays if we 0:56now give this a preview you'll see that 0:58we indeed have a nested menu but we're 1:02also a bit lucky here in that everything 1:05fits our submenu just about touches the 1:09right side of the viewboard but what if 1:12product was one of the last items in our 1:16navigation so I'll move it all the way 1:19to the right here and if we now give 1:22this another preview you'll see that in 1:25such cases your menus would get 1:28completely cut off 1:30even without any submenus with this 1:33release this will no longer happen as 1:36all new overlays get Collision set to 1:40Auto by default for existing overlays 1:43you can find this new property here and 1:47set it to Auto and then you can also 1:50Define how much padding you would like 1:52between your menu and the browser when 1:55your menu collides so I went ahead and 1:59added Collision auto to the sub menus as 2:02well and now let's give this another 2:06preview framer now intelligently 2:09repositions our menus and submenus where 2:12they would otherwise get clipped plus we 2:15have added some nice padding here making 2:18sure that our menu doesn't sit 2:20completely flush with the browser and 2:23that's pretty much it for this video for 2:27everything else that we added to this 2:29release be sure to check framer dcom 2:33updates thank you so much for watching 2:36and stay tuned for more updates coming 2:47soon

TeachesComponents

Also coversSpacing

Watch on YouTube ↗

‹ Framer Update: Component Effects

The Framer October Update ›