Drop-down menu

I have been experimenting with Adobe XD and how to display certain types of micro-interactions for our development teams. 

With the addition of Adobe’s auto-animate feature, they really improved the capabilities of their application and leapfrogged their competition. 

This is a simple drop-down animation created by using 4 artboards and a few auto-animations between them. 

There are 4 artboards that create the above micro-interaction. The first transition is triggered by a click on the “Plan Your Vacation” table. 

The next animation is automatically triggered as a Timed animation to show the sub-menu of the parent item. 

The third transition is another click to close the sub-menu with the final trigger using another timed transition to close the menu back to its original state. 

If you have not tried AdobeXD yet, now is a great time to test it out. There was a recent major upgrade to the application that adds some refinements to existing tools while also extending its capabilities.