Overlays

We’ve added support for Overlays to Framer Sites, allowing you to design video overlays, modals, toasts, banners, slide-in sidebars and much more. Select a layer on your web page, then click on Overlays near the top of your property panel. This brings you into an edit mode, where you can customize your overlay. You’ll notice a backdrop being applied by default, and you can pick between a bunch of animation presets too. Note that each layer you draw or paste onto your Overlay can have their own Enter and Exit animations too, allowing for expressive customization. Be sure to give the playground demo a try too!