Auto-Animate Like a Pro in Adobe XD

[@bensonderskov]

If you do want the color wheel to gradually fade between the colors, you can duplicate it and make them change opacity on top of eachother. That simulates it

[@JMFowlkes]

It's actually beyond helpful to see how you organize your artboard and assets -- the small things that aren't really taught thoroughly.

[@reinada7640]

Yeah, I really recommend following along . There's some satisfaction to everything working.

[@ShodaiThox]

I was and still stunned by your ideas and creativity, a really well done mate, keep up the good work!

[@ForeverDansky]

Thanks so much Shodai ❤️

[@johnvv5055]

Thanks man. I'm switching from Sketch to Xd and your tutorial was very helpful.

[@ForeverDansky]

Awesome to hear John, glad the video was helpful :)

[@angelicaortiz5767]

I reall like the quality and the smoothness of the animation, thank you for sharing!

[@ForeverDansky]

You're welcome Angelica!

[@bajiraosingham9495]

About time XD added Horizontal swipe as a Gesture too.

[@giovannavw275]

MAN I JUST FOUND YOU OUT I AM IN LOVE SERIOUSLY SO WELL EXPLAINED! finally yessssssssss

[@karthikrajeev3772]

I got a real help from your videos to build up my skills. Great work man. Thank you so much.

[@mjkritzi]

If you copy and paste the pink rectangle on the follow screen under the blue rectangle and move the button text above the blue rectangle it will animate the colour of the rectangle.

[@richardsonbuyayo6933]

If adobe XD adds a timeline... ITS GG

[@sasquarth]

yesss!!!!!

[@pdrohts]

And support a HTML + CSS convert...

[@Alisyafic]

Soon brother, soon.

[@portlyoldman]

Pedro Henrique there are two free add ons for this.

[@saulocodes]

@@portlyoldman names?

[@saibhargavaramu5749]

I thought dansky will end the video now .. but he kept on adding new improvements .. wow ! .. I got to know so many things !!

[@leite1431]

WOW AWESOME INTRO!! Usually i dont get impressive with intros, but that one is killer!!

[@ForeverDansky]

Thanks so much Leite 🙂

[@OliviaMmmm]

That was awesome! Suddenly it seems so easy. Thanks!

[@ForeverDansky]

Cheers Olivia! You’re welcome ☺️

[@mariushebnes5951]

Wow, this was a really nice tutorial. I personally preferred that the comment would slide up and down instead of sideways. it just feels smoother to me

[@ForeverDansky]

Glad it was helpful!

[@mobinaslani9077]

You know what Dan?! . . . . That is AWESOME 🤩

[@ForeverDansky]

Thanks Mobin!

[@jer-]

Just got into UI and UX a couple weeks ago and following this tutorial has my imagination running WILDDDDD. Thank you

[@princevasimalla]

haha, where are you now mate?

[@MehediHasan-wq4zk]

One of the best video of Adobe Xd animation. Thank you.

[@XxXdancex]

Lmao I was here for the info but ended up getting bullied into organizing my illustrator layers 👁👄👁

[@cseymour97]

auto animate is the best. It's so much fun for creating layered parallax effects for web designs.

[@sprioleau]

@dansky You mentioned graduation of colors between screens using auto-animate. One trick I've used that gets close is duplicating each color of the button on the current artboard. Then, for the button colors that are not needed for that artboard, reduce their transparency to zero. Keep the needed button at 100% (opaque). Repeat this transparency reduction for the un-needed instances of the buttons on each screen. When you do auto-animate, you'll see a much more subtle and gradual color change than simply changing the color of the button from one artboard to another as you've done in this video.

[@lisamithani2163]

Super Creative way to do these transitions Love it !💕 ✨

[@ForeverDansky]

Awesome Lisa!

[@juliancaraganciu]

You can try fading in and out colors with the same method: as in having two objects of different colors one on top of the other with different opacities. It's how it used to be done in js a long while back ;)

[@ZahraSharafi1994]

Awesome tutorial, totally enjoyed animating with XD. thanks!

[@ForeverDansky]

You’re very welcome Zahra ✌️😊

[@alexandrerios1502]

He skipped the reviews left fade-in in the followers artboard, but like he says, "It's a tutorial". Great video Dansky, I just miss the support from people on your videos.

[@ethanhunt4521]

Love the way you said "Enjoy the chaos" :)

[@darksideishere]

love your creativity

[@ghhfhk2768]

thanks, it actually let me through so i could download it.

[@bluntbrave4488]

