UI transition and micro interaction animation with After Effects - Hands-on Tutorial for beginners
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.buymeacoffee.com/saptarshipr
Figma file of the UI (Updated): www.figma.com/community/file/...
My Dribbble Profile: dribbble.com/saptarshipr
-----------------------------------------------
//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/saptarshipr
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
Пікірлер: 323
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 :)
@saptarshipr
4 жыл бұрын
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
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!
Honestly the best AE tutorial ever, Sapta! Thank you so much!
Yay! I breezed thru this tutorial with my first AE animation! Thanks to your easily-digestible teaching :)
So excited! I did my first UI animation in After Effects! Thanks Sapta! Cant wait for the next one!
Thank you so much Sapta, Great video.
These are some of the best learning AE for UI I’ve come across. Bravo. Keep them coming.
This course is so well written and curated. Well explained too. Very simple to grasp. ❤️
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.
@saptarshipr
4 жыл бұрын
You are a keen observer, I must say :D
@AlokTrivedi
4 жыл бұрын
Hahaha 😆
This is the best tutorial I have ever watched! WELL DONE and thank you!
What an amazing tutorial sir! From teaching content to video editing and sound effects everything is truly amazing :)
Sapta, you have always been a true inspiration to me, uplifting the design community by sharing your knowledge on KZread and LinkedIn . Thank you so much ❤
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.
You are just awesome !! Thanks for videos. It was my first time doing motion design in UI.
This deserves way more like and love from the community..... Keep up the good work sapta :)
This Tutorial is pure GOLD !!
WOW. I was skeptical starting this thinking it would be your typical tutorial which was super basic and even incomplete. Incredible knowledge here.
Thank you so much Sapta, have a UI Design project which needs Adobe After Effects and this is helping me a tonne.
Incredible useful serie! Thank you so much 🙏🏻
Very happy to make my first animation using Ae... Thank you soo much Sapta to make it very easy and clear to understand...
Never knew learning UI animation will be so damn easy. 2020 is good for one reason now.
@saptarshipr
3 жыл бұрын
Thank you Adil! Glad to know that you found it easy to grasp :D
I only search for videos of KZreadrs like you.. You're one of the KZreads who could explain soo well😭❤❤
This is so insightful and i think It's the best tutorial of after effect for UI Animation. Thank you Sapta
Thank you so much for sharing your knowledge with us Sapta! More power to you.
@saptarshipr
3 жыл бұрын
My pleasure, Samar! :D
Best tutorial video series I've seen.
this is very good tutorial ..elegant presentation ..thank you very much ❤
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 :)
Done. Cleared up basics
Superb tutorial. Please keep sharing! I'm a visual designer but new to uiux and started learning with your videos.
Thanks much sapta! I’m gonna try this and all the upcoming tutorials :)
@saptarshipr
4 жыл бұрын
Thank you 😊
Learned a lot! Thanks for this🙌
@saptarshipr
3 жыл бұрын
Awesome! :)
Afrer lot of search i really found a useful videos....your learning style is to good sir☺️
Thank you man that means a lot to my journey ❤❤
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!
@saptarshipr
3 жыл бұрын
Thank you, Simran! Will do :)
Thank you so much Sapta Sir for creating such awesome tutorials on AE! Very understandable. This was my first UI animation shot!
@saptarshipr
3 жыл бұрын
You're welcome 😊
Awesome tutorial. You have a great teaching style, very easy to follow. Thank you for putting these together. Looking forward to future episodes.
@saptarshipr
4 жыл бұрын
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 the best, looking forward to seeing UI animation with the mobile mockup as well.
@saptarshipr
4 жыл бұрын
Thank you, Varun! Sure, let me cover the mockup bit :)
Thanks Sapta, just used this tutorial to animate ui for a case study.
@saptarshipr
5 ай бұрын
That’s awesome! 🤩
Thanks you very much sir! i learned a much today !!
Going to follow along both the tutorials this weekend. Exited for first ever interaction with after effect 🤩
@saptarshipr
4 жыл бұрын
Yasss! Do tag me when you post your first interaction work on social media :D
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!
@saptarshipr
3 жыл бұрын
You're very welcome, Anezka! Glad to know that you liked it. Yes, many more Gyaan talks and Tutorials on the way :)
Very well explained. You are a master instructor. Thank you for this!
@saptarshipr
3 жыл бұрын
Thank you, Marie 😃🙌
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!! :)
@saptarshipr
4 жыл бұрын
Welcome 🙂
This is something I was waiting for. Thank you Sapta! :) Waiting for the next class!!
@saptarshipr
4 жыл бұрын
Hope you enjoyed it!
It was fantastic. I want to learn UI/UX. this is definitely a motivator. Thanks :D
Amazing tutorial🔥
Great Tut very clear, thank you Santa
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👍
@saptarshipr
3 жыл бұрын
Really glad to hear! 😃
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
@saptarshipr
3 жыл бұрын
You're very welcome! Glad that it was helpful :)
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
@saptarshipr
3 жыл бұрын
Thank you, Jahnavi! Glad that you found it useful :) I will highly recommend you also check out the other episodes of this series.
You are an amazing mentor, sir.
@saptarshipr
3 жыл бұрын
Thank you Akshay 🙂
Damn that's slick man loved it. Doing it parallely is also so easy thanks to the files you shared.
@saptarshipr
3 жыл бұрын
Your're welcome Sparsh! Yes, thats the point. You watch, pause, do :)
Outstanding tutorial. Easy and very clear to understand. Go Ahead...
@saptarshipr
3 жыл бұрын
Many many thanks
Thanks for the tutorials. Waiting for the next. 😀😀😀
@saptarshipr
4 жыл бұрын
You're welcome, Nivesh! Hopefully on Monday or Tuesday :)
Honestly the best AE tutorial ever. Thank you Sapta.
@saptarshipr
2 жыл бұрын
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.
@saptarshipr
4 жыл бұрын
Thanks a lot Ramesh! Glad to know that you found it useful :)
Thanks. Great video !
Before I searched many times on KZread but can't find it...Thank you I got this
Thank you so much for making such amazing and easy AE tutorials Sapta Sir you are the best Motion Design teacher
@saptarshipr
3 жыл бұрын
Thank you so much 😀
Hello. I am from Bangladesh. Thanks a lot for this course. I will not miss any of your courses.
Great stuff dude!
Excellent tutorial Sapta. You've mastered the art of explaining things in a simple clear way :)
@saptarshipr
3 жыл бұрын
Thank you, Terence! 😃 Many more videos are on the way!
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 :)
@saptarshipr
4 жыл бұрын
Glad I could help, Sanika :) Many more to come.
Great information buddy!!!
Thanks a lot, man. Keep making this type of tutorial. I love your detailed teaching approach. Love from another Bengali from Bangladesh.
@saptarshipr
3 жыл бұрын
Thanks a lot, Rifat! 😃🙌 Love from another bengali from India.
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.
@saptarshipr
4 жыл бұрын
You are most welcome, Sudharsan! Glad to know that you liked it :)
. 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. .
@saptarshipr
4 жыл бұрын
Happy to hear that :)
This was my first UI animation. Very easy to follow. Thanks Sapta 😎😎🚀
@saptarshipr
3 жыл бұрын
You're welcome, Paul 😀🙌 I suggest you check out the other tutorials as well
Great Video - Nice work
Hands down the best AE tutorial on UI/UX! Flawless explanation style 😍
@saptarshipr
4 жыл бұрын
Wow, thanks! :D
@HimanshuSharma-sg4ql
Жыл бұрын
@@saptarshipr U really simplify things.
Thanks Sapta! After 14 hours of office schedule! Still this made my day to come to a good ending. !
@saptarshipr
4 жыл бұрын
14 hrs! :O Please take care of yourself! Really glad to hear that you are following my videos inspite of your hectic schedule :)
What a great tutorial, You made it so easy to understand 🙌
@saptarshipr
3 жыл бұрын
Happy to hear that!
thank you so much now i can animate my design
Great tutorials :) Keep it up!
BRO, this is the best ever I seen UI Animation! Please make UI Animation for Website as well
Already rocking brother!! i was litrally searching for this type of tutorials baby steps to master
@saptarshipr
4 жыл бұрын
Thank you! More to come :)
@mohanr5001
4 жыл бұрын
@@saptarshipr eagerly waiting brother!!
Yes, mah first time and It's awesome!!
@saptarshipr
3 жыл бұрын
Glad to hear, Akshay! I m sure you will like the other ones as well. :)
like I am an amateur intermediate UX UI designer he is going to make me a pro thanks Mann
@saptarshipr
3 жыл бұрын
That's the plan 😃🤘
Great tutorial!
loved this tutorial and made same along side the video thanx sapta cant wait for more videos like this
@saptarshipr
3 жыл бұрын
You're welcome, Ajay! :) Thanks for watching them.
@ajaythakur3557
3 жыл бұрын
@@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 😁
@saptarshipr
3 жыл бұрын
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
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.
@saptarshipr
3 жыл бұрын
Really happy to hear this! Its often that little voice inside us that keeps telling us that we cannot do something. :)
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 KZread 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🙏
@saptarshipr
3 жыл бұрын
That's great to hear, Dheeraj 😀
This is best explanation of After Affects I have seen ❤️
@saptarshipr
4 жыл бұрын
Thank you, Abraz! :) Would love to see what you make. Please dont forget to tag me when you post your work :)
Very well explained! Thank you!
@saptarshipr
4 жыл бұрын
Hey Sudeep.. Glad to know that you liked it :)
Easy to understand, and you explanation is Awesome. thank you very much for your efforts Sapta bro, im waiting for next video 😁✌️
@saptarshipr
4 жыл бұрын
Thank you Srijeth! The subsequent episodes will be more complex but insanely enjoyable 😃 i m sure you will love them 🙂
Amazing Sapta🤩 Amazing UI animation tutorials🙌
@saptarshipr
Жыл бұрын
Thank you 😁
@Nileshkumar-si7jr
Жыл бұрын
@@saptarshipr Can we get one short video series for UI design fundamentals 😅
Thank u very much!
You are a great teacher :) Thank you very very much :)
@saptarshipr
Жыл бұрын
Thanks a lot! :)
nice tutorial dude!
Love it!!!!!!
Thanks for the nice tutorial, it really helps.
@saptarshipr
4 жыл бұрын
Thank you, Sreejith! :)
Video is amazing and one thing I noticed that he made this video at 1am around 😮
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.
@saptarshipr
4 жыл бұрын
I ll do that in the next episode. I ll make a complete Dribbble shot there 🙂
Thank you ❤️
Thank u you make it so easy... 👍
@saptarshipr
3 жыл бұрын
You are so welcome!
Hey savior! Eagerly waiting for your next video.
@saptarshipr
4 жыл бұрын
Will upload soon :)
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
@saptarshipr
3 жыл бұрын
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.
Sapta bhiyaa... You are awesome.🤗
@saptarshipr
3 жыл бұрын
Thank you so much 😀
first ui animation yay!
@saptarshipr
4 жыл бұрын
Awesome! The next episode can be your first Dribbble shot! :D