Navigation Menu Animations in Adobe Xd | Auto Animate | Design Weekly

แชร์
ฝัง
  • เผยแพร่เมื่อ 28 ก.ย. 2024

ความคิดเห็น • 124

  • @abdullahaltoha7316
    @abdullahaltoha7316 4 ปีที่แล้ว +12

    I like all of this but third one is just mind blowing, really love it..thank you so much.

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      I'm glad you liked it Abdullah!

  • @mueedali3791
    @mueedali3791 3 ปีที่แล้ว

    3rd one is just simply fantastic as i'm a huge fan of simple design

  • @medhasingh2454
    @medhasingh2454 4 ปีที่แล้ว +2

    Loved the 1st and 3rd one.

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      I'm glad you like it Medha!

  • @tharindumadhushan7776
    @tharindumadhushan7776 3 ปีที่แล้ว

    Thanks..! Im studying prototype these days .Your channle very helpful

  • @upprrdimensions892
    @upprrdimensions892 3 ปีที่แล้ว

    I liked the Fourth one!

  • @high_overseer
    @high_overseer 5 ปีที่แล้ว +2

    Hi Punit. Great Tutorial! I see you have the same problem as me with rolling menu. I think that we need more artboards to do smooth roll animation.
    Transition from Home ->Autoanimate->Heart is ok. After that we need propably new artboard with Time transition when we Move outer circle for next rotation and repeat the process Heart->Autoanimate->Search

    • @PunitChawla
      @PunitChawla  5 ปีที่แล้ว

      Thanks! I do agree with you. Since I wanted to create a quick tutorial, a longer process would be tedious. I'm trying to find ways to shorten animations while not compromising much. Thanks for your feedback and thoughts! Really helps me out

    • @high_overseer
      @high_overseer 5 ปีที่แล้ว +1

      @@PunitChawla I've just tried my idea but it looks like it's not possible. Adobe XD only see scale from 0 to 360 and from 0 to -360 degrees. We don't have a tool to let us make let's say 750degree rotation. We just need to wait for another update ;)

    • @PunitChawla
      @PunitChawla  5 ปีที่แล้ว +1

      @@high_overseer well, actually it is possible. I have an entire tutorial on it. Let's see if you can find that video!

    • @mikicreamzgames
      @mikicreamzgames 2 ปีที่แล้ว

      @@PunitChawla Had the same problem extending it to a fourth icon. Please post a link to the full tutorial video. Thanks.

  • @amanyfawzy9982
    @amanyfawzy9982 2 ปีที่แล้ว

    thanks, Punit.

  • @himanshughugharwal1409
    @himanshughugharwal1409 3 ปีที่แล้ว

    Sir, you are great

  • @emmanuelokebugwu6944
    @emmanuelokebugwu6944 3 ปีที่แล้ว

    ALL 3...ALL THREE!

  • @NathanWells1
    @NathanWells1 4 ปีที่แล้ว +4

    What about when you go from home to settings? The animation seems to break down then...any ideas?

  • @emilymissed
    @emilymissed 4 ปีที่แล้ว

    OMG it's awesome

  • @wajeehaayemon2157
    @wajeehaayemon2157 3 ปีที่แล้ว

    Hi? you are doing an amazing job I love all your videos. I am a beginner designer so can you plz share how can we change the icon colours downloaded from flaticons?

  • @yelumalaiswamynathan7653
    @yelumalaiswamynathan7653 5 ปีที่แล้ว +1

    I like 2nd one

    • @PunitChawla
      @PunitChawla  5 ปีที่แล้ว +1

      Thank you Yelumalai!

  • @mahantsripathy7985
    @mahantsripathy7985 4 ปีที่แล้ว +1

    From the 3rd animation.....i got a problem...the white bar above the icon just fades out and fades in after clicking the next icon..it doesn't slide to the next icon as shown in the video...can anyone help me with that.?

  • @sunitarout2663
    @sunitarout2663 2 ปีที่แล้ว

    Not able to find the source file...:(

  • @tupkir6919
    @tupkir6919 4 ปีที่แล้ว

    Sir,isnt there any option to make the same in android studio??the same animations???thank you..

  • @ricardorochadev
    @ricardorochadev 4 ปีที่แล้ว

    second is clever

  • @dustattire
    @dustattire 5 ปีที่แล้ว +1

  • @CK51515
    @CK51515 4 ปีที่แล้ว +1

    why are you not using component states to achieve some of these results?

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      This video came out before component states was introduced. You might want to check my newer videos out ✌🏼

    • @CK51515
      @CK51515 4 ปีที่แล้ว

      @@PunitChawla component states were out before Sept 2019

  • @thiruarasu1405
    @thiruarasu1405 2 ปีที่แล้ว

    file not found

  • @subbu-manya
    @subbu-manya 5 ปีที่แล้ว +1

    2nd animation

    • @PunitChawla
      @PunitChawla  5 ปีที่แล้ว +1

      That's a great choice Subramanya

  • @_Hyperior_
    @_Hyperior_ 2 ปีที่แล้ว

    11:00

  • @andilundsrensen7648
    @andilundsrensen7648 4 ปีที่แล้ว +1

    1

  • @fawazreh1790
    @fawazreh1790 5 ปีที่แล้ว +1

    3

  • @winniechan7954
    @winniechan7954 2 ปีที่แล้ว

    nice work,
    the xd file is not avai anymore tho..

  • @claireberceron3873
    @claireberceron3873 2 ปีที่แล้ว

    Hi thanks for the video :) the Xd file can't open in drive

  • @pedroelton7040
    @pedroelton7040 4 ปีที่แล้ว +2

    first is great. But the problem, and I think you also had the same. is that it`s only possible until 3rd effect. Or 360 degrees, After that it doesnt go forward and keeps going under...

    • @mahantsripathy7985
      @mahantsripathy7985 4 ปีที่แล้ว

      Why does it go like that ...even i had the same problem..! Did u solve it?

  • @AmitKumar-jx9ru
    @AmitKumar-jx9ru 5 ปีที่แล้ว +5

    I have been watching your videos from last 2 month's. I learned a lot from you. Really appreciate your hard work. Thanks you sir 🤗🤗🤗

    • @PunitChawla
      @PunitChawla  5 ปีที่แล้ว +1

      Thank you for the compliment Amit! Keep on working and designing. Best of luck!

    • @AmitKumar-jx9ru
      @AmitKumar-jx9ru 5 ปีที่แล้ว +1

      @@PunitChawla 😍😊 💻💻💻🚀

  • @Marwen_Braiek
    @Marwen_Braiek 3 ปีที่แล้ว +1

    Hey can u fix the link of the file doesn't work anymore thanks !

  • @abhaytiwari6411
    @abhaytiwari6411 4 ปีที่แล้ว +4

    Third one is Ground Breaking Design
    I love it

  • @yekta5259
    @yekta5259 5 หลายเดือนก่อน

    This makes the whole artboard go crazy because of the auto-animate. not only the navigation auto-animtes but the whole artboard

    • @PunitChawla
      @PunitChawla  5 หลายเดือนก่อน

      You have to make sure that settings in both artboards are identical.

  • @xylitol-tv8xm
    @xylitol-tv8xm 4 ปีที่แล้ว +2

    How you can change the cursor to circle like that? someone please tell me

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      The circular cursor is only available on Mac for now

    • @xylitol-tv8xm
      @xylitol-tv8xm 4 ปีที่แล้ว

      Punit Chawla I’m using XD and Sketch also on Mac, but when i’m preview the prototype the cursor was still arrow not circle transparan like in the video.

  • @sashawaloven5852
    @sashawaloven5852 3 ปีที่แล้ว

    Tried the second one and it doesn’t work.

  • @deycrew1458
    @deycrew1458 2 ปีที่แล้ว

    the link doesnt work.... /:

  • @dongiovanni9212
    @dongiovanni9212 4 ปีที่แล้ว +2

    So many artboards just for some animations... i like your work but damn i hate Adobe Xd. I want to create apps not duplicate an artboard 100x

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +2

      Check out my latest tutorials. With new features in Xd, you can now make complex animations inside just one artboard.

  • @AsiaaaBasia
    @AsiaaaBasia 2 ปีที่แล้ว +1

    I love 1 and 3 goes with my current project perfectly!

  • @trungduchua1786
    @trungduchua1786 4 ปีที่แล้ว +1

    Hi Chawla, at 6:02 you move the circle mask ups out of the "Home" icon and the icon still have color fill in it. I tried to do so but every time I move the circle out of the icon, the icon turns white and disappear. Would love if you help how to fix it! Btw, love your work, cheers!!

  • @BhotHARDik
    @BhotHARDik 4 ปีที่แล้ว +2

    Do They Really Work In Functional Apps??

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      You can absolutely make it happen

  • @mohammedosama2105
    @mohammedosama2105 4 หลายเดือนก่อน

    link is not found

  • @LoCoCreative
    @LoCoCreative 2 ปีที่แล้ว

    2

  • @chandeeprekhapalli8121
    @chandeeprekhapalli8121 3 ปีที่แล้ว

    I LIKE 3RD ONE

  • @onkargund1315
    @onkargund1315 2 ปีที่แล้ว

    I like 3

  • @Shikarte
    @Shikarte 5 ปีที่แล้ว +3

    Really like the first one😍

    • @PunitChawla
      @PunitChawla  5 ปีที่แล้ว

      I appreciate your comments so much!

  • @pedroelton7040
    @pedroelton7040 4 ปีที่แล้ว +1

    I like second the most. But it’s hard to choose! You have a great taste, mate! Congrats!

  • @akhiljithk7173
    @akhiljithk7173 4 ปีที่แล้ว +1

    1 ans 2

  • @mueedali3791
    @mueedali3791 3 ปีที่แล้ว

    Hi Sir, i tried the 3rd one by my own but i'm facing a lil problem, as u attached the 2nd screen with the last one and set a Timer to auto animate. But when i tried that there's no option of a timer in that menu.... Btw Thankyou i love ur work.

  • @tomx992
    @tomx992 5 ปีที่แล้ว +2

    Nice, thank you. But I am asking me: any animations as you do in a prototyping tool like Adobe Xd, finally it has to programmed from the Frontend Developers. I mean, you are limited in the actions and animations, right?

    • @PunitChawla
      @PunitChawla  5 ปีที่แล้ว +1

      It is best to understand the point of view of the developers as well. Yes, you are right by saying that there are limitations. However, Starting big, then cutting it down is always a great idea.

    • @tomx992
      @tomx992 5 ปีที่แล้ว

      @@PunitChawla thx

    • @emilymissed
      @emilymissed 4 ปีที่แล้ว

      i am also a frontend developer and i can say you are true . some of his idea are hard to programmed but if u knew Jquery i think u can code them. but some of them can't be coded

  • @olcaydenktas
    @olcaydenktas 3 ปีที่แล้ว

    I have a question. The tactic on the + icon does not work when switching to the profile icon in the first animation
    . How should I do it?

  • @rahmadsaleh86
    @rahmadsaleh86 4 ปีที่แล้ว +1

    may i ask , can it be export to responsive html css ?

  • @thotatarunsyamkishore4257
    @thotatarunsyamkishore4257 4 ปีที่แล้ว

    Masking the icon with shape isn't happening while iam doing this can you please help

  • @artikhalatkar233
    @artikhalatkar233 4 ปีที่แล้ว

    Thank you to share your expertise with us.... Really appreciate..

  • @soniyasingh7691
    @soniyasingh7691 4 ปีที่แล้ว +1

    All three were awesome, but third one was the best....thank you so much for sharing these.

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      I'm glad you liked it Soniya! Keep watching

  • @pritamdeore6091
    @pritamdeore6091 5 ปีที่แล้ว +1

    3rd one bro, it's looks

    • @PunitChawla
      @PunitChawla  5 ปีที่แล้ว

      You're always welcome Pritam! Thank you for watching

  • @OmegaVNTeam
    @OmegaVNTeam 4 ปีที่แล้ว

    Could you rework this tutorial as Component State feature?

  • @satyahari2238
    @satyahari2238 4 ปีที่แล้ว +1

    Such as an amazing tutorials... I love your videos.. Less quantity, more quality 😍

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว

      Thank you Satya! I appreciate your comment. Keep watching!

  • @lovelypink1149
    @lovelypink1149 4 ปีที่แล้ว

    the mask option is not working for user icon for both the paths at a time..only the bottom path is getting masked. so please agive a solution for that....

    • @mahantsripathy7985
      @mahantsripathy7985 4 ปีที่แล้ว

      @lovely pink Mask it 2 times (1 for bottom path and other for top part)......hope it helped..!

  • @pranjalsharma1080
    @pranjalsharma1080 3 ปีที่แล้ว

    Very cool. Thanks for the tutorial!

  • @uzairahmad7171
    @uzairahmad7171 5 ปีที่แล้ว +1

    very well done bro keep it up and make more videos ;)

    • @PunitChawla
      @PunitChawla  5 ปีที่แล้ว

      Thanks man! Keep watching!

  • @anishkumar9546
    @anishkumar9546 5 ปีที่แล้ว +1

    All three animations are awesome. Great work👍

  • @juliocesarsantos8103
    @juliocesarsantos8103 3 ปีที่แล้ว

    esto si vle la pena

  • @NazrulIslam-jx3zd
    @NazrulIslam-jx3zd 3 ปีที่แล้ว

    just awesome

  • @sreelathapalaparthy
    @sreelathapalaparthy 4 ปีที่แล้ว +1

    Third one ☝️ is awesome 👏

    • @PunitChawla
      @PunitChawla  4 ปีที่แล้ว +1

      Thank you very much!

  • @darpansorathiya688
    @darpansorathiya688 4 ปีที่แล้ว

    third one is the best

  • @niqiazlan2609
    @niqiazlan2609 4 ปีที่แล้ว

    Hi. I have a problem with the rotation and I don't know how to solve it. I hope u can help me with it. Thanks

    • @pedroelton7040
      @pedroelton7040 4 ปีที่แล้ว

      Me too, and him too... It only goess until 360 degrees. After that it doesnt go up, it always will go down.

  • @galaxy_101
    @galaxy_101 4 ปีที่แล้ว

    Can I have that Icon set?😢

  • @tanishbhamare3365
    @tanishbhamare3365 4 ปีที่แล้ว

    Really Amazing and creative!

  • @Vickypondinfo
    @Vickypondinfo 4 ปีที่แล้ว

    1st best animation

  • @dwaynewal-e8615
    @dwaynewal-e8615 4 ปีที่แล้ว +1

    I really like the 1st one.

  • @ayushroy2281
    @ayushroy2281 3 ปีที่แล้ว

    just loved them all.....

  • @amolgaikwad3139
    @amolgaikwad3139 5 ปีที่แล้ว +1

    All are really cool..

  • @MrPeacekeeper888
    @MrPeacekeeper888 3 ปีที่แล้ว

    3

  • @AhesanulAlam
    @AhesanulAlam 3 ปีที่แล้ว

    3

  • @sepidehpour7917
    @sepidehpour7917 5 ปีที่แล้ว +1

    All of them😁

  • @vatsalshah9730
    @vatsalshah9730 5 ปีที่แล้ว +1

    Everytime the 3rd one really amazing

  • @ebda3fker
    @ebda3fker 4 ปีที่แล้ว +1

    2

  • @bekzodxon4316
    @bekzodxon4316 5 ปีที่แล้ว +1

    2nd animation

    • @PunitChawla
      @PunitChawla  5 ปีที่แล้ว +1

      Yes! 2nd one seems to be people's favorite.

  • @jodorgu8640
    @jodorgu8640 5 ปีที่แล้ว +1

    1 and 3

    • @PunitChawla
      @PunitChawla  5 ปีที่แล้ว

      These were my favorite too!

  • @jaysmith426
    @jaysmith426 5 ปีที่แล้ว +1

    1 & 3

  • @robertostringa9254
    @robertostringa9254 5 ปีที่แล้ว

    When animations don't add nothing to ux design !!

    • @icksv5529
      @icksv5529 4 ปีที่แล้ว +1

      UX does not design.
      UX tell to the UI this: "Users and founders wants to get this and this in 3 clicks and, now design the user interface son of bitc*"
      then the UI reach the Front End developer where most of the fun happens:
      "Hello my dear hipster friend, I have designed the most super fantastic UI with a lot of cute lights, phantasmagoric animation and improbable combinationa of colors such as violet, neon lavender and blasting blue lights that only works if you look at it for the sake of it, but if you work 8 hours on the screen you will get an LSD trip, but, I-am-a-cre-a-tive, got it?"
      Front End developer:
      "Delete everything, these, that and those can not be coded. May the force, sorry, may the creativity be with you, bye."