Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Ins and Outs of Easing

Code examples are in this CodePen collection:
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.

  • Login to see the comments

The Ins and Outs of Easing

  1. 1. THE INS AND OUTS OF EASING Val Head @vlh
  2. 2. Let’s geek out about easing!!
  3. 3. PROGRESS VALUE Linear easing A constant rate of change with no acceleration or deceleration.
  4. 4. Linear easing A constant rate of change with no acceleration or deceleration. PROGRESS VALUE
  5. 5. Ease in quad Accelerating at the start, 
 speeding up as we go. TIME PROERTYVALUE
  6. 6. Penner Easing Equations
  7. 7. 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
  8. 8. easeInQuad TIME PROERTYVALUE
  9. 9. easeOutQuad TIME PROERTYVALUE
  10. 10. easeInOutQuad TIME PROERTYVALUE
  11. 11. 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
  12. 12. Cubic Beziers
  13. 13. Source: Cubic-Bezier Curves Under the Hood -
  14. 14. 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
  15. 15. Cubic-bezier & Penner Eqs Reusable! Customizable! but… Need a defined duration Need a defined destination
  16. 16. Lerping
  17. 17. Lerp (Linear Interpolation) No set duration Calculate how far is left to go each frame Then move a fraction of that each frame
  18. 18. Springs
  19. 19. MakeASpringHappen(200, 10, 25)
  20. 20. Damped spring by Oleg Alexandrov 
  21. 21. F = -k*xspring Hooke’s Law
  22. 22. Designing Interface Animation
  23. 23. Thank you! Newsletter: Let’s chat on twitter: @vlh