Mobile App UI Interaction Design/Animation Tutorial in After Effects CC 2018!

48
78

Checkout my Design Course on Udemy:
https://www.udemy.com/design-animate-icons-in-illustrator-after-effects/?couponCode=DESIGNP10

Support me on Patreon at just $5 a month if you find my content helpful and interesting:
https://www.patreon.com/chethankvs

In this Tutorial, we will learn to Animate the Screens and Elements of a UI for a Mobile App using After Effects CC 2018. This is also called as Interaction Design in some cases. This Tutorial is for Beginners and Intermediate but focuses more towards those who have a decent knowledge of After Effects.

As mentioned in the Video, I am collaborating with Cody Brown Design. He is a Designer with 6 years of Experience in the Industry.

Part 1 of Video by Cody Brown:

Check out his Channel:
https://www.youtube.com/channel/UCRlP8a8IjaFfjmAgRQSfNQg

So we will start by importing all our PNG images into After Effects and placing them in the correct position in the Comp. Then, we shall parent the cards so that they move together all the time. We will animate them to give a gesture of swiping. Then we will animate the layers of the Last Card by changing the Size and Position to fill the Entire Screen. We will also animate the Content that forms the part of the screen and offset them by a few frames to bring a gradual feel to the Animation. We will also make the keyframes Ease Eased and Change the Graph to make the Animation more Realistic. Finally we will add Motion Blur to finish up the Animation.

Project Files:
https://drive.google.com/file/d/1QOMzl6_uMO5SCYPoSrmHs4nlN4UQFaaH/view?usp=drivesdk
—————————————­—-
Photoshop Tutorials:

Illustrator Tutorials:

After Effects Tutorials:

Adobe XD Master Course

——————————————————————————————–
Contact me :
Twitter : https://twitter.com/kvschethan
Mail : [email protected]
Portfolio : https://behance.net/chethankvs
Instagram : https://instagram.com/devilcube_designs
——————————————————————————————–
LIKE, SHARE, COMMENT & SUBSCRIBE 🙂
#ui #motiongraphics #animation

source