WebDirections2015

Meta purpose of this talk is bridging the design and development gap

Yesterday I saw all sorts of people walking across the bridge. Some were commuting from work across the river. We live in some places and work in others, there are places where we feel at home and then the places where we have a job, a title, a position a role.

With creating software applications, we tend to see our work as distinctly in the code. The reality is that we might actually really enjoy the design aspect. As software engineers we have a natural requirement to design, it is just represented in code. We should also take into consider the greater experience design.

How many of you consider yourselves a designer? Developer? Hybrid?

Designing animations for software has always been a bit decoupled from the implementation. translating that onto web or mobile is always a bit tricky.

Developers can benefit by understanding basic principles behind animation design

Everyone can play a role in adding life to the interface

Math, and by extension physics is the foundation of our reality (design, nature, beauty abstracted away gives us math formulas)

Math, and by extension physics is the foundation of our reality (design, nature, beauty abstracted away gives us math formulas)

Animation in interfaces is crucial because we evolved to use movement as a cognitive aid.

We recognize movement in our peripheral vision faster than changes in color.

Movement directs our attention

Movement triggers emotional response

New theories actually tie emotional responses to our rapid decision making (somatic-marker hypothesis)

Something that is getting more and more attention now is the timing of animations in interfaces, which I'll go into later

So we are hypersensitive to motion and therefore it needs to feel right

What does it mean to "feel" right? how close does something uphold our view of reality?

We will evaluate software on how close it feels to what we know.

This is all very much based in physics and in our interaction with normal object in our daily lives

We attribute those things around us to have certain properties - this is called affordance.

Perceived affordance is an abstraction - it is skeumorphism, leather binding on a digital interface

So using visual metaphors is one way to indicate deletion but motion is another.

hardware -> firmware -> assembler -> kernal -> OS & apps

A good abstraction will generalize that which can be made abstract; while allowing specificity where the abstraction breaks down and its successful application requires customization to each unique requirement or problem.

We expect our screens to change, to update and to inform us with that update

We abstract the changes that a machine is taking with the user interface, otherwise we would all just be back writing assembly code

The GUI was the first level of abstraction, also known as WIMPs (windows, icons, menus, pointer)

The next level is NUI or natural, using our fingers for touching, squishing, stretching

The next level is coming with AR and VR

Animations are cognitive aids

In today's interfaces, the affordance of screens is change

It is easily perceived & interpreted

It can be discovered

let's look at some examples of ways in which people are using animations to assist users

Subtle Cues

Really simple animations can do a lot to set up expectations

animations can create an emotional reaction

more and more brands are creating custom animation libraries and components to use in all their digital properties - Apple built it directly into their developer platform, Facebook created a FIG (Facebook Interface Guidelines). Google sort of open sourced theirs with Material Design

assistive and descriptive animation

animation that creates emotional connection to a brand

Allows the user to make a quick decision based on an emotional response to an animation

Give quick feedback

It’s nice to feel like things are reacting to what you’re doing.

Progressive Disclosure

reduce cognitive load

only show me what is relevant now

guidance, continuity and PACE

if we had a piece of paper for every form we have filled out online we wouldn't have any forests left. bureacracy is alive and way too active

guidance, continuity and PACE

if we had a piece of paper for every form we have filled out online we wouldn't have any forests left. bureacracy is alive and way too active

Auto Loading

Navigation

Animated transitions between screens convey logical relationships and create an understood "map" of an interface from how things enter and exit a screen.

death of breadcrumbs

don't ask someone to read the fucking manual

Traditional anchor jump or worst a page load

better

no reload and we now know that where the about section is, simple but used everywhere

Interactive

less clicking, less reading

let your users explore and discover, make it fun

Context

always keep your users informed and knowing that something is happening

context sensitive navigation

flick gesture from inertial scroll

Tweetie - patent

continuity & pace

How do you communicate animation ideas?

Making the motion feel right requires details

Math

Happily animation has its roots in some very easy math functions.

