The Best New Feature in Adobe XD - Auto Animate Tutorial

[@TheDesign11]

Hands down best channel for ui design tutorials on youtube. Thank you so much for your time and effort, really has helped me progress.

[@equus123]

I have a lot of experience using XD but it's mainly in static website design. I have watched many prototyping videos and this is absolutely the best and clearest tutorial yet. The lightbulb moment for me was just under 11:30:00 when you explain what the program does and how it interprets the animation. This explains why other tutorials group and name things but they don't even come close explaining why to do this and how it is necessary. Thank you so much for making this short and sweet video! (Also, many others are too long with extra fluff and dead time.)

[@aspxnvii]

This was so fun to make! Thank you for making this tutorial so easy to understand. Xd is becoming my favorite Adobe software

[@ph3me]

Bro, this might be a little off topic, but your channel is so underrated. You are an amazing designer. Your concepts are out of this world. All I can say is keep up the good work mate. Killing it👊

[@CalerEdwards]

Thank you :D

[@c0rpsecr0iX]

I'm totally noob on designing. no training or whatsoever. I just only discover your channel yesterday. Your tutorials are on point and designs are super great! This made me want to learn web design. New subbie here. 😊

[@CalerEdwards]

Awesome!! and thank you :D

[@dt_generalzod]

Wow, love the audio

[@unorthodoxjourney]

Question - How to just slide the banner images and not the whole artboard? All my elements (main menu bar + all others) get slide when I prototype 2 artboards, Is there a way to just slide the banner images and not the whole artboards?

[@allan_photographer]

Thanks a for the video, want ask how do you prototype the navigation menu.. should i prototype the navigation in each slide ?

[@zed22065]

How to get these pink guidelines as you did at 2:09 .. and how to position a layer using the shortcut. I know it's Ctrl + Shift + [ for bottommost and Ctrl + Shift + ] for the topmost position but if I want to position it under or over just one layer? I hope my question is clear :)

[@CalerEdwards]

Holding alt/option while you have an element selected while give you those pink guides. Also the shortcut is cmd + [ to send backward one layer. cmd + shift + [ to send all the way to back. Same goes for sending it to front. Hope that helps :D

[@zed22065]

Thanks. Keep these Auto Animation Tuts Coming 👍👍

[@LimitlessHoops]

Yep, best explanation ever. Thx

[@utbaaziz1891]

Your content is super cool. Great work. Keep it up.

[@yuhesdance1380]

this is a brilliant tutorial!thanks

[@aswinm93]

Thank you so much. I was searching for a way to fix the fading out to white part for a very long time.

[@Melv86]

Thank you for this! It was very helpful!

[@cemkutlu404]

nice video! quick question! i did these in a project. and i have the home page in the same project. so there's different artboards. how can i merge this animation to my home page?

[@midnightcreature7583]

heey! this was awesome thank you so much! do you have a way to swipe the card back instead of having to click on skip?

[@Annak942]

May I ask why do you need to go back to prototipe when coping and pasting the heading? wouldn't it work if i did it in design?

[@cyrusleung2416]

Thanks for sharing. I am a beginner. What if I would like to export for a real website (eg. html file), what plugin should I use ? I tried web export plugin, but the slide effect doesn't work.

[@rahulkale0918]

Loved it !! Thanks a lot :D

[@shomuyzdaniel5401]

thank you for this knowledge

[@CalerEdwards]

You bet!

[@eusa1851]

Amazing and very informative!! MORE AUTO ANIMATE TUTORIALS PLS

[@radiozinebladi]

Thank you so much for this great video, very well explained !

[@johan19840]

just to know .. why did you choose that 12 grid layout? to end with 1640 screen width?

[@jessicasturchio6573]

Hi...Looking for a tutorial for auto-animate on a continuous scroll. For example: I have a few elements that I want to auto animate in from the left or right as a user scrolls down the page. I'm using most of the techniques in this tutorial, (timed animations, sliding things off to the side of the artboard, opacity etc.) However, I noticed the scroll is a bit glitchy. Is there a way to make this more seamless, or is this a software issue. Could you do a tutorial for that? This is definitely the best tutorial I've found so far :)

[@SophieReverb]

Nice, thanks for the awesome videos.

[@ivanbadia3232]

The time trigger doesn't always pop up in the drop down. If I connect the first two the next one defaults to tap, drag, or voice. Any experiencing the same problem

[@MillionFrames]

Yes. Similar issue

[@MillionFrames]

I got the solution to the time trigger issue. Click at the Artboard and then link. Don't Click on the elements of the page.

[@ivanbadia3232]

You have to select the artboard an object can’t use Time Triggers. Is a silly thing to ignore when I would like to make an object move on different timelines. My biggest complaint with the software a Locked Object doesn’t really lock. So, if you use the plugin Guide Guide it will create an object the full width and height of your artboard. Every time I want to select an object below I have to control/alt select it. I posted this request on Beta and The Dev team has ignored this critalnpart of any design software.

[@DanielTeras]

Thank you so much for another fantastic tutorial, Caler. I'd like to know how I can incorporate this technique into an image gallery on one specific artboard/webpage? I am struggling to find a demo on this specific task. Thanks.

[@markelrandle1029]

Also needing help here

[@simpleprogrammer5834]

Hello clare thanx for this awesome video 👌 I'm trying to create an auto slide but not for a whole view port can I do that 😥

[@musictracks1817]

very complicated one.Please explain how to make a website ux with the photo slider same as your one..

[@stefanrichter3092]

Nice video - I was only surprised that you did not use "repeat Grid" for the menu at the top.

[@CalerEdwards]

I like repeat grid but sometimes I feel like I can create it faster. For something like that at least :D

[@stefanrichter3092]

Got you & agree. Really helpful though if you have buttons with icon and text...

[@rajasega2889]

this is amazing

[@techwithsunds8858]

Welldone... I have one question why my preview desktop is not full like yours...??

[@CalerEdwards]

Thanks. Not sure what you mean here. Can you provide more details?

[@zed22065]

Thank you so much !!!

[@4988raja]

I’ve subscribed 🎉🚀

[@CalerEdwards]

Welcome :D

[@Rightlime7923]

This thumbnail is the best i have ever seen.

[@nikoinvicta]

Why did you put the arrows?

[@dimdim01]

Holy ... amazing!

[@abdlilahagouni]

thank you so much

[@thabetdebuch7461]

Amazing 😍

[@chipkop6502]

Where can I find this plugin（character styles）?

[@OliverGomes]

Awesome !!!

[@VicHecho]

10 out of 10 will watch again

[@CalerEdwards]

:D

[@maskman4821]

Is any developer developing plugin that converts xd files to html, css, javascript? Is it going on?

[@maskman4821]

Mr. Caler Edwards could you please attach the final xd files for us to download? We just want to play with it...

[@prielhackim]

Cool Thanks

[@sadeghmohammadzadeh7658]

amazing!

[@MrAkeemdainty]

Do you mind if I ask where do you get your hd images from?

[@CalerEdwards]

unsplash.com is my go to for free images :D

[@MACH_SDQ]

Very gooooooood !!!!!

0.5 (zero point five) is the new 0 (zero) :D 9:42

[@CalerEdwards]

apparently it wont go all the way to zero lol

@@CalerEdwards just kidding :) apparently XD loves decimals, what i can see many times working there and its destroing me, cause i loved clear pixels, but since Photoshopare fucking around with me, when i make something 1600px wide and f.e. 900px tall and it changes it to 1600x899,99px irather dont care more.. :D

