Adobe XD Carousel Animation Tutorial

In this Adobe XD tutorial, you'll learn how to create a simple carousel animation prototype.

First, we design the main screen UI and individual cards for a meditation app. After you finalize the design for one card, copy and paste it, drag and drop to change the photo, and update any text. Make sure there's an artboard for each individual card. In this design, show the previous and next cards peeking through on the sides of the main card, so the user knows this is a carousel they can scroll through.

Once your design is complete, switch from design to prototype mode. Select the first artboard and click on the home button so it turns blue, this means it's the first screen of the prototype. From here it's pretty simple. Click on the card to the right of the main card, drag it to the next artboard. Be sure not to connect it to any specific element but the entire artboard.

Use the Drag trigger, Auto-Animate action, be sure the destination is the name of your next screen. You can play around with the easing, I use Ease In-Out for this prototype. Continue the same process for all cards. Connect the right are to the artboard on the next, connect the left art to the previous artboard. Since Adobe XD remembers your settings, you won't have to change them (unless you wanted to create a different animation). When you're done, press the play button to preview your prototype animation.

WATCH NEXT

---
LINKS

---
ABOUT ME

Hello! I'm Monica, a designer living in San Francisco, California. This channel is a place where I share all my design and creative side projects. By sharing my process, I hope to help you learn more about design!

---
SOCIAL

---
About this video:

[relaxation_therapy]

Thumbs up for your lovely voice, I fell in love instantly! Simple and easy tutorial, please keep making more videos like this <3<3

[azeline]

How about if you want to go back from slide 2 to slide 1? Please help i am having trouble with this i couldnt think of the roundabout

[Amitesh_Saha]

Can we make the carousel move automatically like we see in many shopping website??

[kaukabux]

How are you able to use drag trigger twice from an artboard - one for the left slide and one for the right?

[giangdo]

Can you make a carousel with a full-screen image? without needing to show a little of the next image to connect the dots?

[WD]

Hi thanks for the tutorial, I have question, How do i make the second row able to scroll sideways independently from the top row, i have adobe xd 2019 so i don´t have the new scroll group feature. thank you very much for you time.

[shashwat_satya]

Extremely helpful for beginners.. thanks

[Low]

Hey there, I am trying to do this animation for my Website with a before after slider. Unfortunately the Picture isnt changing smoothly, but in an instant. Even though I am using the same settings as you are. What could be the problem? seems like adobe XD is just not working correctly

[UXCuriosity]

I follow the instructions and the behavior is very random. Some transitions are right and some transitions does not do the slide (it blends in) Weird

[aspxnvii]

Thank you! This worked for me :) However when I drag, the image for a different artboard will overlap either above or underneath my current image while dragging to the next image and then rest in it's default spot. Not sure how to fix that, but that's the only issue I had. Otherwise, thank you for the tutorial!

[Amitesh_Saha]

What do you think is better figma or adobe xd??

[pedroelton]

Would be great to see an endless carousel. So, the last picture would keep going right, but then it would auto-animate for the first one.

[Faizno]

wait...what....why you not group all objects and trim and fit artboard area which you want and just play and swip

[bradleyferreira]

I get different animations for the transition. Fading, dissolve, one image group manages to slide. Followed the tutorial to the T and doesn't work.

[danielanderson]

If anyone is having issues with the tiles fading into eachother instead of scrolling, I found a reliable alternate method.

Start with one artboard, and put all the tiles into a scroll group, spaced how you want, and then change the scroll group view so that you can only see the amount of tiles you want.

Then duplicate that artboard so theres one for each image, just like in the video, only on each artboard you can then select the images within the scroll group, and then move them all along so that each artboard has the next carousel tile along in the centre.

Now when you prototype it and XD tries to auto-animate, instead of trying to animate two separate objects together, it now knows that the tiles in the scroll group have just moved, and will do a nice smooth scroll automatically.

[Serenitinow]

Is it possible to automate the horizontal scroll in Xd

[kittens]

How do you personally learn programs like XD?

[refinedphenomena]

Is there a reason for not using the scroll feature?

[ranzuki]

i've tried it and it is not working it won't drag at all :(

[louiseh.]

Thanks for the tutorial! Unfortunately, the left picture (which is not the main picture) moves from the left to the right in the background. The same problem is with the right picture. It moves from the right to the left in the foreground when I drag the carousel. I did all the settings like you did but I can't fix it and it is really annoying to have a picture which moves on the background when I slide to the right and a picture which moves to the left in the foreground when I slide to the left :( I hope you can understand what I mean :D