Dim background (set tint + alpha) behind overlay
Love the new overlays feature! As an extended feature it would be great if you could choose what should happen to the background when the overlay appears. For example being able to dim the background by choosing a color and opacity.
This would help with darkening the background for modals etc.
I mean I can use a rectangle at the moment, to simulate this, but if I use an animation for the overlay (e.g. slide in from the bottom) the background tint does slide in as well, when i rather want it to fade in ...
Agree that this would be a very nice addition to the overlay functionality. The workaround suggested by @dani is tedious and given that you can't position overlays below the fold, it means you're really limited.
Armando Scuro commented
@Dani, that works great if you set the overlay transition to dissolve or none, but seeing the background slides as well is not something you see in any good app.
tbh, I would be content (for now) if you automatically fade-in a 50% opaque black tint behind any overlay, similar to how it is in framer/framerX
Daniel Mee commented
I like the workaround @Dani but if it could be made a simple part of the interface that would make it less cumbersome. » Background: Blur [amount] || Colour [picker], opacity [slider]
Sean S commented
I agree. It would be nice to nest overlays into one another or point to 2 different overlays and trigger them with the click of one button. An example of this would be the iPhone share modal which slides up from the bottom of the screen a split second after a dark/blurred overlay dissolves in. This is quite a common action in smartphones' UI.
Martin -- You're request has been noted. In the meantime you can achieve this with the shipping version by completing the folowing steps:
1. Make sure your Overlay artboard is the same size as the artboard you want to apply it to
2. Create a rectangle the same size as the artboard, and check the Background Blur option
3. Add the actual overlay content. The assumption here is that it is smaller than the parent artboard
When you wire the artboard you should see overlay content with the blur background. If instead, you'd like a lighter or darker tint set the background container as white or black with a percentage fill (example 15%).
Hope this helps