XD Swipe Animation Not Working

New Here ,
Nov 23, 2021 Nov 23, 2021

Copy link to clipboard

Copied

Hey there, I have been working on a file that has the swipe/drag element. The swipe/drag auto animate works for only 4 slides on the pages and stops working on my last page that needs this function. Is there anyway to fix this as I'm stuck on how to fix it. No issues with the other pages, just this one. Any help would be appreciated!

Views

474

Likes

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
Adobe Community Professional ,
Nov 23, 2021 Nov 23, 2021

Copy link to clipboard

Copied

Hmmm, what you mean by "swipe animation not working" is you're getting a dissolve transition instead of drag-auto animate? Then I'd suggest you need to make sure that "auto animate" checklist (elements to be auto animated need to have same name and type) is there. If that doesn't solve the problem I suggest sharing the file so we can check.

 

Likes

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 ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

Hi there. I am having somewhat the same issue.

 

It seems i cant have the swiping left or right feature if i have a long page to scroll. For example on dating apps it has a profile that you can scroll to the bottom and then you can either swipe left or right. I have a page/screen with a long scroll and I'm unable to swipe on the screen, unless the screen fits within the fold. I've been searching online how to fix this and cant seem to come up with a solution. I don't know if i am not typing in the correct terminology for it. I am attaching the file so you can see what I am talking about.

 

 

Likes

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
Adobe Community Professional ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

Hi @papalacios, I can't see a file attached, pls check and update when you can, I'm also gonna do some tests when I can and try to update you. Happy designing!

Likes

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 ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

Sorry about that. I thought I had attached is. It's uploaded now.

Likes

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 ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

I keep adding the file. It shows ive uploaded it and then it doesnt show when its posted

Likes

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
Adobe Community Professional ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

Ah it must be because of some spam protection stuff, happened me in my early days here 🙂 Try to use another free file uploading service like dropbox, google drive etc and make sure the file link is public 🙂 edit: you can also share prototype link

Likes

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 ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

I've uploaded the file to my google drive. You can download from there. I dont know how else to share it. Doesn't seem the upload feature on this site is working.

 

Thank you,

Paola

 

https://drive.google.com/file/d/1Kq7UTA_WRuk0S8M1hVUAYQhtd_T83wFU/view?usp=sharing

 

 

Likes

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 ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

I sent my message at the same time you sent yours. Here is the link to my prototype starting with the page i cant scroll but can swipe. It works fine when testing it on a computer but its doesnt work if youre viewing it on a phone. I designed this for the iphone 8:  414px X 736px. I cant view scroll on my phone.

 

https://xd.adobe.com/view/7da0eca7-4e3d-45c1-9be5-22739e998f76-28f3/screen/117485c1-7d6a-4bac-9326-2...

Likes

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
Adobe Community Professional ,
Apr 04, 2022 Apr 04, 2022

Copy link to clipboard

Copied

I think the problem was in the second artboard, the swiped card was placed on the right, while it was supposed to be placed on the left. Auto animate compares the changes between two artboards, and if there are changes that had been done to the elements that have same layer names & types (like position, opacity, color etc) and animates those changes in parameters. I placed the swiped card to the left in the second artboard and it's swiped to the left, also as in the second artboard, when you scroll down (let's say we're swiping the image with the girl reading a book) as there are no changes in those elements between two artboards, nothing to change, I moved that image to the left in the second artboard and it's being swiped now. (You can check my tutorial video on the subject if it's not very clear https://www.youtube.com/watch?v=vcJfLG2_VTk self plug yes 😛 :)) But this is another great tutorial idea, if I do it I'll update you also, swiping the scrollable elements. But since the diference between two artboards are being animated, both cards are going to be swiped, so you might want to structure the auto animate destinations like:
if 1st card is swiped > auto animate to artboard 2 | if second card swiped > auto animate to artboard 3 etc.. As I said this is another great tutorial idea, you can check the file I edited here (as I said both cards are swiped in the first artboard, just as an example 🙂 :   https://www.dropbox.com/s/9376aeskqnxsm7n/testing%20swiping%20left%20to%20right%20and%20scrolling%20...
Oh and I also suggest making the bottom nav component to have states for each active link, since they're named differently in first and second artboards, it just fades out & in instead of an auto animate. Happy designing!

Likes

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 ,
Apr 05, 2022 Apr 05, 2022

Copy link to clipboard

Copied

Thank you so much @AkinGn 

 

I see what you mean. Thank you so much for helping me out with this. I'll definitely take a look at the youtube video you sent. The prototype works great when viewing it on Adobe XD. I can scroll and swipe. It's great! However, when i try to view it on my iphone with the adobe xd app mirror what i have on my adobe xd on my computer, it still doesnt scroll. 

 

I am testing this protoype on my phone because I've noticed some testing subjects find it hard to interact with a mobile prototype on a computer. I am having some participants tap and drag on the screen when viewing it on their computer. They can't seperate mobile gestures when they see a screen that looks like a app on their computer.

 

Here is a link of a video showing how I can't scroll on my phone, but I can swipe. I have a work around now. I removed the bottom nav and that lets me scroll.

 

Thank you! You're help is very much appreciated.

 

https://drive.google.com/drive/folders/1dqFxGNL9Aoh3T_Ylj4WoU85fZysf9gwz?usp=sharing

 

Likes

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
Adobe Community Professional ,
Apr 05, 2022 Apr 05, 2022

Copy link to clipboard

Copied

LATEST

Ah I see @papalacios, haven't had a chance to check on my phone yet but great to see you've found a workaround, happy designing! 

Likes

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