Card Flip Animation in Adobe XD using 3D Transforms (Halloween Themed)

[@alimahdavi5160]

You honest to god have made the best videos for Adobe xd content I’ve ever seen. They have been more helpful than you can imagine. Thank you!

[@10SHERIF01]

Your setup is on fire .. XD may be the biggest winner of this year I love the new update

[@samuelhouser]

Thank you for this Howard! I was really trying to figure out how to make double sided designs and specifically a card. The +1 / -1 Trick is the perfect way!

[@HowardPinsky]

Glad it helped!

[@TapanVaghela]

I just get excited every time I see you using 3D transforms. Think of the possibilities.. The future is here.

[@ocomakesmusic]

I can see how this would be useful. What would really sell this is the ability to export this animation for a developer to use.

[@isnannugraha1368]

Dude, this make XD in another level. Seriously.

[@DirtBikePastrana]

Right?! Haha so rad

[@chrisserrano78]

The ideas are flowing!!

[@SeveronJ]

Fantastic work.

[@svantenilsson5088]

Thank you very much! This video helped me a lot and i was able to create the animation i wished for.

[@olaola777]

This is amazing Hower, thank you

[@TheAmidude]

Thank you so much for this. I was looking for a stylish way to use 3D Transforms and your example helps tremendously.

[@DeepakVishwakarma07]

This is better than any animation tool.

[@jwilliamcosby]

Woooah! Dude! This is amazing!

[@omaryaa_]

Smoke all over. Something burning in your studio👨🏻‍🎤

[@Notozec0nd0m]

Man, this is awesome!

[@kanashikinota799]

So many techniques and transition ideas in just 4:03 video.

[@esterification_art1282]

Your work really inspire me a lot. Love it.

[@farshadvaraste3114]

So Cool!! Thanks Howard.

[@abhishektiwari4501]

This is really very amazing

[@HowardPinsky]

Thanks so much!

[@TalinWadsworth]

This is sooooo good Howard! 👏👏👏

[@dadandme]

Cool video!

[@DirtBikePastrana]

Wow, this was amazing! Enjoy your videos so much!!

[@mikefox6211]

This is great! Is it possible to load the images dynamically for a series of images (Flashcard activity)?

[@usafactofficial]

Best tutorial ever so easy to understand

[@anniw9598]

Wow so nice! Thank you that was really helpful

[@nimrod2219]

Another great tutorial. Happy halloween Howard! :)

[@HowardPinsky]

Thanks! You too!

[@quacquac_quacquac]

Love it 💕💕

[@lukmanblemka3652]

amazing work

[@HowardPinsky]

Thank you! Cheers!

[@slawekbuczyniak]

Great tutorial! May I ask you what might be causing card site overlapping when flipped to back?

[@kameradude]

That’s awesome dude ! You are the man! Great job!

[@HowardPinsky]

Thanks!!

[@YT-XD]

Amazing !!! Thank You~

[@AdrianMartinez84]

Thanks for sharing. Super helpful and looks great. Question, is there a way to add transform options into a component. So instead of creating the Back artboard and Front artboard, it would just be controlled through a component state? This would be super helpful when adding a card as an overlay.

[@ankur3d]

Cool. Was Really helpful. Thanks a lot. Have a query? Is it OK to use graphics/ images from stock to use in our UI Designs?

[@ksriharsha2911]

Wow🔥🔥🔥

[@newishIT]

so cool

[@MACH_SDQ]

Just Awesome!!!!!!!

[@yamitibug]

Really interesting. I would love to do something like this where the initial side is smaller card and when it’s clicked it flips and opens as a bigger overlay card. Have you done something like this and how did you do it?

[@REALFoox]

Thanks Howard

[@Mr546j]

Thank you 😀

[@JeanPierreNonnet16]

Love the cards, do you have a link to the Adobe stock images?

[@HowardPinsky]

I can try to hunt them down. I think I searched "Spooky" and filtered by vector assets.

[@gdj777]

I followed it to the teeth. Why does it flip back to the front on its on after the initial tab?

[@Himanshubhartiit3018]

I'm facing the same problem. can you answer @Howard Pinsky

[@aniruddhagogoi2287]

Lovely!

[@anthonyzeal6263]

are component states now compatible with 3d transform yet?

[@art_brief]

Master

[@glitch9478]

How do we save it and use it

[@sarahsanchez2288]

Adding the audio at the end 👏🏼👏🏼

[@HowardPinsky]

Right?! Audio makes everything that much better.

[@HamzaKhan-gh6jc]

CAN THIS BE DONE BY HOVER EFFECT?

[@Mahmoudali-jr2bv]

we need files to Practice. what's the benefit?

[@VivekSinhathegreat]

Can you save this as an animated GIF?

[@HowardPinsky]

You can record the prototype then convert it using a 3rd-party app.

[@ramalsrougi]

😍😍😍

[@tornikechkhvimiani1242]

After half of a year, it's still not supposed with component states. Waiting for it.

[@blockthechainer]

Sry I'm new in this, and got a question this tutorial works if you export this tutorial for an Android project?

[@11pranay]

No, you got to export it to video then convert it to gif

[@blockthechainer]

@@11pranay ok thanks

[@UnknownUser-re6yg]

Why don't I have 3d transform in my properties inspector?

[@Pac-Worlds]

😱😱😱😱😱

[@danlorenz871]

Hi anyone . Is this possible in Component state? like no need for new artboard

[@HowardPinsky]

Unfortunately 3D Transforms cannot be used within components.

[@danlorenz871]

@@HowardPinsky didn't expect haha. Thank you

[@emanuelporic]

I feel like something like this is easy to create in AE, why do we need Adobe XD? What is it used for? Can someone help me pls?

[@reshmatomy6540]

XD is primarily used for designing UI. All of this just happens to be additional features that XD offers. But imagine using these transition features for prototyping your UI designs. It's a lot easier to do so in the same software instead of juggling between XD and AE.

[@HowardPinsky]

To add to what Reshma mentioned, XD is also free for many users, so for those who want to create animations but can't afford After Effects, this is a good alternative.

[@emanuelporic]

Thank you, guys

[@LittleMissEden100]

what is your "title"? are you a UX/UI designer and also do research and ux designs? :)

[@nidarahman2305]

Can anyone tell me, if this 3d transform option is only in paid version..???

[@gil-evan]

it's free

[@MangaGamified]

I hope you're fine! your house seems on fire!

[@HowardPinsky]

😆 All good!

[@icksv5529]

I tried but in my case the card flip back on its own :°D dunno why

[@AnimeMemesDaily]

me:

[@ilkinguliyev5918]

TO hard explanation

[@mateusztobola7860]

"That's how you can create a card flip using Adobe Xd", literally. For anything outside of XD, consult your developer and the budget you are working with. Good for show-off portfolios, other than that "tips and tricks".

[@HowardPinsky]

Not everything needs to be 'developer friendly'. Many people use XD for presentations and personal projects which don't require development.

[@gversuti]

Holy sh*t That's awesome.

[@ilkinguliyev5918]

TO hard explanation

[@rhiannonshaw298]

How do i flip so it continues to rotate a ful 360 instead of flipping to 180 -180