UI transition and micro interaction animation with After Effects - Hands-on Tutorial for beginners
Вставка
- Опубліковано 28 сер 2024
- A detailed hands-on tutorial for animating a UI transition of bottom-sheet menu and micro interaction, in mobile interface. This tutorial is tailor-made for beginners. 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/...
My Dribbble Profile: dribbble.com/s...
-----------------------------------------------
//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 #masterclass #animation
This is one of the best ui animation tutorial over the youtube. Thank you so much Sapta, Great video. will wait for the next class :)
Thank you, Aman! :D Comments like this make me to motivate me to create more content :)
The way you explain is amazing and easy. GOD BLESS YOU
Hands down the best AE tutorial on UI/UX! Flawless explanation style 😍
Wow, thanks! :D
@@saptarshipr U really simplify things.
Never knew learning UI animation will be so damn easy. 2020 is good for one reason now.
Thank you Adil! Glad to know that you found it easy to grasp :D
Who else noticed the timings on his Mac? He worked at 4 in the morning, then took a break, and finished off at 1 AM.
You are a keen observer, I must say :D
Hahaha 😆
WOW. I was skeptical starting this thinking it would be your typical tutorial which was super basic and even incomplete. Incredible knowledge here.
I attended a UI kickstarter workshop by Sapta, 2 days back and it was my first time in UI and before that i didn't even know what's a UI. After attending the workshop and following him on UA-cam I'm inspired to work on UI and I am already working on a UI design, can't wait to share it with you.
Thank you Sapta you are the best🙏
That's great to hear, Dheeraj 😀
I only search for videos of UA-camrs like you..
You're one of the UA-cams who could explain soo well😭❤❤
Honestly the best AE tutorial ever. Thank you Sapta.
Thank you 😊 🙌
This is the best UI Animation tutorial I have ever seen, such a clear and understandable tutorial, really I learnt the first animation of UI and waiting for the next tutorial video, thanks a lot Sapta for a Great Video. Really I learn a lot from your videos.
Thanks a lot Ramesh! Glad to know that you found it useful :)
Hello. I am from Bangladesh. Thanks a lot for this course. I will not miss any of your courses.
like I am an amateur intermediate UX UI designer he is going to make me a pro thanks Mann
That's the plan 😃🤘
Thanks a lot, man. Keep making this type of tutorial. I love your detailed teaching approach. Love from another Bengali from Bangladesh.
Thanks a lot, Rifat! 😃🙌 Love from another bengali from India.
.
Man, every time I watch a video on your channel you impress me with the way you explain it. You don't disappoint me every single time.
Thank you Sapta for this brilliant demonstration for AI and as you said the interface is scaring but you made it a piece of cake.
Thanks a million.
.
Happy to hear that :)
Thank you so much for sharing your knowledge with us Sapta!
More power to you.
My pleasure, Samar! :D
This is the best tutorial I have ever watched! WELL DONE and thank you!
This deserves way more like and love from the community..... Keep up the good work sapta :)
Thanks Sapta!
After 14 hours of office schedule! Still this made my day to come to a good ending. !
14 hrs! :O Please take care of yourself! Really glad to hear that you are following my videos inspite of your hectic schedule :)
Thank you so much Sapta! This was my first ever interaction design. I wanted to learn this for so long but wasn't getting a mentor!! Awaiting for next video soon!! A great learning for everyone who wants to step ahead in product design :)
Glad I could help, Sanika :) Many more to come.
This is so insightful and i think It's the best tutorial of after effect for UI Animation. Thank you Sapta
Thanks Sapta, just used this tutorial to animate ui for a case study.
That’s awesome! 🤩
this is very good tutorial ..elegant presentation ..thank you very much ❤
Excellent tutorial Sapta. You've mastered the art of explaining things in a simple clear way :)
Thank you, Terence! 😃 Many more videos are on the way!
Thanks for the tutorials. Waiting for the next. 😀😀😀
You're welcome, Nivesh! Hopefully on Monday or Tuesday :)
You are the best, looking forward to seeing UI animation with the mobile mockup as well.
Thank you, Varun! Sure, let me cover the mockup bit :)
Outstanding tutorial. Easy and very clear to understand. Go Ahead...
Many many thanks
Before I searched many times on UA-cam but can't find it...Thank you I got this
Thank you so much Sapta, Great video.
Thank You so much for tutorial. It's my first animation and the way you teaching is the best at all. definitely I'll share this on social media and tag you in my post. Thanks a lot again
You're very welcome! Glad that it was helpful :)
Thank you so much Sapta, have a UI Design project which needs Adobe After Effects and this is helping me a tonne.
This is best explanation of After Affects I have seen ❤️
Thank you, Abraz! :) Would love to see what you make. Please dont forget to tag me when you post your work :)
Sapta, you have always been a true inspiration to me, uplifting the design community by sharing your knowledge on UA-cam and LinkedIn . Thank you so much ❤
You are an amazing mentor, sir.
Thank you Akshay 🙂
Thank you for these tutorials! Your explanations are very clear and your way of teaching is simply amazing! Hoping to see more tutorials like this!
Thank you, Simran! Will do :)
Simply Your way of teaching is awesome. I have Ae will be a difficult tool to learn but you did this as smooth as possible. As neat and clean explanation. Thank you a lot make us inspire and help us to achieve the goal.
You are most welcome, Sudharsan! Glad to know that you liked it :)
Amazing Sapta🤩
Amazing UI animation tutorials🙌
Thank you 😁
@@saptarshipr Can we get one short video series for UI design fundamentals 😅
This Tutorial is pure GOLD !!
Thank you so much for making such amazing and easy AE tutorials Sapta Sir
you are the best Motion Design teacher
Thank you so much 😀
Afrer lot of search i really found a useful videos....your learning style is to good sir☺️
Honestly the best AE tutorial ever, Sapta! Thank you so much!
The best thing is, everyone is getting replies of theie queries. Spread the knowledge whatever you have, to those whoever needs it. Keep it up👍.
:D
Video is amazing and one thing I noticed that he made this video at 1am around 😮
Already rocking brother!! i was litrally searching for this type of tutorials baby steps to master
Thank you! More to come :)
@@saptarshipr eagerly waiting brother!!
So excited! I did my first UI animation in After Effects! Thanks Sapta! Cant wait for the next one!
loved this tutorial and made same along side the video thanx sapta cant wait for more videos like this
You're welcome, Ajay! :) Thanks for watching them.
@@saptarshipr one question is realy resonating in my mind, as a designer does we use after effect for mockups or to please clients or to give developer a idea how it should work .
I'm new to design so if question sound stupid forgive me 😁
It's for all the 3 reasons you have mentioned and also an additional one - at times you directly hand over assets made in After Effects to the developers
Excellent tutorial sir. Thank u for sharing. along with the time, noticed a misspell of "animation" in the intro. ha ha
Thank you, Hitesh! :D Oh.. Did I? :P I ll take care next time.
Saptarshi Prakash ha ha .. happens when you are dedicated to this level.. highly appreciated sir♥️.
Hey, I have been delaying to learn after effects thinking it will be hard, thanks for making and teaching it in a very easy way, It's very interesting.
Really happy to hear this! Its often that little voice inside us that keeps telling us that we cannot do something. :)
This course is so well written and curated. Well explained too. Very simple to grasp. ❤️
Here I go! I worked on the second episode today! Good going for me I guess! :P I am loving it! Thank you so much again!! :)
Welcome 🙂
These are some of the best learning AE for UI I’ve come across. Bravo. Keep them coming.
Superb tutorial. Please keep sharing! I'm a visual designer but new to uiux and started learning with your videos.
Thank you so much Sapta Sir for creating such awesome tutorials on AE! Very understandable. This was my first UI animation shot!
You're welcome 😊
thank you sir - first time I've animated, feel like a pro now! certainly the best tutorial on the subject I've come across so far.
Thank you so much Sapta for making a simple and detailed tutorial. This will be my first UI Animation using After Effects. Cheers! Looking forward to learning from you :D
Thank you, Jahnavi! Glad that you found it useful :) I will highly recommend you also check out the other episodes of this series.
Thank you so much for making these tutorials, Sapta. I always found motion design daunting. But, you've explained everything so clearly and make it look so simple. I've been following your work for a while now and have always found it helpful as a beginner. And when I saw the shoe app animation I felt like I HAD to try it. Awaiting more of this design gyaan from you!
You're very welcome, Anezka! Glad to know that you liked it. Yes, many more Gyaan talks and Tutorials on the way :)
I always wanted to step up my designs using UI animation. So glad that I finally did it. Thanks, Sapta for this crisp and clear masterclass!
Learned a lot! Thanks for this🙌
Awesome! :)
Awesome tutorial. You have a great teaching style, very easy to follow. Thank you for putting these together. Looking forward to future episodes.
You are most welcome, Boac! Glad to know that you liked it. I m sure you will enjoy the subsequent episodes even more. I ll cover even more interesting things there :)
You are just awesome !! Thanks for videos. It was my first time doing motion design in UI.
Going to follow along both the tutorials this weekend. Exited for first ever interaction with after effect 🤩
Yasss! Do tag me when you post your first interaction work on social media :D
Damn that's slick man loved it. Doing it parallely is also so easy thanks to the files you shared.
Your're welcome Sparsh! Yes, thats the point. You watch, pause, do :)
Thanks
@Saptarshi Prakash for making such a great masterclass! I just have a doubt that "How to make interactive designs in after effects so that our clients can use them before the final product is delivered, is it possible to make the interactive design in after effects" If Yes then "When will we be able to see your video?" And if No then "What are the ways to make stunning animations in after effects but also make our client interact with them? Do we require some other software? Etc" Please do make a video on this it will very helpful" Thanks! And keep up the great work I am loving your videos too much!
Hey Varun.. After Effects is not a prototyping tool and hence it doesn't offer interactivity. But its easier to implement things from AE and hence motion designers all over the world prefer this tool. You always have the option to take elements (videos etc) from after effects and plonk them in prototyping tools like Principle and Protopie to bring some interactivity.
@@saptarshipr Thanks for the explanation man! Will, you ever make videos on a design made in After effects & then made interactive in Protopie it would be helpful! Thanks!
Yay! I breezed thru this tutorial with my first AE animation! Thanks to your easily-digestible teaching :)
Thanks you very much sir! i learned a much today !!
Very well explained. You are a master instructor. Thank you for this!
Thank you, Marie 😃🙌
BRO, this is the best ever I seen UI Animation! Please make UI Animation for Website as well
first ui animation yay!
Awesome! The next episode can be your first Dribbble shot! :D
Best tutorial video series I've seen.
Thank you sapta for the step by step information, It is really very useful for the designers like me. Can you also give an information of how to hand over these interactions or assets to the developers, if you can make a tutorial video on that, that would be awesome 👍🏻 keep teaching us
Hey Prajwal.. Not every animation can be implemented with assets alone. Some needs to be hardcoded by the developers. Having said that, there are animations that can be implemented directly by placing assets without the need of any extra effort by the developer. Lottie is one way. I will demonstrate it some video.
Very happy to make my first animation using Ae... Thank you soo much Sapta to make it very easy and clear to understand...
You are a great teacher :) Thank you very very much :)
Thanks a lot! :)
This is something I was waiting for. Thank you Sapta! :) Waiting for the next class!!
Hope you enjoyed it!
Such a clear explanation!! Love this masterclass. This is my first time using the After Effects and you made it so simple. Thanks a lot👍
Really glad to hear! 😃
Motion design fascinated me so I installed AE in Jan 2020 but looking at the interface I thought this is not my cup of tea and uninstalled it. Sapta, you made this look so damn easy! Thanks a lot for these tutorials :)
Thank you man that means a lot to my journey ❤❤
Yes, mah first time and It's awesome!!
Glad to hear, Akshay! I m sure you will like the other ones as well. :)
Thanks much sapta! I’m gonna try this and all the upcoming tutorials :)
Thank you 😊
What an amazing tutorial sir! From teaching content to video editing and sound effects everything is truly amazing :)
Easy to understand, and you explanation is Awesome. thank you very much for your efforts Sapta bro, im waiting for next video 😁✌️
Thank you Srijeth! The subsequent episodes will be more complex but insanely enjoyable 😃 i m sure you will love them 🙂
Amazing tutorial🔥
What a great tutorial, You made it so easy to understand 🙌
Happy to hear that!
Sapta bhiyaa... You are awesome.🤗
Thank you so much 😀
Done. Cleared up basics
thank you so much now i can animate my design
Hey savior! Eagerly waiting for your next video.
Will upload soon :)
Dang if I knew AE was this easy I would've picked it up ages ago!
Its never too late, Ashley :)
Incredible useful serie! Thank you so much 🙏🏻
Great video man. Loved the patience with which you demonstrated each feature. Just a tiny feedback, please do cover how to export composition as a GIF as, that is the format sites like Dribbble uses.
I ll do that in the next episode. I ll make a complete Dribbble shot there 🙂
Great stuff dude!
This was my first UI animation. Very easy to follow. Thanks Sapta 😎😎🚀
You're welcome, Paul 😀🙌 I suggest you check out the other tutorials as well
Great Tut very clear, thank you Santa
Thank u you make it so easy... 👍
You are so welcome!
Very well explained! Thank you!
Hey Sudeep.. Glad to know that you liked it :)
It was fantastic. I want to learn UI/UX. this is definitely a motivator. Thanks :D
The way you explain is very good. Please make a video on Font selection
Sure, I will. :)
Thanks for the nice tutorial, it really helps.
Thank you, Sreejith! :)
Great information buddy!!!
Thank u very much!
Great tutorials :) Keep it up!
Thanks. Great video !