The lowdown on easing graphs, Penner easing, cubic-beziers and springs for animation.

1. THE INS
AND OUTS
OF EASING
Val Head @vlh

2. THE INS
AND OUTS
OF EASING
Val Head @vlh

3. Let’s get something moving

7. PROGRESS
VALUE
Linear easing
A constant rate of change with
no acceleration or deceleration.

8. Linear easing
A constant rate of change with
no acceleration or deceleration.
PROGRESS
VALUE

10. Ease in quad
Accelerating at the start,
speeding up as we go.
TIME
PROERTYVALUE

12. Penner Easing Equations

13. easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
Penner Easing Equations

14. easeInQuad
TIME
PROERTYVALUE

15. easeOutQuad
TIME
PROERTYVALUE

16. easeInOutQuad
TIME
PROERTYVALUE

23. Cubic Beziers

24. Source: Cubic-Bezier Curves Under the Hood - vimeo.com/106757336

25. Source: Cubic-Bezier Curves Under the Hood - vimeo.com/106757336

29. Cubic-bezier & Penner Eqs
Great for pre-defined UI animations
Great for animations that demonstrate actions/functionality
Great for making groups of animations behave similarly

30. Cubic-bezier & Penner Eqs
Reusable!
Customizable!
but…
Need a defined duration
Need a defined destination

31. Lerping

32. Lerp (Linear Interpolation)
No set duration
Calculate how far is left to go each frame
Then move a fraction of that each frame

35. Springs

36. MakeASpringHappen(200, 10, 25)

37. Damped spring by Oleg Alexandrov
(https://commons.wikimedia.org/wiki/File:Simple_harmonic_oscillator.gif)

38. F = -k*xspring
Hooke’s Law

43. Join the crew: uianimationewsletter.com
Let’s chat on twitter: @vlh