Dropdown Menu Animation in Adobe Xd | Auto Animate Tutorial | Design Weekly

[@ozzyfromspace]

You're actually really, really talented bro, your creativity is hard to miss

[@PunitChawla]

Thank you once again!

[@MattSiegelMusic]

I'm a total newb to XD. Thanks so much for this tutorial. I'll definitely be checking out more (already subscribed).

[@pushkar-tiwari-99]

I Found your channel yesterday and your videos are too interesting ...and I love the way you say "PERFECT"

[@PunitChawla]

hahaha, thanks a lot! Keep watching

[@faithegwuenu]

Thanks punit 😊 I keep learning new cool stuff on xd thanks to you I tried it out and it came out pretty amazing ✨😊

[@mywrath2421]

thanks bro it's very useful guide for beginners

[@Shikarte]

I love the colors you've used for your design. Keep up the good work♥

[@PunitChawla]

Thank you so much!

[@ximenagutierrez9249]

Thank you so much!! I was struggling with some homework, but thanks to your video I could solve it

[@PunitChawla]

I'm glad I could help you out! Keep watching for more

[@emilymissed]

i really really enjoyed this one . it was so cool and useful . thanks

[@romitkoundinya3854]

Super cool work man! Cheers

[@PunitChawla]

Thank you! I appreciate it. Keep watching!

[@dineshgadhiya171]

hello sir where is xd file its don't open

[@amandawoehl4801]

This tutorial is gold! Thanks a lot!

[@PunitChawla]

I'm glad you liked it Amanda! Keep watching

[@cedriczamora7313]

This tutorial is very helpful! Thanks man! 👌

[@PunitChawla]

Most welcome Cedric! I'm glad you liked it

[@cedriczamora7313]

@@PunitChawla looking forward for your next tutorial. 👌😁

[@313fayaz]

That’s something creative ♥️👌🏻

[@lymeyheng7284]

Thank for this video ♥️

[@syaifulanwar9831]

This is amazing UI 😍

[@PunitChawla]

Thank you!

[@ericksarmiento2095]

Wow super nice tuto!! 👍.....Ux and Ui 🔥.

[@PunitChawla]

Erick Sarmiento thank you! Keep watching

[@irtazaikhlaq7623]

thanks for this great video

[@sunnyartstudiorichart8287]

hi punit wassp. I need your help on set matte effect in AE why the object used in this effect gets misaligned every-time

[@varundade]

How to use them in other artboards as animated icons ?

[@Varunk47]

Can we export it to android studio

[@RaselerKaj]

Great Tutorial. Keep it up !

[@PunitChawla]

Thank you! Keep watching

[@nikithar5357]

is it neccessary to like make the mask layer into small parts? if we dont do this isnt the chance of the animation getting pixelated much less?

[@ch1bouna591]

after i design and animate my web site how to extract that animation

[@jayjitporel1666]

How to do handoff for this kind of animation??

[@thomasc7992]

I really love you how to arrange color in different sections Thank you ！

[@PunitChawla]

You're most welcome!

[@mecaenet]

hey man, the link to get the file not works, can you check it?

[@baranmasoumian7510]

Thank you so much. Great tutorial

[@pankajjadhav7494]

download xd link not working

[@wings8099]