If that layer disorganisation made you angry, you should see my layers.... 😂😁 Great tutorial, thanks!

[@raol635]

Thank you. First tutorial for me. Interesting.

[@hanimj.9507]

What a cool and easy to follow tutorial! I’ll definitely try this out and let you know 😊

[@ForeverDansky]

Awesome Hanim! Yea would be great to know how you get on 👌

[@CCreative365]

That was so slick! Thanks for this tutorial

[@jovannamireles2788]

wow! this is an awesome design! and you make the animation look so easy!! Thank you!

[@ForeverDansky]

You're welcome Jovanna 😊

[@shubhsharma19]

learning from u is so fun

[@willreis5625]

Thanks Dansky, this one of the best tutorial.

[@jamaledinramzani5846]

Very practical and professional

[@akasage]

That auto animate on the chair at the end >>

[@AngelaDesignsThings]

This is very useful, just starting with this program with daily challenges and I had difficulty understanding the differences between those transitions and auto-animate. Thank you for including these short-cuts

[@sophieslozes9717]

Thank you soooooo much for this tutorial !!!

[@williamgarcia3697]

Thanks very much, basics and order are very important to come up with a great design!

[@haciendalasbromelias3671]

I really enjoyed the tutorial! thanks a lot!

[@specialprojects602]

This was very helpful. Thank you very much.

[@rickjackley8531]

Great video! Decided to look into the color auto animation, or lack of support. What I did was set a gradient with the colors I wanted and had a mask move and set the masked section to the other part. Hope this finds you well. :)

[@sauwce8504]

I really liked your tutorial! When you export everything from XD and send it to the developer, to build the actual app, the overlapping objects with 0% opacity not causing a problem? Or are you only using this version to send to the customer to approve and you have another version without animations to send to the developer if your part of the job is done?

[@LiyaaHuang]

^This!!!

[@imanco2086]

This is for your prototype. Either for client demonstration or as a guide for the developers. Usually, if it cannot be done by the developer themselves, the UI/UX designer has to provide the animation for the developer.

[@Bella-gv1hc]

Thank you! Very clear and helpful.

[@14onyx]

and now you can animate outlines yay

[@Siraphyn]

Love your series, I'm a Product Design Director and my team uses Figma, but this is fantastic from Adobe. Keep up the great work!

[@Darnosman]

u deserve it bro. Liked and subscribed. more power to you

[@thetechtiger1117]

excellent vid Dansky!

[@omegashin9420]

It was a joy to follow along and see it become so beautiful! Great work Please adjust the audio to be a tad louder though.

[@leiv]

Good tutorial... U are an elegant UI designer!

[@mrglissi]

I didn't really have to click on this, but I still enjoyed watching it. Thanks for making stuff simple and easy, man! Also, that outro track is great!

[@redcat10601]

Ease in-out, duration 0.5 *XD will remember that*

[@AceCmbatguy25]

Lmao yes !

[@HuddUniVisualDesign]

Brilliant video! BTW. You could create the colour transition (you mention) for the buttons / links using an 'auto-animate' transition from 0-100%!

[@dianewallinger3038]

Hey! I wanted to auto-animate (using component states) the buttons of my app, to add a "clicked" effect before the button takes the user to another page. Am I right to stay that this is not actually possible?

[@jessicamiller7950]

Same question! Brand new to this and wondering if it's faster to design prototypes just using artboards, or if it can be useful to also make component states

[@auditid]

This is amazing. Thank you for making such an easy and understandable tutorial. Excited to try it out!

[@Oddstacker]

thank you, thank you, thank you. Awesome tutorial. Enjoyed creating if from scratch, but I used your "ring stuff" since I don't use illustrator and I got hooked trying to create it with xd. Thanks again

[@yuelingtan5825]

Thank you so much Dansky :'D Will really need this for my current project!

[@christianzavanaiu16]

Really love this tutorial! It feels like a magician learning magic! Will be reviewing your other tutorials now..

[@adriansbgs]

Thankyou! It's help me a lot Dan as a starter who still learn about UI/UX 🍻

[@charleswyke-smith8781]

Very helpful - appreciated the download files - thanks!

[@christinetobiasz]

such a easy tutorial thanks again!

[@gishifps]

Great video! Nice & clear steps. Thanks for sharing!

[@kalpeshpatel040]

Thanks a lot for creating this video. It helps a lot...

[@TazzM]

The earrings look epic :P ..thanks for the video!

[@roxinviviantopp7747]

