Microinteractions: a few basics of animation in Adobe After Effects

Our lives with tech are filled with microinteractions from the moment we turn off our alarm clocks in the morning. They are, primarily, feedback tools. These moments create engagement between us and technology in the following ways:

  • informing the user that their action is received and being acted upon – like the shutter click of the camera app,
  • indicating that the app is ‘thinking’,
  • alerting the user by drawing attention to a next step or a particular space on the app and
  • as an elegant moment to show where one is or when one has opened the app.

Illustrated below are some examples of basic animations / microinteractions accompanied by a graph. The aim is to share some basic information about animation properties, and to provide a visual queue as to how these animations work. It mainly focuses on the use of ease (emulating real life movement by making the animation less severe or pronounced), anchor points, and keyframes to create more exciting and visually appealing animation.

Rotation – No Ease

Looking at the first animation and graph, you can see an example of a basic rotation with no ease applied. The movement is robotic and static, as seen in the square shape of the graph in After Effects.

Rotation – Ease in and out

As the graph below indicates, this is a more rounded and therefore less clunky movement. Usually, microinteractions should be gentle on the eye.

Now, looking at this example, we can see that some ease (curvature) has been added. The movement is now more fluid, with a more natural looking rotation. The graph represents the movement, indicated with a gentle curve of the line. The movement has an upwards incline first, much like a boulder being pushed up a hill, and will end with a decline, thus a faster movement as the boulder descends after reaching the peak.

Rotation – Ease in and out (slower start, faster finish)

In this example, you can see that the curvature/gradient of the line has been changed. In this case, the rotation will now start slow, building up to a rapid peak, and then end the rotation quickly. This makes the object look more whimsical and even more lifelike. When the object rotates back, the opposite happens, hence a fast start, and a slow end.

Anchor Point – On Object

Using anchor points allows me to move an object; both around itself and from one point to another. In this microinteraction, the anchor point is the centre of the square. Whereas in the next example, it is the centre of the canvas.

Anchor Point – On Center

Scale – Small to Large

The object below scales up and down in size, this is accomplished by setting different values at specific keyframes (intervals at which values are set and remain static) within the timeline. Thus, you can set the first keyframes scaling to a 100%, the second one to 150%, and the third one to 100% again. After Effects completes the in-between values set, thus resulting in a smooth up and down scaling animation.

Solid Object + Stroke – End

Here we can see some examples of After Effects redrawing a path that was created in Adobe Illustrator. This shows a very nice synergy between Abode products, and also expands on what can be done when software is combined. The path was drawn in AI, then imported to AE, and the effect you see is then created by using the Start and End properties. Once again an ease was applied to make for a beautiful animation.

Solid Object + Stroke – Start and End

With the help of some useful plugins and tools, these animations can be converted to code. In this way, I can create a beautiful animation within the code itself, rather than an unscalable animation (*.gif) files/images. I am looking forward to collaborating with a developer on this, and bringing out another blog documenting our progress.

Please send me a tweet if you have feedback or questions.

Share this Post

About the Author
mm

Paul Roux

Twitter

Paul is a UI Designer at Polymorph.