Layout & Design, Navigation

Framer Sites: Overlays

6:20

86K views

Apr 12, 2022

About this lesson

Check out the Overlays playground including 8 examples → https://overlay-playground.framer.website/

Learn how to design overlays from scratch. Covering slide-in sidebars, slide-in topbars, centered modal windows and more.

🌞 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:03i'll show you how to design overlays in 0:05framers sites i want to cover three 0:08patterns 0:09a slide-in sidebar 0:12a slide-in top bar 0:15and a centered modal window 0:19let's start with our sidebar 0:22here i have a button 0:25and i would like clicking on this button 0:27to trigger our sidebar overlay 0:32to add an overlay i can simply click on 0:34the overlays header in the property 0:37panel 0:38and doing so brings me into overlay edit 0:41mode 0:43here you get a backdrop applied by 0:45default 0:47and a bunch of properties you can use to 0:49customize your overlay 0:52you also get the viewport control this 0:55means that all layers within your 0:57overlay are positioned relative to the 1:00viewport 1:02you can draw layers like you normally 1:04would 1:06styling layout and even adding effects 1:10all work like you're used to 1:13this means i can also copy and paste 1:15layers i have already designed directly 1:18onto the overlay 1:20so let's copy and paste our sidebar 1:27i'm going to give it 20 pixels of margin 1:33and we can click done to exit the 1:36overlay edit mode 1:39and let's give this a preview 1:47now clicking on our button gives us our 1:50sidebar 1:51and our 1:52backdrop both appearing and disappearing 1:56instantly 2:00notice how our sidebar sits on top of 2:02our icon 2:04yet our trigger sits on top of the 2:07sidebar 2:08this is because i have manually added a 2:11z-index property to the trigger 2:16which you can see 2:18over here 2:21giving your trigger a higher z-index 2:23allows you to use it as a toggle for 2:25your overlay 2:27meaning i can use the button to both 2:29open and dismiss the overlay 2:35next let's add some animations to our 2:38overlay 2:39to go back into the overlay edit mode i 2:42can simply click on overlay 2:48and let's give this a different preset 2:53so setting a preset 2:55will overwrite these properties below 2:59which you could also customize if you 3:01would like 3:06and let's also add an appear effect to 3:08our sidebar 3:12here we also get a bunch of presets i'm 3:15going to select slide in left 3:18but let's customize it a little bit 3:20[Music]3:26now let's give this a preview 3:33[Music]3:35there we go 3:37now we have a backdrop that fades in and 3:39out 3:40and a sidebar that slides in from the 3:43left 3:44we could customize this further 3:47so maybe we want our backdrop to be 3:50transparent 3:59nice 4:01as you can see you can have a backdrop 4:03that is completely transparent yet still 4:06dismissible 4:08so that's pretty much it for our sidebar 4:11let's quickly turn this into a top bar 4:14instead 4:16i can remove 4:17my sidebar 4:19and bring in our top bar 4:25[Music]4:28i'm going to add 20 pixels of margin 4:30again 4:32and let's give this a slide in top 4:34preset which i think will do just fine 4:39and now if we give this a preview 4:42we have very quickly designed a simple 4:45slide in top bar 4:49finally let's have a look at the modal 4:53i'm gonna copy and paste this in 4:56center it 4:59now let's make this a blocking modal 5:02meaning it 5:04has a backdrop 5:06but it's not dismissible 5:09so how now would we close out of the 5:12overlay 5:14so any layer you draw or paste onto your 5:17overlay has access to a close overlay 5:21interaction which you can add right here 5:26so we're adding a close overlay 5:28interaction to our close icon here 5:32and let's also give our modal 5:34a skill in preset that's fine 5:39and let's have a look 5:43so now our modal is not dismissible by 5:46clicking 5:47outside of the modal itself 5:51but i can click on the close icon to 5:54dismiss the overlay 5:57and there we go 5:59that was a quick look at how to design 6:02overlays in framer sites 6:05thank you for watching and i hope you 6:07enjoyed the video

Watch on YouTube ↗

‹ Boost – Responsive Website Template

Framer Sites: CSS Styles ›