Auto-Animate a Card Flipping Effect in Adobe XD

Поделиться
HTML-код
  • Опубликовано: 13 дек 2024

Комментарии • 96

  • @GraphicDesignStudio
    @GraphicDesignStudio 2 года назад

    amazing design

  • @Invad3r
    @Invad3r 3 года назад +1

    8:10 demonstration of the effect

  • @high-defRJ
    @high-defRJ 3 года назад

    Nice video!
    I just had to smile when you said "to the infinity and beyond". Great way to incorporate Tim Allen/Buzz Lightyear quote!

  • @kashish0123
    @kashish0123 5 лет назад +2

    The way Dan and Howard teach is unbeatable..😄

    • @ForeverDansky
      @ForeverDansky  5 лет назад +1

      Thanks Kashish, yea Howard is a great teacher and awesome human being 😊

  • @mayalazar2827
    @mayalazar2827 3 года назад +1

    Can't believe I didn't find you sooner! Love it! Subscribed for more!

  • @UXDesignMaster
    @UXDesignMaster 5 лет назад +1

    Nice Video!

  • @vrydesigns
    @vrydesigns 5 лет назад

    Lovely setup dan.

  • @chrisomen9579
    @chrisomen9579 4 года назад +4

    This is great Dansky, you've inspired me alot. Thanks

    • @ForeverDansky
      @ForeverDansky  4 года назад +1

      Awesome Chris!

    • @chrisomen9579
      @chrisomen9579 4 года назад

      Really your tutorials has made me passed beginners level in Adobe Xd, though I had background in Figma, but I feel comfortable with Xd now

  • @IdeasMarket
    @IdeasMarket 5 лет назад +1

    So Nice Yet Simple Explained. Thank You Dan!

  • @guylaineregimbald2914
    @guylaineregimbald2914 3 года назад

    That was fun. Will play with that one for sure. Thanks.

  • @sidharthanand4245
    @sidharthanand4245 3 года назад +2

    Hello sir thank you for the great tutorial.
    I have a question, how do I save this animated file into GIF

  • @shashankr7705
    @shashankr7705 4 года назад +1

    Loved it! Subscribed! ❤️

  • @_b_l_x_c_k_
    @_b_l_x_c_k_ Год назад +1

    great tutorial! i wonder if there is any way to actually use it as a component on a main artboard? i did it that way, it worked, but it only worked when preview it with its own board. I don't exactly know how to put that effect on to my main board.

  • @kumarsamir1929
    @kumarsamir1929 4 года назад

    thank you Dansky. I learned many thing from you..

  • @leahthomas4272
    @leahthomas4272 3 года назад +1

    Genius!!

  • @oddsandeben
    @oddsandeben 10 месяцев назад +1

    Thank you!!!

  • @king7916
    @king7916 4 года назад +1

    No more excuses to present your work flat and boring anymore, thank you!

  • @ParshantSachdeva
    @ParshantSachdeva 5 лет назад +2

    Thankyou brother, first tym new idea create in mind....

  • @victoriazapata7460
    @victoriazapata7460 4 года назад

    Nice love it. Thanks for sharing :)

  • @paris45
    @paris45 4 года назад +1

    would this work on several pages, like 20 for example?

  • @juliakovalova5136
    @juliakovalova5136 4 года назад

    Amazing! I was looking for this for such a long time, thank you!

  • @abhishekpoddar6687
    @abhishekpoddar6687 5 лет назад +2

    Daily dose of inspiration!! ❤️❤️

    • @ForeverDansky
      @ForeverDansky  5 лет назад +1

      Boom! Thanks Abhishek! 👊

    • @abhishekpoddar6687
      @abhishekpoddar6687 5 лет назад

      @@ForeverDansky i found xd cooler after you started making videos on them!!

  • @sajiiidali
    @sajiiidali 5 лет назад

    Excellent
    ⭐⭐⭐⭐⭐

  • @aud2ice
    @aud2ice 5 лет назад

    Awesome.

  • @deFr0ggy
    @deFr0ggy 5 лет назад +1

    well done man :)

  • @riddhisharma4112
    @riddhisharma4112 5 лет назад

    beautiful lovely ................ I loved it

  • @StarWarsRumors
    @StarWarsRumors 5 лет назад +1

    got some great ideas from this, thank you :)

  • @vinayak786786
    @vinayak786786 5 лет назад +2

    Hi Dansky ! Amazing video !!!
    Can you please explain why you pasted both the images : skull and the other one on 2nd artboard ? You have reduced the opacity of both images to zero. So, It could have been done with one of the 2 images on 2nd artboard right ?

    • @hassuunna
      @hassuunna 5 лет назад

      because either way flipping to front or back side of card you need the image in that ( skull or ace ) to fade in as the side appears to feel the flipping effect, other wise the image would just appear simultaneously

  • @mikefox6211
    @mikefox6211 2 года назад

    Is there any way to swap out the image/text dynamically for a series of images? (Flashcard activity)

  • @abdulrehmanawan3256
    @abdulrehmanawan3256 5 лет назад +1

    Dusky plz makes some videos on poster design social media

  • @tkshaji23
    @tkshaji23 4 года назад +2

    Thank you so much, Dansky for this great video.
    Is there a way to stop this after a single flip rather than continuously flipping

    • @ForeverDansky
      @ForeverDansky  4 года назад

      Hey Shaji you can set the trigger for the flip to be anything you like (e.g. Tap), or if you'd like the continuous flip you can use the Time trigger 😊

    • @tkshaji23
      @tkshaji23 4 года назад

      Thanks ! I will try that. If it doesn't work, will bother you again. :-)

  • @godsdailybreath
    @godsdailybreath Год назад +1

    Dansky! 'Time' is no longer available as a trigger on Xd, what do I do?

    • @ForeverDansky
      @ForeverDansky  Год назад +1

      I just tested and 'Time' can only be used if you're dragging a prototype line from one artboard to another artboard, instead of applying as a trigger to an object.

    • @godsdailybreath
      @godsdailybreath Год назад

      @@ForeverDansky that would make sense lol, thanks Dansky!

  • @jan6743
    @jan6743 5 лет назад +2

    Hi, how can you implement this card into another artboard? Lets say you want 3 cards in a row into another website design of yours.

  • @pinklimegreen1234
    @pinklimegreen1234 3 года назад

    Hi there!! This is a great tutorial!! I am trying to flip a card with text, and I'm having trouble getting the text to seamlessly disappear and switch to a different text on the other side of the card. Do you know how to fix this issue? Is it even possible, or can you only flip a card with a graphic without text?

  • @ayazuddin
    @ayazuddin 5 лет назад +2

    Thank you very much! It really helped me!

  • @s.sureshbabu148
    @s.sureshbabu148 5 лет назад +6

    Awesome bro thanks for the video
    I need animation like tinder swapping. Kindly video for this.

  • @AndresTheDesigner
    @AndresTheDesigner 4 года назад

    Well done. 👌🏼

  • @SuperDenkoo
    @SuperDenkoo 4 года назад +1

    How can we make this a component and use it in other art boards?

    • @_b_l_x_c_k_
      @_b_l_x_c_k_ Год назад

      i had the same question. I know you can do this in Figma where u can just make the effect as a variant and you can duplicate it as much and anywhere. But XD dont do that too bad. im trying to look for a way too

  • @MACH_SDQ
    @MACH_SDQ 5 лет назад

    Goooooooood

  • @OrpheusTanner
    @OrpheusTanner 4 года назад

    Hi Dansky, does it able to do this on Invision s well?

  • @patrickcazer
    @patrickcazer 4 года назад

    Can you expand text in adobe XD with hover state ? like 12px and on hover a text expands to 18px ? if so i can't figure it out i've totally been struggling.

  • @anamtafarooq7706
    @anamtafarooq7706 5 лет назад +2

    Dansky you're just Aweosome...!
    it really helping me, i've many confusions about xd animation but you just clear all of my them...
    in few days i'll become professional more than you.... lol....

  • @gokulsuresh4891
    @gokulsuresh4891 4 года назад

    Can make adobe xd project (which includes animations , UI designs .......) exorted to Android studio, to create android app more advanced for android devices

  • @georgiacantlon2655
    @georgiacantlon2655 3 года назад

    Can you please give a tutorial on how to make this in aftereffects. I would love to be able to save it as an .mp4 or .mov

    • @ioanniskopadis5342
      @ioanniskopadis5342 3 года назад +1

      After you click play there is a record button on top of the window. It makes it a video

  • @carlosd.garcia2002
    @carlosd.garcia2002 4 года назад

    Dansky, i've been trying to set a customizable product with different customizable parameters. Like changing color of the shirt or model..... help me!

  • @zaltemuch
    @zaltemuch 5 лет назад

    Thanks for your video and your ideas :)
    Wouldn't it look better if you didn't set the opacity to 0?
    Also I think it would look quite a bit more realistic if you selected the upper and lower right corner of the card and the image and scale the height while choosing the upper und lower left corner and shrinking it. Maybe you would have to add an in-between keyframe (artboard)...

    • @ForeverDansky
      @ForeverDansky  5 лет назад

      You're welcome Malte. There's a tonne of different ways to tweak the animation for sure, depends on personal preference I guess 😊

  • @pixelsperfect3956
    @pixelsperfect3956 4 года назад

    sir can we use these kind of animations made in adobe xd in real ios android apps if yes please tell how?

  • @jeollim
    @jeollim 5 лет назад

    Cool and all, but I noticed that if the card background, plus majority of the card design, the base white card, and the background aren't all close to each other in colour, it stands out a lot more and looks weird

  • @taha5871
    @taha5871 5 лет назад

    Tnx Dansky , but i wish to upload your projects files on Drive or mediafire, cuz i have some problems with Dropbox and can't install anything

  • @RazaNaiyar
    @RazaNaiyar 5 лет назад +1

    Hi sir may i know your mouse name and model with price please?

    • @ForeverDansky
      @ForeverDansky  5 лет назад

      Hey Khalid, my mouse is a Logitech MX Master 2S, and price will likely vary according to country 😊

  • @olatundeifeoluwa5203
    @olatundeifeoluwa5203 4 года назад

    Mehn, need to cop some of these tshirts.

  • @theodorenegusu418
    @theodorenegusu418 4 года назад

    since we now have a hover state in XD , you have to do this video again. pls pls pls

  • @Elmoeoeoe
    @Elmoeoeoe 5 лет назад +1

    The question is which way is the card flipping?

  • @IguanamobisPltworzeniestron
    @IguanamobisPltworzeniestron 5 лет назад

    So how to export it to gif example?

    • @ForeverDansky
      @ForeverDansky  5 лет назад +3

      Export from XD as a video, open the video in Photoshop, then go to File --> Export --> Save for Web (Legacy) and select GIF as the format 👍 Hopefully this tutorial showing part of the process from a little while ago is helpful ruclips.net/video/ZEDfinZeOx4/видео.html

  • @alaakhaleel4543
    @alaakhaleel4543 9 месяцев назад +1

    Messi is that you!!!

  • @unleashthedog
    @unleashthedog 5 лет назад +1

    You need to disable auto focus on your camera mate

  • @skydamm4704
    @skydamm4704 5 лет назад

    l'm japanese.
    thank you for video!
    I want to konw how to create Tinder's flick animation with XD

  • @choke6606
    @choke6606 3 года назад

    or you could just use the transform tool.

  • @poppinda5717
    @poppinda5717 5 лет назад +1

    🧡🧡🧡

  • @peterqi6887
    @peterqi6887 5 лет назад

    👍

  • @ruminoryoshi7794
    @ruminoryoshi7794 5 лет назад

    Heeey, awesome video! Do you know how to flip a coin in xd?

  • @kinggouran
    @kinggouran 5 лет назад

    👏👏👏👍

  • @JP-wm1tu
    @JP-wm1tu 3 года назад

    Please teach job oriented 😊

  • @unleashthedog
    @unleashthedog 5 лет назад

    Are you another one of those hipsters using the cinematic aspect ratio? Despite seeing black bars top-bottom the content is still cropped on my TV 😤

  • @Mgrtimesthree
    @Mgrtimesthree 5 лет назад

    Why did they have to name this program XD..

    • @azharbhatti5544
      @azharbhatti5544 5 лет назад

      e*X*perience *D*esign, experience as in UX (User Experience) Design

  • @kieucuong4818
    @kieucuong4818 5 лет назад

    genius, why u can find this trick ? WTF man !

  • @moritzberg6722
    @moritzberg6722 5 лет назад +2

    Nice idea though the video was way too long for the information in it.

  • @shareten1247
    @shareten1247 4 года назад

    xDDDDDDDDDDDDDDDDDDDD