Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/2dmcHn0. Courtney Hemphill walks through the basic principles of animation design and the simple formulas that can be used to create robust animations, starting with an introduction into interpolation functions and how they can be crafted to represent natural movement, showing how this translates into software applications and then dives briefly into physics engines. Filmed at qconnewyork.com. Courtney Hemphill is a partner at Carbon Five, an integrated product design and development firm. She has done full stack development for over 10 years with both startup and enterprise companies. Today she spends a lot of her time convincing people that building less is more and that the cloud is solid and secure.

1. Algorithms for Anima on
Simple formulas to UIac vate
#QConNewYork
Courtney Hemphill
courtney@carbonfive.com
@chemphill

2. InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month
Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
animation-algorithms-javascript

3. Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

5. "You can take a problem that can't be solved
directly by anima on and can't be solved by
technology and work together to acheive a
much be er resolu on."
‐ Joe Longson, Senior So ware Engineer ‐ Zootopia

6.  CLI   GUI   NUI

7. Affordance & percieved
affordance

8. Animations are cognitive
aids

11. Subtle Cues

13. Progressive Disclosure

15. Colin Garven
h ps://dribbble.com/ColinGarven

16. Auto
Loading

17. Navigation

18. Adrian Zumbrunnen
h p://www.smashingmagazine.com/2013/10/23/smart‐transi ons‐in‐user‐experience‐design/

19. Adrian Zumbrunnen
h p://www.smashingmagazine.com/2013/10/23/smart‐transi ons‐in‐user‐experience‐design/

20. Context

21. Jason Zigrino
h ps://dribbble.com/shots/2749851‐Gboard‐Dark‐Material‐Mo on

22. Interactive

23. Sergey Valiukh
h ps://dribbble.com/SergeyValiukh

24. How do you communicate
animation ideas?

25. Math

27. Motion
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);
}
}

28. The basics of animation:
interpolation
valueAtTime = (end - start) * time / duration + s

29. The basics of animation:
interpolation
valueAtTime = (end - start) * time / duration + s

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

32. ‐ Stanislaw Ulam
"Using a term like nonlinear science is like
referring to the bulk of zoology as the study of
non‐elephant animals."

33. Natural movement
Velocity, Accelera on, Fric on, Torque

34. Easing functions

35. Easing
Change in property mes (some float) plus beginning value.
(end - start) * easingfunction([0-1]) + start

36. Power Functions - EaseIn
endX*Math.pow(percentChange,3)+"px";

37. Power Functions - EaseOut
(endX-startX)*(1-Math.pow(1-(t/d),3))+startX+"px";

38. Trig! ... sine :)
(endX-startX)*Math.sin(t/d*Math.PI/2)+startX+"px";

39. Follow Through
> 1

40. Elasticity
(endX-startX)*k*k*((s+1)*k-s)+startX+"px";

41. Bounce
if(k<(1/2.75)){
return7.5625*k*k;
}elseif(k<(2/2.75)){
return7.5625*(k-=(1.5/2.75))*k+0.75;
}elseif(k<(2.5/2.75)){
return7.5625*(k-=(2.25/2.75))*k+0.9375;
}else{
return7.5625*(k-=(2.625/2.75))*k+0.984375;}}

42. Physics Engines

44. Linear Interpolation Function
(start, stop, amount)
function lerp(a,b,x) { return a+x*(b-a); }

45. Radial motion
anim.theta += .02*Math.pow(1-anim.r/cw,8) * Math.
anim.p.x = anim.r * Math.cos(anim.theta);
anim.p.y = anim.r * Math.sin(anim.theta);

46. Depth (varying velocity)
//differentshapedcircles(depth)
functionshape(){returnrandomCircle(.006,.09)}
//initializeseachcirclew/randomvelocity(px/second)
x:lerp(xmin,xmax,Math.random()),
y:lerp(ymin,ymax,Math.random())}
//basicequation:incrementalxand/orybyvelocitytogetaccelerat
anim.p.x+=anim.v.x
anim.p.y+=anim.v.y
//thisjustkeepseverythingw/intheboundsofthecanvas
anim.p.x=(anim.p.x+cw/2)%cw-cw/2
anim.p.y=(anim.p.y+ch/2)%ch-ch/2

47. Constraints (gravity)
//simpleconstraintofgraduallyincreasinggravity
gravity=lerp(0,2,fraction);
//addanamountofgravitytotheyvelocity
anim.v.y+=gravity
//sameasbefore,addthevelocitytotheposition
anim.p.x+=anim.v.x
anim.p.y+=anim.v.y
//flipvelocityforbounce
anim.v.y=-.9*Math.abs(anim.v.y)
//addsabitofdragtoslowdownhorizonalmovement
anim.v.x*=.99;

48. Separation, Alignment, &
Cohesion
//setboidsdirectiontowardscenter
varcentroidDirection=vsub(anim1.p,centroid)
varcentroidDistance=vlength(centroidDirection)
//applyinteractionforceagainstboids
varcentroidForce=-attraction/(centroidDistance||.001)
anim1.force.x+=centroidForce*centroidDirection.x
anim2.force.x+=centroidForce*centroidDirection.x
varrejectForce=rejection/(distance?distance*distance:0)
anim1.force.x+=rejectForce*direction.x
anim2.force.x+=rejectForce*direction.y
//matchvelocitytonearbyboids
anim1.force.x+=velocitySync*anim2.v.x
anim2.force.x+=velocitySync*anim1.v.x

49. Collisions (engines!)
//createaworldwithagroundandsomeobjects
varbodyDef=newBox2D.Dynamics.b2BodyDef();
varfixtureDef=newBox2D.Dynamics.b2FixtureDef();
//setthedetailsforourconstraints
fixtureDef.density=1.0;
fixtureDef.friction=0.5;
//stepthroughwithinconstraintsofoursetup
world.Step(1/60/*frame-rate*/,
10/*velocityiterations*/,
1/*positioniterations*/);

50. Static & Dynamic
//setbodypartsorientedintherightdirection
torso:partTransitions(0,-.04,.02,.04,-Math.PI/2),
left_arm:partTransitions(-.018,-.03,.01,.03,-3*Math.PI/4),
//setshowpartsareattachedtoeachother
fixtureDef.filter.groupIndex=-1
//setupstatic&dynamictypes
addPhysics(anims.head[0],Box2D.Dynamics.b2Body.b2_staticBody,bodyDef
groups.slice(1).forEach(function(group){
addPhysics(anims[group][0],Box2D.Dynamics.b2Body.b2_dynamicBody,body
})

51. Performance

52. HTML, CSS, & JS Based
Use Keyframes, Transi ons & Transforms with CSS
Use requestAnima onFrame with JS
Web Anima on API (WAAPI)

53. RAIL
Response 100ms
Anima on 6ms
Idle 50ms
Load 1000ms
credit Paul Irish & Paul Lewis and Blink Team ( )bit.ly/blink‐midnight‐train

54. 100 ms

55. Rendering
Clear & Reuse
Procedural Sprites
Keep States
Composi ng

57. The future is... meow
APIWebVR
Three.js
Unity
Unreal Engine
A‐Frame

58. Go play!

59. References & Credits
Huge thanks to (@sivoh)Alex Cruikshank
Don Norman ‐ The Design of Everyday Things
Google Web Anima on Docs
Box2dWeb

60. Courtney Hemphill
@chemphill
courtney@carbonfive.com

61. Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
animation-algorithms-javascript