You can then take basic functions and add in all sorts of complexity

position, velocity, acceleration

Early animation techniques were developed by Windsor McCay sequences of drawings by the best designers created key animations

lackeys would draw the frames in between

Instead of a human making the natural transitions betwee key frames, we use software to be the "inbetweener", which uses physics and math.

Disney adopted this technique and came up with the "12 principles of animation design"

Moving pixels

var ball = document.getElementById('ball');
var start = 0;
var basicAnimation = function (e) {
	start += 12;	     
	basic.style.left = start + "px"; 
  if (Math.abs(start) <= 800) {
    requestAnimationFrame(basicAnimation);
  }	
}

Simple addition of one pixel on another.

Doesn't give much insight into where you are at within the animation - you know position but not necessarily how much progress has been made.

Animation gets interesting when you can start to think of things in terms of percent changed

The basics of animation: interpolation

valueAtTime = (end - start) * time / duration + start

One simple formula describes all animation. all based on time. where you want to start, go (change), total duration and then you can always get at where you are currently in the process

To make these motions appear realistic, interpolation algorithms have been sought that approximate real life motion dynamics.

custom algorithms, motions with unique, unnatural and entertaining visual characteristics

Breaking it down to [0-1]

valueAtTime = (end - start) * time / duration + start

Change @ Percent Complete

when making some kind of animation, we know the starting and ending positions, and want to transition between these. All of these can be converted to interpolation from 0 to 1.

you are trying to map everything into a point of reference between 0 and 1

multiply any value between 0 and 1 with another value between 0 and 1, and the result is guaranteed to be between 0 and 1.

So Interpolation allows you to start talking more generally and easily porting over whatever you need to put motion to into a very easy range of reference.

Timing

var time, startTime;
var start = function () {
  startTime = new Date().getTime();
  run();
}
var run = function () {
  time = new Date().getTime() - startTime;
  div.style.left = 900 * time / 1000 + "px";
  if(value < 1) requestAnimationFrame(run);
}

Now we have a consistent number to work with. All animations will fall in a range from [0-1]. The percentage of completion…

What a property value is at any given time isn't nearly as important as how that property changed from its initial value to the final value over the lifetime of the animation.

//valueAtTime = (end - start) * time / duration + start
div.style.left = 900-0 * time/1000 + 0+"px";

The vast majority of mathematical equations and natural phenomena are nonlinear, with linearity being the exceptional, but important, case.

With Fermi and John Pasta, Ulam studied the Fermi–Pasta–Ulam problem, which became the inspiration for the vast field of Nonlinear Science.

Natural movement

Torque, drag, spin, friction

nothing in our world moves linearly - nothing has perfectly maintained speed except in vacuums - we don’t live in vacuums, we live with friction and barriers and drag - we accelerate and decelerate at differing rates - we experience yaw, torque, etc

Easing functions

basically we're adding in acceleration

Easing

			valueAtTime = (end - start) * easingfunction([0-1]) + start		
		

Change in property times (some float) plus beginning value.

Power Functions - EaseIn

var run = function () {
  time = new Date().getTime() - startTime;
  div.style.left = 900 * Math.pow(percentChange, 3) + "px";
  if(time / duration < 1) requestAnimationFrame(run);
}

Power Functions - EaseOut

var run = function () {
  time = new Date().getTime() - startTime;  
  div.style.left=(endX - startX)* 
  (1 - Math.pow(1 - (t / d), 3)) +startX+"px";
  if(time / duration < 1) requestAnimationFrame(run);
}

Trig! ... sine :)

var run = function () {
  time = new Date().getTime() - startTime;
  div.style.left=(endX - startX)* 
  Math.sin( t/d * Math.PI / 2 ) +startX+"px";
  if(time / duration < 1) requestAnimationFrame(run);
}

Introducing time and motion changed everything for me, because what I realized was that it gave you precise control over the emotion you are trying to convey and how an audience will interpret your message. I’d often look to title sequences for inspiration because I was fascinated with how a 30 second or 3 minute sequence had the ability to set the tone for an entire film and foreshadow what was going to happen.

