Tutorial - How to Animate a Mobile UI Flow in After Effects

Опубликовано: 14 Июль 2020
на канале: Pontus Wellgraf

11,704

385

I'm taking you through how to animate this Mobile UI Animation Flow from start to finish. I will share a lot of techniques and workflow process along the way so fire up your After Effects and follow along!
#uianimation #animation #aftereffects #motionprocess

Final Animation
https://dribbble.com/shots/13532575-E...

Download project source files
  / wellgraf

TIMESTAMPS
00:00 - Intro
00:26 - Walkthrough of the entire flow to be animated
00:48 - Setting up project and main composition
04:12 - Motion 2 Plugin, Anchor point feature
04:32 - Animating in texts and elements
05:35 - Adjusting animation easing curves
07:47 - Animating elements with “Null Objects”
11:07 - Transforming card with mask
13:59 - Smooth motion by reversing easing values
17:18 - Transitioning different content
20:38 - Animating rounded mask changing shape
21:49 - Outro
22:14 - Final output, subscribe for more

TOOLS
After Effects (Motion2 Plugin mentioned)

💬 Let me know in a comment what you think about this session
👍🏼 Hit thumbs up on this video if you liked it
➕ Subscribe for much more to come

Get started with Webflow!
https://webflow.grsm.io/join

FOLLOW ME
Instagram:   / wellgraf
Dribbble: http://dribbble.com/wellgraf
Linkedin:   / pwellgraf
Website: http://wellgraf.com
Twitter:   / wellgraf