Code examples are in this CodePen collection: https://codepen.io/collection/nrjyRb/ The lowdown on what's going on under the hood in all your favourite types of easing. Covering power easing, the Penner easing equations, cubic-beziers, lerping and springs, As seen at CSS Dev Conf 2017.

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

2. Let’s geek out about easing!!

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

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

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

11. Penner Easing Equations

12. 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

18. Quadratic easing: t^2
Cubic easing: t^3
Quartic easing: t^4
Quintic easing: t^5
Sinusoidal easing: sin(t)
Exponential easing: 2^t
Circular easing: sqrt(1-t^2)
Penner Easing Equations
http://robertpenner.com/scripts/easing_equations.txt

23. Cubic Beziers

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

27. 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

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

29. Lerping

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

33. Springs

34. MakeASpringHappen(200, 10, 25)

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

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

44. Designing Interface Animation
designinginterfaceanimation.com

45. Thank you!
Newsletter: uianimationewsletter.com
Let’s chat on twitter: @vlh