UXinMotion – Micro-interactions

Video сourse: UXinMotion – Micro-interactions

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-interactions
Adding delight and usability through animation

Spend more time animating with these 7 tutorials.

Tutorial #1 – Animating forms
Duration: 20 min

In 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 items
Duration: 19 min

In 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 fold
Duration: 8 min

Learning 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 transition
Duration: 27 min

In 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 widgets
Duration: 13 min

This 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 elements
Duration: 25 min

Time 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 transitions
Duration: 29 min

Explore 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.