[@TutoCail]

thanks you

[@shivangijaiswal5952]

XD launched these feature and didn't explain it all so how can we understand that we can do that??? Thanks to you for explaining.😀

[@victortrillion]

What about the arrows?!

[@nikhiltyagi1080]

Please don't forget about part-2 coding of your undraw landing page!

[@ldcpalv]

I would like to see this with a home page with a lot of content. I think it looks great for just little animations in little canvas, but the truth is too much complicate in a real prototype XD

[@Love-straykids-w9x]

How to have the gird like u :(

[@bugfound2324]

Do you code as well

[@cagatayemre]

So amazing, but I'd like to learn it with css.

[@abdullahanis4671]

then learn CSS bro you are at the wrong tutorial

[@aspxnvii]

This would be an absolute headache in CSS. Good luck soldier

[@saurrabhsinghkushwaha4684]

Can't we have video as an background in Adobe XD??

[@CalerEdwards]

Not yet

[@Bullskits586]

project files are empty.

[@cliffme6310]

i am so early today

[@JoaoSilva22222]

Thanks for saving us from the lack of logic from adobe....

[@mohammedm5567]

**Time trigger** sometime appears and sometime doesn't.....yes my xd is upto date.

[@CalerEdwards]

Make sure you select the name of the artboard. I think that is the only way it shows up. You cant select an element. Could be wrong but I believe I had same problem.

[@Mahmoudessam1989]

👍 good job, can you explain how make export to index. html

[@maskman4821]

the plugin is being developed, it will be released soon...

[@LuisMan123]

Last!

[@GauravSingh-zl7iq]

What about those two Navigation Buttons below 😂😂

[@adyamusicdigital7272]

lol instant front end development 🤣🤣🤣

[@wortero6842]

XD

[@edward1412]

Good content, but a bit too fast for me as a beginner. You simply lost me during the duplication section as adjusting the fill doesn't give a solid background.

[@rmnkot]

Awesome!

[@thechisensei]

awesome!!