3D Flip Credit Card UI Animation - After Effects Tutorial
Вставка
- Опубліковано 27 лис 2024
- A detailed hands-on tutorial for animating a 3D Flip interaction of Credit Card in the UI of a Fintech app. This tutorial is tailor-made for beginners in After Effects. Check out other videos in this series!
Have doubts? Get on a call with me: topmate.io/sapta
Buy me a coffee: www.buymeacoff...
Figma file of the UI (Updated): www.figma.com/...
Episode 1: Basics of After Effects for Motion Design, UI Animation & Micro interaction - • UI transition and micr...
Episode 2: UI transition & micro interaction animation Tutorial with After Effects - • UI transition and micr...
Episode 3: Parallax Swipe interaction in After Effects for Dribbble Shot - UI Tutorial for beginners - • Figma After Effects UI...
My Dribbble Profile: dribbble.com/s...
Motion Plugin : www.mtmograph....
-----------------------------------------------
//ABOUT ME
This is Saptarshi (a.k.a. Sapta), an engineer turned self-taught Product Designer based out of Bangalore, India. I have worked with some of the very well known startups of India and learned anything and everything that is needed to create amazing experiences for the users. I'm also an active speaker, teacher and community builder, and have delivered over 60 talks, workshops and webinars on design. In this channel, I post videos with tips, strategies, tutorials and general gyaan to scale your career in Design. If you are into it, you may want to subscribe and hit the bell icon to that you don't miss out :)
-----------------------------------------------
//SOCIAL
Instagram: / saptarshiux
Twitter: / saptarshipr
Dribbble: dribbble.com/s...
LinkedIn: / saptarshipr
Facebook: / saptarshiux
Medium: / saptarshipr
-----------------------------------------------
//MUSIC
The jingles and the background score is composed by Sargam Prakash, an awesome designer and musician. Do check out his channel.
Sargam Prakash: / sargampr
#motiondesign #3D #aftereffects
Best of the best tutorial on After effect. I could have paid a fee to attend this course.
Ha ha.. Wow monetisation :D
Truly admire how easy Sapta makes all of this seem, one of a kind!
Man, you’re recording this at 1:30 a.m. Thanks for working hard for us.
You're welcome, Om! I slept at 7:30 in the morning :P
@@saptarshipr really, Omg
This series is a gold mine for UX Designers!
We salute you
You deserve special place in the hearts of all designers of the world
Wow! :D Thanks a lot for all the respect :)
I am following this series step by step, feeling more confident each day. In starting, everything was blurry but this series is good to start with..... into the world of motion design. Thankyou. You are a good teacher.
The way you explain things, every minor detail, is very nice.
Thank you Sameer 😊🙌
you are working so hard for us
that's not a small thing
Thank you Sandip :) Glad to know that you have seen the underlying effort :)
Your tutorials are life saving. Thanks Sapatarshi Prakash.
Thank you so much for your tutorials. You are awesome!
I am pursuing User Experience Design and your channel has been a big help in converting ideas into wireframes. Really like the content and hoping for more videos in the future!
Thank you Tanishq! Glad to hear that :)
I've been waiting for this for so long..
This is incredible.
Thank you so much!🙌🙌👏👏
You are welcome, Bhavya! The output of this will surely make you feel very good :) Feels almost unreal.
Thankq sapta . I am doing as u said . I will upload in dribble soon . Thankq ones again
i ve come so far and liking it , thanks sapta
Bloody hell 🔥🔥🔥 awesome and would love to see more ❤️
Can't believe this is for free..! Willingness to learn that's all we need 🤩
Some great soul has once said that the best things in the world are always free. The second best ones are the most expensive :)
@@saptarshipr well said sir 😀
Very helpful! thank you so much for the playlist. ❤
This is dope stuff Sapta! 😎 Thanks for this series. I'll try something soon!
Thank you Saurav! Please try and let me know how I have done :)
Thank you so much, brother! Learning a lot from you! 💥💥💥
Thank you! My pleasure :)
Beautiful art saptarshi👍😀
Was trying to get my hands dirty with After Effects for a long time. All it took was one tutorial of yours to gain some confidence.
BTW - The intro and outro music is quite good.
Thank you, Hritik! If you watch all of of them, it wont just get you 'some' but a lot of confidence :D
Very Informational...Thank You brother.
You're welcome, Nadeem! I hope you enjoyed learning it 🙂
awesome Sapta! keep up the teaching mode!
Thank you, Saket! Yes, I will :)
Great tutorial Saptha! very helpful. You made it very simple as always, didn't felt like a long video. That arrow animation is detailed cool😎 Keep Inspiring👍
Thanks a ton! :D
Very helpful and simple!
Thanks 🤘
You’re my hero! Next video you should teach to us about making smooth cursor too 🤙🏻
:D Thanks a lot, Adam!
Amazing playlist I am enjoying a lot
Excellent work!
Many thanks!
I'm just waiting for my exams to finish. I'm gonna go through all your tutorials. Thanks to you, I'll acquire a new skill!
Sounds great, Sudeep :) Let me know if you get any doubts.
@@saptarshipr yes sir!
*_king of key frames_*
:D
How do you imagine that this is the way the cards will rotate. Found it really complex, that first we need to set the anchor point, then rotate, then change camera, then look at distances between cards. Overall, very complex tutorial compared to the previous ones in the playlist. Thanks for the tutorial.
Its very very helpful actually, Your channel is awesome, I just started watching it, it will be a boom for sure,
Glad you think so!
Epic 👍👍👍❤️❤️🙌🙌
Thanks a lot, Alkesh! :)
Amazing! good job bro~
Thank you so much, Zerun 😀
Hey Sapta
You can actually copy and paste effects from one layer to another
Just apply effect on one layer then copy effects from effect panel and paste on different layer
Yeah, I know. Didnt want to include that in this one. If you have been following the other episodes, I am slowly introducing new tricks. The human mind can only process limited complicated things at one time. This course is meant for complete beginners :)
@@saptarshipr I AGREE WITH YOU SAPTA.
You are awesome man
Thank you 🙂
Love this
Thank you :)
thank you thank you thank you
ur amazing
You are truly an inspiration for lot of designer .What configuration should a laptop have for a software like after effects to work smoothlessly?
Minimum i5 7th gen can do all these tasks.
These are intensive stuff. You can certainly work on slower machines as well just that your workflow will be a little slower.
Sir your videos are helping a lot thanks in advance . In future videos please do Videos on colour theory , selection of fonts for application and website design , differences between the product design and other design , mainly a video on portfolio presentation .
Hey Sandeep, thank you! I have already covered some of these topics already. I will certainly cover the remaining.
This One is also awesome tutorial...I'll share and tag you in my post
Please do! :)
Thanks!!!!
Two days into the series. These are pure gold.
Sapta in the parallex one you said I could add the things which i created on dribble. Is it right ? I didn't create it. I am just learning would it be right to put it on dribble ?
Sure, you can always put them on Dribbble. Just give due credits for the part you didn't make. And if you feel you didn't make majority of it, maybe then you shouldn't put it.
@@saptarshipr Thanks for the advice. I will create one shot for all the things I create in this masterclass with proper attribution. Have a nice day :)
Hey Sapta, really helpful video, I had one doubt tho. in this video you had used cards to flip, what if we wish to give a 3d effects to other 3d objects, what software do we used for that ?
I still wonder, why you used the same velocity for ease in and ease out in every animation. Could you share that purpose. It would be really great.
One can convert figma file to XD and then import it in after effects as it is, no need to place elements again.
Oh God ! Please show mercy to those 3 who disliked this tutorial
hi sapta can you please do 1 tutorial on 360° view for a furniture e-commerce app
How to add this animation like 3D perpective of cards in interactive app design. I have lots of questions regarding this.
Woaaaa 😍😍😍
Nice job. I do animations, I like it a lot.
Is there a way to import the Figma file directly into AE as layers? With assembling image assets, my alignment/spacing goes off (i follow 8 point grid when designing in Figma. I want to make sure it stays when I import in AE). Thanks!
Great as always but how to turn all this things to an interactive app design
Just like you turn any other design - i.e. with the help of a developer :)
@@saptarshipr so how can i submit my design and animation done by aftereffect.. by a video?
@@arunpandey4854 Yes, you can do it as a video. You may Lottie as well in case you wish to implement it in a product. But you will have to keep in mind that not everything is supported by Lottie yet.
@@saptarshipr thank you sir
To start this courses do i need to dowload after effect?
Lets go🙌😅
Yass!! :D
Hello brother this is Amazing!!! ... although i wanted to ask you will this sort of animation help the developers use such animations in their code or is it just to show this is what you want the interaction to be.....I hope you got my point. Waiting for your reply in anticipation.
This can be used both ways :-
For example by using Lottie plugin you can deliver this after effects animation code directly to developers,
This can be also used to show how you want to visualise this animation in your project / portfolio
Hope I cleared your doubt
Hay spatha, can the developer recreate our view in app development.? What is the balance between imagination and real products?
Oh yes! They certainly can. I dont see a reason why this cant be implemented.
@@saptarshipr Thanks for the reply, Is it using lotty?
Thanks for this video, Anyone have this plugin for free? for using learning purpose
How can we Download the assets
Интересно, чего дизайн так напоминает Моно банк?
yaha tk to thike pr isko iske baad figma ya xd mai kaise krna hai ki waha ye kaam kare tap krne par.
30:38 pe ek glitch hi wo kaise sahi hui, kaunsa element add kiya to wo remove ho gayi.
brother app hindi me tutorial bna skathe ho kya
Sir if I do the design in psd, will it work?
Absolutely :) Just make sure the dimensions are right.
Alt Arrow > not working for me !
can you tell how to make 3D model viewer in the website ?
i know via webgl or three.js but how ?
Yes, they can be done with webgl and three but that is only when 3D models are used. This isnt real 3D :)
@@saptarshipr I want to create website where I can upload cad file and view it in browse after that!