Follow Through

> 1

We can also go beyond that 0-1 range

One of the 12 Basic Principles of Animation is Follow through or elastic movement.

Follow through refers to an animation technique where things don't stop animating suddenly. They exceed their final target slightly before snapping back into place. This useful technique is something that can only be done by going beyond the 0-1 range.

Elasticity

var run = function () {
  time = new Date().getTime() - startTime;
  div.style.left=(endX - startX)* 
  k * k * ( ( s + 1 ) * k - s ) +startX+"px";
  if(time / duration < 1) requestAnimationFrame(run);
}

Bounce

var easeFunc = function(k) {
if ( k < ( 1 / 2.75 ) ) { 
return 7.5625 * k * k;
} else if ( k < ( 2 / 2.75 ) ) { 
return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75;
} else if ( k < ( 2.5 / 2.75 ) ) {	
return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375;
} else { 
return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375; } }
div.style.left=(endX - startX)* easeFunc(t/d) +startX+"px";
				

Physics Engines

As you get closer and closer to reality, the math starts to go from simple algebra to more complicated calculus.

Things like damping of a spring. this is where things get pretty tricky but there are

There are many great javascript physics engines out there that take a lot of the leg work out of it for you. Diving into the source code can be fun though.

flick gesture from inertial scroll

Initial velocity of your finger then the program takes that slope and degrades it until zero

flick gesture from inertial scroll

damping of a spring. this is where things get pretty tricky but there are

Initial velocity of your finger then the program takes that slope and degrades it until zero

Performance

• Use Keyframes, Transitions & Transforms with CSS
• Use requestAnimationFrame with JS
• Web Animation API (WAAPI)

CSS is more performant when it comes to basic animations - things get pushed to a different thread

rAF is basically a browser API that is made to optimize concurrent animations together into a single reflow and repaint cycle

To prevent frames from getting dropped due to too many rendering requests, use requestAnimationFrame. requestAnimationFrame takes a callback that executes when the browser pushes a new frame to the screen. Essentially, the browser pulls for work at each frame, instead of us pushing work for each new touch event. This allows for concurrent animation to fit into one reflow/repaint cycle. As a result, it makes animations look much smoother because the frame rate is consistent.

RAIL

• Response 100ms
• Animation 16s
• Idle 50ms
• Load 1000ms

1000 - loading, 100 - finger down response, 6 - per frame, 50 - idle for cleanup

JACOB NEILSON

Users have no patience to wait for your UI to load, and once it does they want to make a decision in less than .1 seconds

Browser Rendering

• Avoid Paint & Layout
• Push things to compositor thread
• Use Transform & Translate

There is no one shot solution. CSS is great for the small things, but you still have to watch out that you aren't doing a lot of layout changes that might affect other elements. Check out csstriggers.com if you want the exact details

							.box {
							  -webkit-transform: translate(0, 0);
							  -webkit-transition: -webkit-transform 500ms;

							  transform: translate(0, 0);
							  transition: transform 500ms;
							}

							.box.move {
							  -webkit-transform: translate(100px, 100px);
							  transform: translate(100px, 100px);
							}

						var target = document.querySelector('.box');
						var player = target.animate([
						  {transform: 'translate(0)'},
						  {transform: 'translate(100px, 100px)'}
						], 500);

Users have no patience to wait for your UI to load, and once it does they want to make a decision in less than .1 seconds

Tools

Prototyping

• Keynote
• Flinto (iOS)
• InVision

• Adobe Edge
• Principle (for mac)
• Hype

• Animate.css
• CSSanimate.com
• Material Design Lite

position, scale, rotation and opacity

• Framer.js
• Tween.js
• Matter.js
• GSAP (Greensock)

Go forth and animate!

References

• Easing Functions
• Don Norman - The Design of Everyday Things
• Are We Animated Yet?
• Birds on a Wire
• Google Web Animation Docs
• Matter.js
• CSS Triggers