Motion Design in digital products

Crash course

You will learn

How to think about design in multiple dimensions in context of digital products
How to prepare file in Adobe Illustrator
How to create first animation in After Effects and with CSS

You will need

Adobe Illustrator
Adobe After Effects
Bodymovin / Lottie plugin
Visual Studio Code

Introduction 🥱

Definition

Let’s start with a definition of the motion graphics / design.
According to Wikipedia “Motion graphics” are pieces of animation or digital footage which creates the illusion of motion or rotation..

Firstly, let’s focus on the aspect of the illusion.

Illusion creates a deceptive impression of the cube being placed in three dimensional space. In the following examples you will see how minimalistic design decisions can change user’s perception.

As you can see in the first example – movement along two axis (Y and X) suggests that cube is pushed on the flat surface.
In the next example cube is still moving along Y and X axis. However, casted shadow will create illusion of movement along Z axis.

Types of motion

Functional

Transitions which improve usability and user experience
Animations which emphasise state changes of the components (hover, focus, active) for ex.: link component indicates its click-ability by changing state and showing different cursor

Structural

Transitions which support information architecture (modals, notifications, tooltips, mega-menus)

Emotional

Animations which complete moments of delightness (for ex.: finished ticket, ended journey)
Animations add unique character to the brand

Motion Design in digital products

You can see motion design and animations used in:

Micro-interactions inside web applications and mobile apps
Visual assets on the websites and online presentations
Social media and online advertisement
In video productions

*duolingo: example of emotional motion design used for preloading applications content and awarding user once lesson is completed.

Formats

MP4
GIF
JSON: JS animations
SVG

Motion Design: basics

Below list relates to supported properties in Lottie library and available manipulations in CSS. If you decide to use other formats than JSON / SVG you can go wild and nothing will be impossible to render. Some other effects like turbulent displacement could be auto-traced – however it will make the JSON file much heavier which might have an impact on the performance of the app.

Transformations:

Rotation
Position
Opacity
Scale

Masks

It’s possible to animate masks by changing content properties like path or adding transformations such as rotation or scaling.

Rotate

Position

Opacity

Scale

Path

Trim paths

Stroke

Fill

Mask

SVG animations 🚣🏻

You will learn

Basics of SVGs
How to prepare Illustrator file
How to use CSS inside SVG files

SVG elements

Scalable vector graphics are using three types of objects: vectors, images and texts. Below you can see a list of all vector types:

Circles
Rectangles
Lines
Paths
Ellipses
Polygons

Circle element explained

Sample code

On the following example you can see that SVG is using a vector (graphic object): circle. Vector elements have own HTML/SVG attributes like radius (r), stroke color (stroke) and stroke weight (stroke-width).

While it doesn’t make any sense to “write” vector graphics with html – it is possible to modify attributes by overwriting them with CSS.

CSS will allow you to create simple animations without additional JS libraries. In the next section I will explain how to prepare illustrator file and add custom CSS animations inside SVG file.

Output

Adobe Illustrator Checklist

👽 Vectors

Vector elements must be placed on the individual layers

📙 Layers

Layers should have unique names – this creates IDs in SVG file

🖨️ Images

Avoid raster graphics*
*if used: assets must be embedded inside SVG file

💥 Effects

Avoid special effects such as shadows or blurs

AI file anatomy

Before you start designing your graphic elements think about potential animations. This will help you to visualise which elements have to be sliced and placed on individual layers.

Stimulate your design creativity by moving elements around your canvas. You will be able to see which elements have to more flexible – for instance: use strokes instead of shapes if you want to create illusion of facial expressions by changing dynamics of eyebrows.

Place moving parts on the individual layers and name them. Keep in mind to use unique names for your layers. Layer names will pass on the ID attributes of your SVG objects. Later you can target those IDs with CSS rules.

That step is also important if you want to import AI file into After Effects project.

While exporting to SVG format make sure you have matched object IDs with layer names.

AI file anatomy

You can see that layer names have populated ID attributes inside SVG file.

SVG inline code

keyframes

CSS as well as traditional graphic softwares (for ex.: After Effects) use keyframes

📽️ Responsive user interfaces have a frame rate of 60fps (for ex.: Firefox)

In the nutshell it means that 1s has 60 unique frames

In the next example we will use percentages to define the timeline of the animation

