• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

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

Community Beginner ,
Nov 17, 2021 Nov 17, 2021

Copy link to clipboard

Copied

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!

TOPICS
Design , How to , Missing feature , Product performance , Prototyping

Views

904

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Community Beginner , Nov 18, 2021 Nov 18, 2021

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.

Screen Shot 2021-11-18 at 4.06.29 PM.png

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 

 

Votes

Translate

Translate
Community Beginner , Nov 18, 2021 Nov 18, 2021

Thanks Chris, the auto-animate way works perfectly.

Screen Shot 2021-11-18 at 5.50.36 PM.png

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

Votes

Translate

Translate
Adobe Employee ,
Nov 17, 2021 Nov 17, 2021

Copy link to clipboard

Copied

Hi Ling,

 

Thanks for reaching out. You can try the combination of multiple artboard with time trigger and slide the notification you can use overlay artboard.

 

Rishabh_Tiwari_0-1637174834482.png

 

Let us know if this is what you were looking for or if you are trying to achieve something else.

 

Regards

Rishabh

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 17, 2021 Nov 17, 2021

Copy link to clipboard

Copied

No, this is not what I described in the question.

The effect is slide in and slide out.

The solution you gave is not a professional way to handle.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 18, 2021 Nov 18, 2021

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 18, 2021 Nov 18, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 18, 2021 Nov 18, 2021

Copy link to clipboard

Copied

This is what I can do the best with XD.

https://xd.adobe.com/view/603a03b6-7ac6-48ca-a9ee-7ac536b634a2-3569/

Can you achive that I describe in the quaestion?

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

With respect, convinve me with sth solid?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 18, 2021 Nov 18, 2021

Copy link to clipboard

Copied

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

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 18, 2021 Nov 18, 2021

Copy link to clipboard

Copied

Hey Kenneth, it is the exact effect I need.

Do you have a link to the tutorial?

Thanks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 18, 2021 Nov 18, 2021

Copy link to clipboard

Copied

Thanks Kenneth, I reproduced the effect. No need tutorial, thanks.

https://xd.adobe.com/view/2102ddde-31f9-4a49-addd-a90f23a94fa1-7451/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 18, 2021 Nov 18, 2021

Copy link to clipboard

Copied

Ha ha you saved me from creating a YouTube tut channel 😂

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 18, 2021 Nov 18, 2021

Copy link to clipboard

Copied

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.

Screen Shot 2021-11-18 at 4.06.29 PM.png

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 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 18, 2021 Nov 18, 2021

Copy link to clipboard

Copied

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. 🙂

 

Screen Shot 2021-11-18 at 1.24.34 PM.png

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Nov 18, 2021 Nov 18, 2021

Copy link to clipboard

Copied

LATEST

Thanks Chris, the auto-animate way works perfectly.

Screen Shot 2021-11-18 at 5.50.36 PM.png

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines