Search

Learn How to Animate a Mobile App Side Menu in Adobe Xd


I love designing, but I am equally passionate about cycling.


So in this tutorial I decided, why not let my two passions collide?


Let's dive back into Adobe Xd and design a fictional cycling mobile app. Working on four iPhone X artboards, I will demonstrate how to design and use Prototyping tools to add a Tap trigger with an auto-animate action to have a sliding experience when tapping on the menu icon.


To make it easier for you to learn all the steps, I am going to break down the prototyping process by artboard as named in the project. Follow each step and you should come to the same result!



Don't forget to test your work as you're prototyping the artboards.


Main Profile

  1. In Prototype mode, click on the menu icon once.

  2. Click on the blue wire handle and drag to the second artboard (Main Profile 2)

  3. Set the Trigger to Tap

  4. Set the Action to Auto-Animate

  5. Set the Easing to Ease In-Out

  6. Set the Duration too 0.3s



Main Profile 2

  1. Click on the Menu icon once

  2. Click on the blue wire handle and drag to Main Profile artboard to loop back when clicking

  3. The Interaction settings should be the same as above. If not, repeat steps from Main Profile settings.

  4. Click on the Feed icon and drag the blue wire handle to the third artboard (Main Feed)

  5. Set the Trigger to Tap

  6. Set the Action to Transition

  7. Set the Animation to Slide Left

  8. Set the Easing to Ease In-Out

  9. Set the Duration to 0.3s



Main Feed

  1. Click on the Menu icon once

  2. Click on the blue wire handle and drag to the fourth artboard (Main Feed 2)

  3. Set the Trigger to Tap

  4. Set the Action to Auto-Animate

  5. Set the Easing Snap

  6. Set the Duration to 0.3s


Main Feed 2

  1. Click on the Menu icon once

  2. Click on the blue wire handle and drag to the Main Feed artbooard to loop back when clicking

  3. The Interaction settings should be the same as above. If not, repeat steps from Main Feed settings.

  4. Click on Profile icon and drag the blue wire handle to the first artboard (Main Profile) - This will bring the user back to the main profile page

  5. Set the Trigger to Tap

  6. Set the Action to Transition

  7. Set the Animation to Slide Left

  8. Set the Easing to Ease In-Out

  9. Set the Duration to 0.3

325 views

Follow

  • Black YouTube Icon
  • Black Facebook Icon
  • behance-logo

Contact

519-564-1981

©2018 BY MONTILLA DESIGN