Duration 2h 30m Project Files Included MP4Title: UXinMotion – Micro-interactionsInfo:Learn how to create jaw dropping micro-interactions from your design source files using Adobe After Effects.

All tutorials are based on top trending micro-interaction animations on Dribbble.

Learn parenting, working with layer styles, 3D, expressions, typing effects, timing, and more.

Micro-interactionsAdding delight and usability through animationSpend more time animating with these 7 tutorials.

Tutorial #1 – Animating formsDuration: 20 minIn this first lesson, you will be learning how to build and animate shapes and colors in After Effects.

You will also learn how to apply a typewriter effect and use hold keyframes to simulate a cursor, as well as to how to direct the user’s eye.

Inspired by Andrej Radisic’s popular animation on Dribbble.

Tutorial #2 – Masked menu itemsDuration: 19 minIn this lesson you’ll learn how to create and edit track mattes, as well as animate Photoshop layer styles.

You’ll learn how to finesse the keyframes and velocity curves so that the interaction feels crisp and tight.

Inspired by Leiwaa’s awesome animation on Dribbble.

Tutorial #3 – 3D menu foldDuration: 8 minLearning how to work with and add dimensionality to your micro-interaction through the use of 3D is an important piece of the puzzle.

In this lesson you’ll learn how to set up and work with 2D and 3D UI layers.

Inspired by Virgil Pana’s rad animation on Dribbble.

Tutorial #4 – 3D seamless menu transitionDuration: 27 minIn this powerful lesson you will learn how to set up and parent objects in 3D space to create subtle and nuanced transitions.

Special attention paid to timing and finesse.

Inspired by Ramotion’s sweet animation on Dribbble.

Tutorial #5 – Transforming widgetsDuration: 13 minThis lesson is all about transforming shapes and syncing secondary design elements to tell a story and lead the eye.

Added details of background color scale provides nuance and atmosphere while keeping the interaction timing crisp.

Inspired by Creativedash’s impressive animation on Dribbble.

Tutorial #6 – Animated navigation elementsDuration: 25 minTime to take things up a notch.

Learn how to create complex animations with only a few keyframes using slider controls and simple After Effects expressions.

You will also learn radial content reveals using circular masks, to create more ‘Material’ like transitions.

Inspired by Vitaly Rubtsov’s delectable animation on Dribbble.

Tutorial #7 – Multiple simultaneous element transitionsDuration: 29 minExplore the limitless possibilities when multiple elements are transitioning.

Use a combination of dissolves, 3D rotations, and content reveals all supported by After Effects parenting.

Inspired by Ramotion’s invigorating animation on Dribbble.