how did you get the arrows for each menu to turn up and down? im trying to do the animation for that but im struggling :(

[@xfmu32wggo]

It's not possible to mask it with a repeating grid.

[@ballboy07sfriend40]

I don't have an apple computer so how am I meant to do the command key ?

[@PunitChawla]

Use Ctrl ( control key ) instead

[@Chloe-vf7nh]

Hi Punit! I am doing the minimal dropdown menu and am having trouble hiding the portion where you have your list. The shortcut key is Command + ;. Is there another way to do this because it is not working for me :(

[@itishiba5665]

I had the same problem, I'm on windows and was pressing Shift + ; but it turns out it is just Shift + , therefore Command + , I know I am 3 months late lmao but I hope this helps someone

[@binodsarkarIN]

so say if i have a home page, how can i use these drop downs on athat homepage ? do i connect the whole home page . artboard to the 2nd artboard which would be a duplicate but with the resolved animation or the 2nd frame of the animation ?

[@PunitChawla]

You'll connect it with the second art board which has the desired changes.

[@binodsarkarIN]

@@PunitChawla i did so i made a homepage which scrolls and is say 1920x4320, now i tried making a carousal and a drop down but every time i click the whole page moves, is there a way that i can only the selected item make the movement ?

[@binodsarkarIN]

@@PunitChawla and thanks for replying, really appreciate it

[@malinegor]

Many thanks!

[@PunitChawla]

You're always welcome!

[@yurialves6259]

How pass to html/css?

[@jellybeanstalk6]

how do you make a scroll option when you have a drop down button

[@PunitChawla]

Combine this tutorial with this one 👉🏼 kzbin.info/www/bejne/hoeWdZdjqMZ9qdk

[@nowsheennazir3460]

Hi Punit please tell me where is the component in this adobe XD in which you are showcasing the dropdown menu actually I have this version of Xd please tell me where I can find the component so that I can make my icon hover

[@AnaRenault.Musica]

I just didn’t get the command to hide the element. What’s is the command?

[@PunitChawla]

Command +, (comma) or ctrl+, (comma)

[@lexmelnikov6462]

Great! Thanks. But this is just an animation. If only XD had appropriate features for the desktop app prototyping.... Still waiting for the mouse hover state (at least)

[@PunitChawla]

Adobe might just surprise us in December - with an awesome new update

[@lexmelnikov6462]

@@PunitChawla hope so too

[@mask207]

@@PunitChawla Now that Adobe did release hover interactions (Nov 2019), how can we trigger these dropdown menus upon hover of the button? Thanks!

[@PunitChawla]

@@mask207 I'll make a video on that soon!

[@tonys490]

Thanks love from London Puneet! Is it possible to reuse those dropdowns on a xd on personal project ? Simillar to templates!

[@PunitChawla]

Yes! You can create components and then apply animations to those. I've done videos on component animations

[@vovet777]

Hello& can you tell me how to convert text to path in xd???

[@vovet777]

I make double click on text and nothing happens. Just edit text only

[@ivelina_vk]

Hey, sorry if it's too late, but when you select a text, just go to Object>Path>Convert to Path (or just click Cmd+8) :)

[@asmaddi]

Thank you so much

[@PunitChawla]

You're always welcome!

[@poenubstv7229]

Please update this to the new version. You don't have to create another artboard to create interactions.

[@PunitChawla]

This video is really old. All my new content uses the new update

[@wetiot]

Thank you.

[@PunitChawla]

You're most welcome!

[@simonschleicher8857]

Thanks for the tutorial. Could you please also make a tutorial that explains how to make a dropdown-menu that allows the end user to select different items from the list?

[@alonsoibrahim5024]

Sorry to be so offtopic but does anybody know a method to get back into an instagram account..? I was stupid lost the account password. I would appreciate any tricks you can give me.

[@kashjulius131]

@Alonso Ibrahim Instablaster =)

[@alonsoibrahim5024]

@Kash Julius I really appreciate your reply. I found the site on google and I'm trying it out atm. I see it takes a while so I will get back to you later with my results.

[@alonsoibrahim5024]

@Kash Julius It did the trick and I now got access to my account again. Im so happy! Thank you so much, you saved my account!

[@kashjulius131]

@Alonso Ibrahim glad I could help =)

[@Leckerleckerbananabear]

thank u so much :D

[@ankushsingh1719]

Hlo sir i like ur videos ... But i have a question that whatever we design in adobe xd , can we use the animation that u create in a real website

[@PunitChawla]

The best way is to export to after effects and then use a plugin like Bodymovin to export for web. - aescripts.com/bodymovin/

[@ankushsingh1719]

Punit Chawla Thank you for your advice Pls also make some tutorials on this topic Loving ur work Thank you 😊

[@ankushsingh1719]

Right now i am learning web development and i love xd But don’t know how to make dam nice animations for the website Pls help 😊

[@syafiqfreman3111]

Long way to go... Sometimes you better stick with XD only.. If you want to learn, learn Bootstrap.

[@jinacisvet]

Needs update for components states. Now zou dont need to switch between artboards!

[@PunitChawla]

Yup, Check my newer videos

[@alfredyaw1188]

Did I miss something? My menu doesn’t really drop down. It just appears when I preview it 😩

[@PunitChawla]

Make sure all the elements have the same name in both the artboards. ( the layer names )

[@LvckyTrebol]

what is "command column" ?? please need help

[@SuperKiiki]

Maybe it's ctrl + , It's to mask a group.

[@solimaimeeewayi4133]

thank you for your video a French subtitle would help me too

[@stackingflow]

Mask king

[@PunitChawla]

Hahah! That's a great title

[@kavanjadeja9460]

separate page for DD lol

[@AbirHasanDipu]

Perfect?

[@PunitChawla]

Yes. Perfect.

[@paniwanandi6853]

Indonesia subtitle please

[@vtshreeram]

Hi Punit, I love your videos man. SO simple and very new all the time. Can you make videos of archetypeapp.com/ and alternatives which can help Web and mobile designers to choose fonts and build a design system? Tons of thanks in advance.

[@brucemurdock5358]

'Cliche countries know what'm sayin' 😂

[@deoudersvan1883]

Hey, i'm born in China but i'am Dutch now.

[@botbueza]

helo