Length of the animation is 4s
Translating on Y axis starts at 50% and ends at 75%
Translating will start after 2s and will take 1s (25% – 1s)

SVG inline code

Now you can animate individual graphic objects with CSS by targeting the IDs.

I assume that you already have some basic understanding of how CSS works – so I won’t be explaining how to use @keyframes or what CSS properties can be animated and whatnot. Below you can find a list of commonly used CSS properties for @keyframes.

transform: rotate(±deg);

Rotation – value ex.: 45deg

transform: translateY(±px);

Position on Y/X or Z axis – value ex.: 50px, 50% ..

transform: scale(±);

Scale – value ex.: 0.1, 1 ..

opacity: ±;

Opacity – value ex.: 0.1, 1 ..

stroke-dasharray: ±px;

Dash array length – value ex.: 100px

stroke-dashoffset: ±px;

Offset between dashes – value ex.: 100px

stroke-width: ±;

Stroke weight – value ex.: 4px

stroke-linecap: ±;

Stroke linecap – value ex.: round

transform-box: fill-box;

Defines the layout box to which the transform and transform-origin properties relate. Values: fill-box, view-box, border-box ..

transform-origin: center;

Sets the origin for an element’s transformation

fill: ±;

Fill color of the SVG object. Value ex.: white, #fff, rgb(255, 255, 255) ..

Results

SVG file weight: 3kb

GIF file weight: 1,6mb

Used CSS properties:

Transform with translate Y and rotation within masked object
Transform with translate Y and rotation
Transition: Ease

After Effects: basics 🎨

You will learn

How to import assets
Operations on keyframes: transitions and transformations
Work with masks
How to export animation to JSON format

After Effects: interface

I assume that you have had contact with Adobe softwares so I will keep it simple and all you need to know is:

Project

Here you can find all the project details: compositions, imported files and static assets or other dependencies. Usually there is also effects panel – so if you use special effects you will be able to manage them in additional tab.

Composition

In composition panel you can preview your animations and open pre composed scenes or imported compositions. You can also add the bodymovin plugin window – to preview animations rendered for Lottie library.

Controls and Effects

In controls area you can change typefaces, font properties, alignment and so on. Effects panel below will contain all available effects – you do not need them if you want to focus on web animations.

Timeline

In the timeline area you can see all the layers and on the actual timeline (on the right side) you can edit keyframes, add expressions (scripts) and control the timing.

Setting up project

Importing assets

Make sure to import your AI file as Composition – Retain Layer Sizes.

Open composition and decouple layers from your AI file. Use option – Create Shapes from Vector Layer.

This will convert vectors into editable shapes.

Next cluster your layers and name accordingly.

Organising layers

Organise layers by hiding unnecessary elements (for ex.: masking by setting Matte).

Select layer you want to cover with a mask – in the following example I want to hide the green bar which will be used later to animate progress bar.
Go to the Effect ⚡ Channel ⚡Set Matte. In the project panel you will see Effect Controls panel – go there.
Now you can apply mask from a layer by clicking on “Take Matte From Layer”. In my case I used “button” layer.

Later you will see how I used that to create a pre-loader effect.

Animating

Transform: position

Let’s move our pointer over “drag and drop” field by changing position of the element. Select a layer you want to animate and press “p” to see Position property.

Move “Current time indicator” in the timeline panel about few keyframes (depends on the desired length of the transition) and move your object wherever you need it. In my case I will move it over the “drag and drop” field.

You can adjust path by editing its curve.

Use timeline to hide or display elements. I will hide the layer which contains text with name of file. I will also hide “x” button within that field.

Output

Let’s add an active state to the button. We can do it by changing background color / fill color. Expand “Contents” tab of your layer.

Contents: fill

Add a new keyframe on your timeline and change the hex value of the Color property. If you right-click on the start/end keyframe you can add transitions such as ease, ease in or ease out. Go to “Keyframe Assistant” and select desired transition.

Final version

Overall, you can achieve great effects with basic transforms and operations on contents.

In the nutshell:

Start with storyboard in order to define length of the animation and transitions.
Organise your project first. Label layers, hide unnecessary elements on the timeline.
Create basic animations – start with simple transformations.
Polish animation by adding more details such as transitions.

Handy tricks

Animate along the path

To animate object along the path – copy Path values (you can create a layer with a path in Adobe Illustrator before you import the main file) and paste it inside Position attribute of an object you want to animate.