Link multiple transitions with overlay and retain background?

[Joe McLean]

How do I go about linking multiple transitions within an overlay? I have a modal and I need to comp a couple interactions in that overlay. I have created a few artboards but when I wire up the interactions the overlay effect goes away and I just have the modal sans the background.

[Atul_Saini]

Hi UncommonJoe,

Thanks for using Adobe XD and sharing the feedback about this new feature. It would be great if you could share a small video or GIF so that we can understand the situation and assist you further.

Thanks,

Atul_Saini

[Joe McLean]

Here is a video

https://www.screencast.com/t/Hyf23ZkjE

If I make it a transition, the background isn't retained. If I make the transition from B to C an overlay, B fades out then C fades in. I have tried it without a transition or transition time and it still blinks off then on. What I would expect is to see the B change into C with no outside transitions.

And the prototype

https://xd.adobe.com/view/92bc077c-0f04-4dfc-71b0-55bd2f8f230e-e48d/

[Atul_Saini · Accepted solution]

Hi UncommonJoe,

Thanks for sharing the video and the prototype, I would like to inform you that currently we only support displaying one overlay at a time. If you stack multiple overlays (like in the video) then the first overlay will dismiss before the next one appears.

It looks like this feature is already requested here: - More interaction on Overlays – Adobe XD Feedback : Feature Requests & Bugs. If this is what you are looking for, I would request you please vote for this feature and please add your comments as well.

Hope this helps, please feel free to update this discussion in case you need further assistance.

Thanks,

Atul_Saini

[luojaUK]

Very late reply and probably no longer relevant to you, but for anyone reading this looking for a solution, what you're asking for is possible under specific situations. I have a prototype whereby I want to click a button in an artboard, have an overlay appear and have a off-screen panel slide into view on top of the overlay. To do this I need 3 artboards:

1. My main artboard with clickable button
2. A copy of the main artboard with the required overlay on top of the other content
3. Artboard containing the slide-up panel. Artboard has no-fill/transparent background

I can then set the following interactions/actions

1. Link button click to copied artboard with Overlay.
   • Trigger = Tap
   • Action = Transition
   • Animation = Dissolve
   • Easing & Duration can be whatever you want
2. Link the copied artboard (with overlay) to the slide-up panel artboard
   • Trigger = Time
   • Delay = 0s
   • Action = Overlay
   • Animation = Slide Up
   • Easing & Duration can be whatever you want

When run, what happens upon clicking the button is that the second artboard fades into view, but as its a copy with the overlay on top it looks like its just the overlay appearing, once complete the slide-up panel slides into view. How smooth.fluid this is will depend on your durations.

Hope this might help someone.

Matt