Dansky the Place to Be...!!! love this guy'z content, whenever i search something on youtube for a solution if i happen to see a dansky video i just scroll right to it..and also that shirt is super cool dude is it your own merch..?

[@hninpwint7503]

Thanks a lot. Your's tutorial was a great helpful for me.

[@ximenagutierrez9249]

omg thank you so much, this helped A LOT

[@ForeverDansky]

You're welcome Ximena :)

[@ChapitZulkefli]

thanks. this helping me a lot. stay safe.

[@laneveach9317]

Great stuff as always Dan! Each tutorial gets better and better.

[@vry.design]

I like it, man. Amazing concept!

[@ForeverDansky]

Thanks so much Vikas!

[@PhuongLe-ew6pj]

Yeah, finally I did it, follow your guide very easy. Thanks for the vid.

[@ForeverDansky]

You're welcome Phuong!

[@paulrw1691]

great Video! I think a big problem of this is if you have one small change in your layout after doing animation stuff it's quite an effort to adapt all the layers.

[@ShivkantBaghel]

your intro music is awesome man

[@just_timothy]

I heard the song again in my mind after reading this

[@jessieash5134]

Thank you so much for this tutorial

[@ForeverDansky]

You're welcome Juvia :)

[@marvinogah]

You could graduate colors by just place a different colored layer on top of the previous layer, and take down the opacity to 0, If layer 1 is red and layer 2 is white, putting layer 2 on layer 1 at 0 opacity, auto animate should be able to animate it to 100 opacity in the following state, that could do the trick.

[@lindamaddocks8040]

That was fun! TY so much.

[@jackhoweller]

One way to solve the button colour fading is to convert the text to paths, then put an invisible ‘hitbox’ over the top for each button to use to switch artboards

[@alexstolzoff4035]

If you want to animate the colors just copy and paste it the color your transitioning on to the previous screen and wrap it with a mask, give the rectangle of the mask width of 0, then copy that mask over to the screen you want to transition to and drag it over the element you want to give a color transition appearance

[@alaahershey1797]

Hey, that was a great video, I only have one problem when I press on comments from the home page the ring thing is moving, but clockwise, not like in your video, so it's taking the longest path, any fix for this would be so appreciated. I fixed it by making the value of the rotation negative. it was 180, I changed it to -180.

[@certifiablegamers4248]

Hello sir, I have a question. When you created the circle in illustrator you made 4 sides of the circle. But when you used it in XD you rotated the circle and used the same side on the 3 sides. Now I can understand why you rotated the and changed colour of the same side of the circle. You asked XD to move the part of the circle on changing art board. My question now is - What is the use of other 3 sides of the circle?

[@s47368]

They're there so the single side of the circle doesn't feel lonely. Sometimes they go out together to grab a drink. Or to a fancy restaurant to celebrate their combined birthdays.

[@philipodallo7950]

Thank you for this.

[@helenesandvik9841]

Tank u so much for this great tutorial

[@grav3ns3n]

At least 2 beers from me for this video, many many thanks! Subscribed and liked!

[@Jerraleon]

This was great definitely going to use these functionalities!

[@FahimMD]

Thanks for making this content. Will be using it for sure at work 🤓

[@AbhishekKumar-gg6ox]

Sir, You are great. I love your attitude and your way of teaching. Thanks for your great work. Keep it up.

[@AgentStofftier]

Didn't know XD. Didn't know XD is that great. Thank you very much, dansky!

[@Kxarwarx]

Step by step - Easy and Simple =). *Dansky, thank You!*

[@lonleybeer]

Awesome tutorial, learned a lot of useful tricks cheers!

[@IPD1984]

Absolutely awesome tutorial! Highly appreciate it! Thank you! :)

[@WizardKing24]

A really cool and very helpful tutorial, love the design! *-* By the way: Is it possible to buy this t-shirt ? :D

[@nehagupta98721]

I have the same question. I want that t-shirt, please drop in the link

[@AmuraLee]

This tutorial is awesome! Million thanks!

[@prajuvin1602]

Wow....🤩🤩🤩

[@ewelina3906]

Thank you for helpful tutorial :>

[@GreenDrn]

you helped me a lot THANKS!!!

[@ForeverDansky]

You're welcome :)

[@ramazanguler6066]

I haven't watched a better video about auto animate

[@OURWEBCO]

really thanks you're the best

[@tim_nextvolleyball]

This is incredible!!! Thank you for this tut and file! I will use this for my personas!

[@ticmanuelbenr]

I love it. Gracias