)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

### Raphaël Easing Equations How To

1. `const { pow, PI } = Math;`
2. ` `
3. `// mostly unedited code from Raphaël`
4. `var ef = {`
5. `  linear: function(n) {`
6. `    return n;`
7. `  },`
8. `  '<': function(n) {`
9. `    return pow(n, 1.7);`
10. `  },`
11. `  '>': function(n) {`
12. `    return pow(n, 0.48);`
13. `  },`
14. `  '<>': function(n) {`
15. `    var q = 0.48 - n / 1.04,`
16. `      Q = Math.sqrt(0.1734 + q * q),`
17. `      x = Q - q,`
18. `      X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),`
19. `      y = -Q - q,`
20. `      Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),`
21. `      t = X + Y + 0.5;`
22. `    return (1 - t) * 3 * t * t + t * t * t;`
23. `  },`
24. `  backIn: function(n) {`
25. `    var s = 1.70158;`
26. `    return n * n * ((s + 1) * n - s);`
27. `  },`
28. `  backOut: function(n) {`
29. `    n = n - 1;`
30. `    var s = 1.70158;`
31. `    return n * n * ((s + 1) * n + s) + 1;`
32. `  },`
33. `  elastic: function(n) {`
34. `    if (n == !!n) {`
35. `      return n;`
36. `    }`
37. `    return pow(2, -10 * n) * Math.sin(((n - 0.075) * (2 * PI)) / 0.3) + 1;`
38. `  },`
39. `  bounce: function(n) {`
40. `    var s = 7.5625,`
41. `      p = 2.75,`
42. `      l;`
43. `    if (n < 1 / p) {`
44. `      l = s * n * n;`
45. `    } else {`
46. `      if (n < 2 / p) {`
47. `        n -= 1.5 / p;`
48. `        l = s * n * n + 0.75;`
49. `      } else {`
50. `        if (n < 2.5 / p) {`
51. `          n -= 2.25 / p;`
52. `          l = s * n * n + 0.9375;`
53. `        } else {`
54. `          n -= 2.625 / p;`
55. `          l = s * n * n + 0.984375;`
56. `        }`
57. `      }`
58. `    }`
59. `    return l;`
60. `  }`
61. `};`
62. `ef.easeIn = ef['ease-in'] = ef['<'];`
63. `ef.easeOut = ef['ease-out'] = ef['>'];`
64. `ef.easeInOut = ef['ease-in-out'] = ef['<>'];`
65. `ef['back-in'] = ef.backIn;`
66. `ef['back-out'] = ef.backOut;`
67. ` `
68. `// create a dot`
69. `function dot(x, y, radius, color) {`
70. `  const el = document.createElement('div');`
71. `  const size = `\${radius * 2}px`;`
72. `  Object.assign(el.style, {`
73. `    position: 'absolute',`
74. `    left: `\${x}px`,`
75. `    top: `\${y}px`,`
76. `    width: size,`
77. `    height: size,`
78. `    transform: `translate(\${-radius}px, \${-radius}px)`,`
79. `    borderRadius: '50%',`
80. `    background: color`
81. `  });`
82. `  el.classList.add('dot');`
83. `  document.body.appendChild(el);`
84. `  return el;`
85. `}`
86. ` `
87. `const elA = dot(0, 40, 30, 'red');`
88. `const elB = dot(0, 110, 30, 'blue');`
89. `const elC = dot(0, 160, 20, 'green');`
90. ` `
91. `// how to use the easing equations:`
92. `let t = 0;`
93. ` `
94. `let start = Date.now();`
95. `let time = 0;`
96. `let duration = 2; // 2 seconds`
97. `function loop() {`
98. `  // frame based`
99. `  elA.style.left = `\${ef.elastic(t) * 50}%`;`
100. `  t += 0.005;`
101. ` `
102. `  // time based`
103. `  if (time <= duration) {`
104. `    time = (Date.now() - start) / 1000;`
105. `    const param = time / duration;`
106. `    elB.style.left = `\${ef.elastic(param) * 50}%`;`
107. ` `
108. `    // green bounce example`
109. `    elC.style.left = `\${ef.bounce(param) * 50}%`;`
110. `  }`
111. ` `
112. `  requestAnimationFrame(loop);`
113. `}`
114. `loop();`

I realized it might not be obvious how to use Raphaël’s easing equations. So I speed coded this example.