Copy link to clipboard
Copied
Can you send a screen from the "Prototype" tab, with all artboards selected, so I can see the links?
I quickly replicated your screens and it works for me.
If I understand correctly, when you tap on "Sub List 1" on your 3rd artboard, instead of opening the Sub List 1, you get a black screen?
Yeah, well, Xd is still a bit clunky with these things, if you transition between 2 overlays it kinda removes the first one, and then starts the animation for the second one. There isn't an overlap between them at any point.
As a result you get this cutoff when switching overlays, and the smoothest thing you can get is to have no transition animation between them which looks the most seamless, but yes - you can't use auto-animate and overlay at the same time.
The only way to do this with a nice
...Copy link to clipboard
Copied
Can you share a screenshot of the artboards, or even better - the file, so we can see what's going on?
Not sure if I fully understand how it is set up.
Cheers!
Copy link to clipboard
Copied
Copy link to clipboard
Copied
I Hope you can understand,
I tried to open the sub list as an overlay to the last artboard but I get a flash of a black background.
Copy link to clipboard
Copied
Can you send a screen from the "Prototype" tab, with all artboards selected, so I can see the links?
I quickly replicated your screens and it works for me.
If I understand correctly, when you tap on "Sub List 1" on your 3rd artboard, instead of opening the Sub List 1, you get a black screen?
Copy link to clipboard
Copied
Thank you for trying this.
I made all my buttons as components with hover.
The mistake I made was when I linked my button to the 3rd artboard with the sub list I didn't choose the overlay as you did.
I had created a mask for the sublist to give drop-down animation. Now I'm not getting a black screen. but my animation for dropdown is not good. I chose dissolve option. So it is uploading the menu again entirely.
 
 
Copy link to clipboard
Copied
Yeah, well, Xd is still a bit clunky with these things, if you transition between 2 overlays it kinda removes the first one, and then starts the animation for the second one. There isn't an overlap between them at any point.
As a result you get this cutoff when switching overlays, and the smoothest thing you can get is to have no transition animation between them which looks the most seamless, but yes - you can't use auto-animate and overlay at the same time.
The only way to do this with a nice animation and proper functionality would be separate screens that have the different versions of the menu, so for each of your screens you need to have like 3-4 more with the different menu sections, and that I imagine would be a nightmare. I would do it for one screen to show the animation, and have the overlays with no animation for the rest of the prototype.
As a whole right now Xd is more suitable for testing user flows / wireframes, maybe some animations, but not a fully-fledged prototype with advanced animations / interactions.
Copy link to clipboard
Copied
You are right, it would be crazy to manage all those artboards along with the dozen more for the project.
I did try this last week and since I did not get a smooth transition I thought I was doing something wrong.
The drop-down animation works perfectly without the overlays.
Thank you so much for your time.
I had a tuff time with this issue for almost a week now.
Copy link to clipboard
Copied
Hey, actually, there is a way to make this work with one overlay.
1. Make a component that contains the whole menu.
2. Within that component, make each menu section as a group.
3. Make different component states for each opened section, with the others closed.
4. Add Tap interactions to each group that points to the opened state for that group, with an auto-animate.
You can check this thread, there's a sample file in the comments:
https://community.adobe.com/t5/adobe-xd/design-how-to-design-accordion-component-with-single-artboar...