Animate this! Principles and practice in UI animation

Tuesday, March 21, 17

Who the heck are you? I’m Mario Noble

• Your friendly neighborhood SCWDD Organizer

• Web Designer / Front end developer

• UX Designer

• Jack of all digital trades

• SoCal cliche

Tuesday, March 21, 17

Why Animation in UI?

Tuesday, March 21, 17

Movement compels attention.

Tuesday, March 21, 17

Too much movement distracts.

Tuesday, March 21, 17

UI animation is a means to an endnot a means unto itself.

Tuesday, March 21, 17

Focus

Tuesday, March 21, 17

Focus

Tuesday, March 21, 17

Orientation

Tuesday, March 21, 17

Orientation

Tuesday, March 21, 17

Orientation

Tuesday, March 21, 17

Feedback

Tuesday, March 21, 17

Feedback

Tuesday, March 21, 17

Branding

Tuesday, March 21, 17

Branding

Tuesday, March 21, 17

Animation is the depiction of change over time.

Tuesday, March 21, 17

Animation is the depiction of change over time.

Tuesday, March 21, 17

12 Basic Principles of Animation

https://vimeo.com/93206523

Tuesday, March 21, 17

A few key points...

Tuesday, March 21, 17

Tuesday, March 21, 17

Attention is a resource.

Tuesday, March 21, 17

A rule of thumb is to keep animations between 200-500ms.

Tuesday, March 21, 17

Animations can occur not only in transition on screen...

Tuesday, March 21, 17

...and off screen...

Tuesday, March 21, 17

...but also in place.

Tuesday, March 21, 17

Eye flow...

Tuesday, March 21, 17

Eye flow...and sequencing are key.

Tuesday, March 21, 17

Keep things consistent.

Tuesday, March 21, 17

Keep things consistent.

except where it makes sense to not be...

Tuesday, March 21, 17

Remember to integrate animation into your design process just as you would the use of color.

★ Business and user priorities

★ IA

★ Storyboarding

★ Prototypes

★ Styleguides

★ User research

Tuesday, March 21, 17

Keep Accessibility in mind.

Tuesday, March 21, 17

Execution - The nitty gritty of making it happen.

★CSS transitions and animation

★ jQuery

★Velocity.js

★Greensock (aka GSAP)

★Javascript Animation API

★Framework specific libraries (Angular, Polymer, React, native iOS/Android, etc.)

★DIY custom code

★ I wish I could say Flash...

Tuesday, March 21, 17

There is no one right way.Use whatever works for you best.

Tuesday, March 21, 17

We’re choosing GSAP to demo because it’s:

★Mature

★Platform agnostic

★Browser stable

★Plays nice

★Consistent handling of transforms and SVGs

★Full featured

Tuesday, March 21, 17

GSAP “Ecosystem”

★TweenLite

★TweenMax *

★TimelineLite

★TimelineMax

* TweenMax is the one you want to use starting out since it all the others built in.

Optimize as needed.

Plus various Plugins and Extensions

Tuesday, March 21, 17

A word about their licensing structure.

It’s free if you do not sell products or services made with it to multiple end users. A single client is fine. By the way, I’m not affiliated with the company in any way...

Tuesday, March 21, 17

GSAP Basics (first we’ll tell, then we’ll show)

Tuesday, March 21, 17

TweenMax.method(target, duration, {vars}, position);

Example: TweenMax.to(box, 0.5, {x: 50, y:100});Position is used in methods like staggerFrom

Tuesday, March 21, 17

Targeting

★ Can use any class or html tag (i.e. .my-class - uses queryselectorall)

★ getElementbyID

★ jQuery ($)

★ a var or array of references

Tuesday, March 21, 17

Duration

★ Usually in seconds

★ Can be frames

Tuesday, March 21, 17

Vars

★ Can be single and multiple css properties - properties should be converted from

using hyphens to camel case (e.g. border-radius is borderRadius)

★ Also uses special properties like easing, repeat, delay, timeline controls

★ GSAP callbacks and custom callbacks

Tuesday, March 21, 17

Position

★ Sets when the tween occurs in the timeline in terms of seconds or frames.

Tuesday, March 21, 17

also...

Tuesday, March 21, 17

Easing

★ Default

★ Out of the box

★ Custom

★ Let’s check out the visualizer

Tuesday, March 21, 17

Timeline fun

★ Reversing

★ From versus To

★ Staggers (aka offsets)

★ Yoyo

★ Timescale

Tuesday, March 21, 17

Multiple Animations

★ using new

★ standalone animations

★ added / chained animations

★ modifying multiple animations at once

Tuesday, March 21, 17

OK, let’s try this.

Tuesday, March 21, 17

Summary

★ Form follows function

★ Focus, Orientation, Feedback, Branding

★ Integrate Animation into the overall business, design and dev process

★ Animation frameworks will target change in target properties and their sequence

over time

★ Realistic animation often uses some form of easing

Tuesday, March 21, 17

Resources

★ Designing Interface Animation

★ The Illusion of Life

★ Greensock GSAP site

★ I Hate Tomatoes

★ Velocity JS

★ Mozilla’s JS Animation API

Tuesday, March 21, 17

Q&A / Sharing

Tuesday, March 21, 17