Graphic Design

SVG

Vector, resolution independent, draws with math html: img, svg css: background animatable, scriptable can be quite accessible? Many JS image and graphics libraries use it

Inherent scalability makes it great for small/large adjustments, particularly where responsive design can use 1 source graphic with minor adjustments.

Usage with fonts enables scaling combined type treatments and keeping actual text, without using positioning tricks that fail in diverse viewport sizes and magnifications.

Uses:

• Charts and Graphs

• Diagrams

• Shape Morphing

• Line Drawing Animation

• Interface Animation

• Icon Systems

• Art

• Headline Lockups

• Animated Explanations

• Large canvases with adjustable viewports (position, size)

Images

GIF

Images with large areas of solid colors "Binary transparency"

PNG

8-Bit: Good GIF alternative; possibly supports alpha transparency 24-Bit: Possible JPG alternative; natively supports alpha transparency

JPG

Photographs and images with color gradients

WebP

Smallest format, supports alpha transparency, not supported by all browsers

Animation

From Val Head presentations and more

Valuable

Enhance aesthetics, have a purpose

12 Principles

Disney Illusion of Life

1- Timing (duration) and Spacing (aka easing; speed changes over duration)

Make animated objects appear to obey the laws of physics. Establishes mood, emotion, and reaction.

2- Follow Through

(mine) Not all elements of an object start/stop moving at the same time. Overshooting the target position

3- Secondary Action

Supplemental action, reinforces and adds dimension

Choreography

Designing all your UI animations to feel logical and related. Have similar objects animate in similar ways Have entrance inform exit (location). (mine) Toggling reverses animation. But exiting to places other than origin can indicate a new action taken, state changed. Thus choreography provides info about actions taken.

Match velocities and not durations between different animations to maintain correlation.

Consistency Uniform behavior, can seem somewhat mechanical, predictable, organized, clear

Cohesive Similar feel and rhythm, even if inconsistent

Brand Alignment

If a brand's main or historical product is synonymous with a particular movement (rotations, swaying, straight line, more), can the UI or another element mimic this?

Matching animation styles to brand voice and tone Energetic, friendly, sleek, strong, playful

Examples: Follow Through and Anticipation: Energetic, friendly, bold Squash and Stretch: High energy and playful Standard Ease-in-outs: Balanced and measured Smaller Movements: Calm and subtle Opacity and blurs: Soft and stable

Belongs in your design system, style guide, etc.

Document what animation is used for:

• Entrances and exits

• Give emphasis

• Give feedback

• Transitions between states

• Personality and brand

• Orientation

• Storytelling

Example: Salesforce Lightning design system

Document your Building Blocks:

• Durations: ranges, rhythm

• Properties that are animated

• Easing values used

• Physical space: weight and mass, depth and layers

Example: IBM Design system

CSS

From Val Head, pick for:

• "Well-defined state transitions" between beginning and end states

• Loading animations, looping animations

• Animations on events CSS is aware of like :hover, :focus and simple interactions

Use with JS:

• JS acts as conductor, adding removing animation (classes) in response to events.

Pros:

• No external lib needed

• Great potential for performance without much effort

• Reusable keyframes

• Can adjust properties in media queries for responsive animation when needed

Cons:

• Access to limited events

• Animations defined entirely ahead of time

• Can't separate transform properties for varying manipulation

JS

Pick when:

• Chaining more than 3 animations in a sequence; timelines

• (mine) Multiple timelines with different playback rules

• The animation needs to change dynamically at runtime

• Need to animate transform properties separately

• Physics or other complex easing structures are required

• Drag and drop interactions

• Multiple objects that need to respond to the same input

Pros:

• Complex animated interactions

• Narrative or immersive animation

• "Dynamic state transitions" based on multiple, conditional events

• Immersive animation for storytelling and game worlds

• Many options to accomplish same goal

• Can animate DOM, SVG, canvas

Regular JS options:

• requestAnimationFrame

Libraries:

• GreenSock

• Velocity

• Anime

React

With CSS or JS, apply styles as normally to classes or control their appearance through component lifecycle methods.

Transition Group (Plus) React Motion Pose others

SVG

Great at:

• Illustrations, icons and logos

• Shape morphing

• Motion along a path

• Infographics and dataviz

• Fluidly scaling, responsive animation

• Small file sizes

Animate using:

• CSS - Transitions and keyframe animations can be applied to SVG elements - Limited number of properties exposed to CSS - Transforms not supported in IE or Edge

• JS - Critical animations to ensure support - Can access/animate native SVG properties - Can do motion along path, shape morphing, more...

Performance

Browsers will most efficiently repaint the screen when animating using CSS transform size, position, rotation, and opacity. These aren't affected by browser operations on its main thread, making it particularly good for loading animations.

In JS, hardware acceleration isn't automatic though libraries aim for it.

Tools

Lottie: Render AfterEffects animations for web and native mobile.

Adobe Animate: Export to WebGL

Browser Dev Tools: checking for hardware acceleration or not, providing hints