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

Today we will use the auto animate feature in Adobe Xd to prototype some bottom navigation menus. We'll make sure these are snappy and appealing to the eye. I've given the Xd file below for download:
Adobe XD File: bit.ly/navmenua...
flaticon: www.flaticon.com
Join Facebook Design Group -- / punit. .
Music in the video: "Lullaby" by Young Logos
Follow Me on Twitter:
/ punitweb
Follow me on Medium:
/ punitweb
My Behance Profile:
www.behance.ne...
#adobexd #designtutorial #autoanimate

[@paologargiulo3407]

i really apreciate your help with dowloanding this software

[@gabriellecalixto6758]

I'm very happy to find your videos! Your tutorials are very useful in my work. Thank you so much, Punit!

[@montassar_akrmi]

You are so professional 👌

[@URCSJENITTAJ]

I've always wondered, how the animation is done ! Thank you ..
Now i expect more animation tricks tutorials !

[@PunitChawla]

Yes I post every monday and thursday! Till then, you can go ahead an watch all my other tutorials

[@Shikarte]

I really love the second one.
Congratulations on 2K subscribers🥳

[@PunitChawla]

Thank you so much for always supporting me honey!

[@osamamicro1103]

Thanks Bro, I am lucky to find this channel. Keep it up

[@hjpatel009]

I loved the jelly animation!!
Can you do next video on horizontal scrolling or swiping in adobe XD and the content on page should remain the same like scrolling stories on Instagram.? Thank you 😇

[@PunitChawla]

Thats a brilliant Idea. I can incorporate this into one of my future videos

[@thisiserich]

Awesome vid. Thanks dude!

[@PunitChawla]

You're welcome! Keep watching

[@Khawajazwar]

Amazing work. Keep it up bro. 👍

[@PunitChawla]

thanks man, keep watching!

[@fawazreh1790]

excellent work .
congratulation for 2.5k subs.

[@PunitChawla]

Thanks man! Let's hit 3,000 by the beginning of next month!

[@KingGuardianDevil]

hey bro, another nice animation to do is to cut out the icons from the background layer and make a purple square that moves behind it. Nice effects 2 :)

[@PunitChawla]

Thanks for the suggestion Dennis. Keep watching!

[@mamishin3199]

thank you so much. It was just awesome!
would you please teach us some other Nav Bottom animations?

[@PunitChawla]

You're welcome! Keep watching for more

[@akankshapatil6163]

Ty so much for the tutorial !! Keep it up !!:)

[@PunitChawla]

You're welcome Akanksha, keep watching !

[@noormohssin1449]

Thanks for your time 😊 please What's the Right dimensions of the icon at nevication menu , if i want to used 5 icons or 4 icons !!

[@PunitChawla]

The best way to understand that, would be to download the material UI kit for adobe xd. Here is the link: www.adobe.com/products/xd/resources.html . See how they have spaced their icons. Hope this helps!

[@pushkar-tiwari-99]

Professional case study portfolio kaise banye gif or videos ka use krke please es topic pr ek video upload kariye.

[@PunitChawla]

I'll soon do a portfolio website. So stay tuned for that

[@pushkar-tiwari-99]

@@PunitChawla definitely....i am waiting

[@veerendrakumar9616]

super video

[@PunitChawla]

Thank you!

[@Hamidjb]

Perfect

[@PunitChawla]

Thank you! ✌🏼

[@vishalGng]

Perfect! Waiting for Invitation giveaway

[@PunitChawla]

Will do one soon!

[@yashgupta793]

Can single click do two works together like animate + moving to another artboard (not the copied one)

[@devasahayam3453]

but this will work as reverse animation when you click from right side icon to left side icons. ( click from settings icon to user icon )

[@Cinegramps]

Can you show or explain, how to ise these animations in a real world project, like an app for example.
How do I use these onto the actual project?

[@sanskarmehta7563]

Yeah i am also thinking the same. Have u found any answer?

[@bismailyas7020]

I tried to do it in the same way, but instead of auto animation, it dissolves only. Can you help it please?

[@PunitChawla]

Make sure, that in both the artboards. All the names of elements are same. You can see this from the layers panel on the left.

[@bismailyas7020]

@@PunitChawla Yes thanks alot. The names were different, that's why it wasn't working.

[@hathanh8523]

where you get the icon sir??

[@Underhills]

Wish Adobe could engineer a shortcut to play prototypes.

[@PunitChawla]

There is one! Here's the website, scroll down to the prototype section - helpx.adobe.com/in/xd/help/keyboard-shortcuts.html

[@generationnext8893]

So how do we code this jelly effect in Android studio can you tell

[@PunitChawla]

For that you'll have to replicate the animation in after effects. Then use a plugin like Bodymovin to export it for android.

[@mehedihasan-pb2yg]

How can I put the circle behind icon ??

[@PunitChawla]

Press cmd/ctr + { on your keyboard while you have the circle selected

[@jikadarasaurav3387]

xd file kaise open kare

[@jikadarasaurav3387]

open hi nahi ho rahi kafi bar try kiya he

[@haritharan758]

Bro make car continue rotate animation

[@PunitChawla]

Thank you for your suggestion!

[@kaungmyatko1944]

i can't find object in my window

[@souissihadjdz]

it's not the right way you can do it in one artboard

[@JordanFung]

That was so steeze.

[@PunitChawla]

Thank you! Keep watching