Inspiring

Answered

Can I do a notification on a new page slide in and slide out effect?

12 replies
1262 views
Translate

The flow is I click a button --- go to a new page --- a notification slide in --- stay 3 seconds --- slide out.

Is it possible to achieve this in XD?

Thanks guys!

This topic is closed to new replies. Start a new post to keep the conversation going.

L

Ling Fei5F90Correct answer

Inspiring

Thanks Chris, the auto-animate way works perfectly.

Artboard 2-3, 3-4 use auto-animate, smoother animation actually.

L

Ling Fei5F90Author

Inspiring

Hey guys, finally with the help of Kenneth, I achived the effect.

Here I will explain how to do it and what the trick is.

The trick is the 4th page. I need to create a 4th page with no content to make the 3rd page (toast page) to slide out.

Have to say it's not intuitive but it works.

@Rishabh_Tiwari @Chris W. Griffith @Kenneth Kawamoto

Translate

Chris W. Griffith

Community Expert

You can do it with two artboards. 🙂

On artboard 1, have the notification elements off screen. Then set the interaction wire on the button to auto-animate. On the second artboard, just have the notification element positioned where you want it. Then just add a time wire to auto-animate back to art board 1. 🙂

Translate

L

Ling Fei5F90AuthorCorrect answer

Inspiring

Thanks Chris, the auto-animate way works perfectly.

Artboard 2-3, 3-4 use auto-animate, smoother animation actually.

Translate

Kenneth Kawamoto

Community Expert

Is this closer to what you are after by any chance...?

https://xd.adobe.com/view/bc85335f-f6b9-48f9-a6f5-82593d07ded4-e9d6/?fullscreen

Translate

L

Ling Fei5F90Author

Inspiring

Hey Kenneth, it is the exact effect I need.

Do you have a link to the tutorial?

Thanks.

Translate

L

Ling Fei5F90Author

Inspiring

XD cannot do slide in and slide out, the very common prototype simulation that most App already has and been using.

How many years XD out in the market?

Translate

Chris W. Griffith

Community Expert

XD can do this. Slide In and Out are just position changes. You just have to spread the sequence across various artboards. It is not possible within a single artboard.

Translate