aboutsummaryrefslogtreecommitdiffstats
path: root/src/_easing.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_easing.scss')
-rw-r--r--src/_easing.scss172
1 files changed, 86 insertions, 86 deletions
diff --git a/src/_easing.scss b/src/_easing.scss
index a39f317..8b06632 100644
--- a/src/_easing.scss
+++ b/src/_easing.scss
@@ -14,32 +14,32 @@
14/// 14///
15/// @access private 15/// @access private
16/// 16///
17$iro-cubic-bezier-sample-pool: (); 17$cubic-bezier-sample-pool: ();
18 18
19/// 19///
20/// Sample pool size for cubic bezier calculations. 20/// Sample pool size for cubic bezier calculations.
21/// 21///
22$iro-cubic-bezier-sample-pool-size: 10 !default; 22$cubic-bezier-sample-pool-size: 10 !default;
23 23
24/// 24///
25/// Minimum slope required to use the Newton-Raphson method for cubic bezier calculations. 25/// Minimum slope required to use the Newton-Raphson method for cubic bezier calculations.
26/// 26///
27$iro-cubic-bezier-newton-min-slope: 0.001 !default; 27$cubic-bezier-newton-min-slope: 0.001 !default;
28 28
29/// 29///
30/// Number of iterations of the Newton-Raphson method. 30/// Number of iterations of the Newton-Raphson method.
31/// 31///
32$iro-cubic-bezier-newton-iters: 4 !default; 32$cubic-bezier-newton-iters: 4 !default;
33 33
34/// 34///
35/// Precision of the subdivision method for cubic bezier calculations. 35/// Precision of the subdivision method for cubic bezier calculations.
36/// 36///
37$iro-cubic-bezier-subdiv-precision: 0.0000001 !default; 37$cubic-bezier-subdiv-precision: 0.0000001 !default;
38 38
39/// 39///
40/// Maximum iterations of the subdivision method for cubic bezier calculations. 40/// Maximum iterations of the subdivision method for cubic bezier calculations.
41/// 41///
42$iro-cubic-bezier-subdiv-max-iters: 10 !default; 42$cubic-bezier-subdiv-max-iters: 10 !default;
43 43
44/// 44///
45/// A cubic bezier function identical to the CSS cubic-bezier function. 45/// A cubic bezier function identical to the CSS cubic-bezier function.
@@ -52,7 +52,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
52/// 52///
53/// @return {number} 53/// @return {number}
54/// 54///
55@function iro-cubic-bezier($x1, $y1, $x2, $y2, $x) { 55@function cubic-bezier($x1, $y1, $x2, $y2, $x) {
56 // 56 //
57 // Cover simple cases 57 // Cover simple cases
58 // 58 //
@@ -73,41 +73,41 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
73 73
74 $sample-pool-key: $x1 + '_' + $x2; 74 $sample-pool-key: $x1 + '_' + $x2;
75 75
76 @if not map-has-key($iro-cubic-bezier-sample-pool, $sample-pool-key) { 76 @if not map-has-key($cubic-bezier-sample-pool, $sample-pool-key) {
77 $samples: (); 77 $samples: ();
78 78
79 @for $i from 0 through $iro-cubic-bezier-sample-pool-size { 79 @for $i from 0 through $cubic-bezier-sample-pool-size {
80 $samples: append($samples, iro-cubic-bezier-func($x1, $x2, math.div($i, $iro-cubic-bezier-sample-pool-size))); 80 $samples: append($samples, cubic-bezier-func($x1, $x2, math.div($i, $cubic-bezier-sample-pool-size)));
81 } 81 }
82 82
83 $iro-cubic-bezier-sample-pool: map-merge($iro-cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global; 83 $cubic-bezier-sample-pool: map-merge($cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global;
84 } 84 }
85 85
86 // 86 //
87 // Calculate cubic bezier 87 // Calculate cubic bezier
88 // 88 //
89 89
90 @return iro-cubic-bezier-func($y1, $y2, iro-cubic-bezier-t-for-x($x1, $x2, $x)); 90 @return cubic-bezier-func($y1, $y2, cubic-bezier-t-for-x($x1, $x2, $x));
91} 91}
92 92
93/// 93///
94/// @access private 94/// @access private
95/// 95///
96@function iro-cubic-bezier-func-a($p1, $p2) { 96@function cubic-bezier-func-a($p1, $p2) {
97 @return 1 - 3 * $p2 + 3 * $p1; 97 @return 1 - 3 * $p2 + 3 * $p1;
98} 98}
99 99
100/// 100///
101/// @access private 101/// @access private
102/// 102///
103@function iro-cubic-bezier-func-b($p1, $p2) { 103@function cubic-bezier-func-b($p1, $p2) {
104 @return 3 * $p2 - 6 * $p1; 104 @return 3 * $p2 - 6 * $p1;
105} 105}
106 106
107/// 107///
108/// @access private 108/// @access private
109/// 109///
110@function iro-cubic-bezier-func-c($p1) { 110@function cubic-bezier-func-c($p1) {
111 @return 3 * $p1; 111 @return 3 * $p1;
112} 112}
113 113
@@ -116,8 +116,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
116/// 116///
117/// @access private 117/// @access private
118/// 118///
119@function iro-cubic-bezier-func($p1, $p2, $t) { 119@function cubic-bezier-func($p1, $p2, $t) {
120 @return ((iro-cubic-bezier-func-a($p1, $p2) * $t + iro-cubic-bezier-func-b($p1, $p2)) * $t + iro-cubic-bezier-func-c($p1)) * $t; 120 @return ((cubic-bezier-func-a($p1, $p2) * $t + cubic-bezier-func-b($p1, $p2)) * $t + cubic-bezier-func-c($p1)) * $t;
121} 121}
122 122
123/// 123///
@@ -125,8 +125,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
125/// 125///
126/// @access private 126/// @access private
127/// 127///
128@function iro-cubic-bezier-func-slope($p1, $p2, $t) { 128@function cubic-bezier-func-slope($p1, $p2, $t) {
129 @return 3 * iro-cubic-bezier-func-a($p1, $p2) * $t * $t + 2 * iro-cubic-bezier-func-b($p1, $p2) * $t + iro-cubic-bezier-func-c($p1); 129 @return 3 * cubic-bezier-func-a($p1, $p2) * $t * $t + 2 * cubic-bezier-func-b($p1, $p2) * $t + cubic-bezier-func-c($p1);
130} 130}
131 131
132/// 132///
@@ -134,15 +134,15 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
134/// 134///
135/// @access private 135/// @access private
136/// 136///
137@function iro-cubic-bezier-newton-raphson($x1, $x2, $x, $t) { 137@function cubic-bezier-newton-raphson($x1, $x2, $x, $t) {
138 @for $i from 1 through $iro-cubic-bezier-newton-iters { 138 @for $i from 1 through $cubic-bezier-newton-iters {
139 $cur-slope: iro-cubic-bezier-func-slope($x1, $x2, $t); 139 $cur-slope: cubic-bezier-func-slope($x1, $x2, $t);
140 140
141 @if $cur-slope == 0 { 141 @if $cur-slope == 0 {
142 @return $t; 142 @return $t;
143 } 143 }
144 144
145 $cur-x: iro-cubic-bezier-func($x1, $x2, $t) - $x; 145 $cur-x: cubic-bezier-func($x1, $x2, $t) - $x;
146 $t: $t - math.div($cur-x, $cur-slope); 146 $t: $t - math.div($cur-x, $cur-slope);
147 } 147 }
148 148
@@ -154,14 +154,14 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
154/// 154///
155/// @access private 155/// @access private
156/// 156///
157@function iro-cubic-bezier-binary-subdivide($x1, $x2, $x, $a, $b) { 157@function cubic-bezier-binary-subdivide($x1, $x2, $x, $a, $b) {
158 $cur-x: 0; 158 $cur-x: 0;
159 $cur-t: 0; 159 $cur-t: 0;
160 $i: 0; 160 $i: 0;
161 161
162 @while $i < $iro-cubic-bezier-subdiv-max-iters { 162 @while $i < $cubic-bezier-subdiv-max-iters {
163 $cur-t: $a + ($b - $a) / 2; 163 $cur-t: $a + ($b - $a) / 2;
164 $cur-x: iro-cubic-bezier-func($x1, $x2, $cur-t) - $x; 164 $cur-x: cubic-bezier-func($x1, $x2, $cur-t) - $x;
165 165
166 @if $cur-x > 0 { 166 @if $cur-x > 0 {
167 $b: $cur-t; 167 $b: $cur-t;
@@ -169,7 +169,7 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
169 $a: $cur-t; 169 $a: $cur-t;
170 } 170 }
171 171
172 @if abs($cur-x) < $iro-cubic-bezier-subdiv-precision { 172 @if abs($cur-x) < $cubic-bezier-subdiv-precision {
173 @return $cur-t; 173 @return $cur-t;
174 } 174 }
175 } 175 }
@@ -182,30 +182,30 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
182/// 182///
183/// @access private 183/// @access private
184/// 184///
185@function iro-cubic-bezier-t-for-x($x1, $x2, $x) { 185@function cubic-bezier-t-for-x($x1, $x2, $x) {
186 $sample-pool-key: $x1 + '_' + $x2; 186 $sample-pool-key: $x1 + '_' + $x2;
187 $samples: map-get($iro-cubic-bezier-sample-pool, $sample-pool-key); 187 $samples: map-get($cubic-bezier-sample-pool, $sample-pool-key);
188 188
189 $intv-start: 0; 189 $intv-start: 0;
190 $cur-sample: 1; 190 $cur-sample: 1;
191 $last-sample: $iro-cubic-bezier-sample-pool-size; 191 $last-sample: $cubic-bezier-sample-pool-size;
192 192
193 @while ($cur-sample != $last-sample) and (nth($samples, $cur-sample) <= $x) { 193 @while ($cur-sample != $last-sample) and (nth($samples, $cur-sample) <= $x) {
194 $intv-start: $intv-start + math.div(1, $iro-cubic-bezier-sample-pool-size); 194 $intv-start: $intv-start + math.div(1, $cubic-bezier-sample-pool-size);
195 $cur-sample: $cur-sample + 1; 195 $cur-sample: $cur-sample + 1;
196 } 196 }
197 $cur-sample: $cur-sample - 1; 197 $cur-sample: $cur-sample - 1;
198 198
199 $dist: math.div($x - nth($samples, $cur-sample), nth($samples, $cur-sample + 1) - nth($samples, $cur-sample)); 199 $dist: math.div($x - nth($samples, $cur-sample), nth($samples, $cur-sample + 1) - nth($samples, $cur-sample));
200 $guess-t: $intv-start + math.div($dist, $iro-cubic-bezier-sample-pool-size); 200 $guess-t: $intv-start + math.div($dist, $cubic-bezier-sample-pool-size);
201 201
202 $init-slope: iro-cubic-bezier-func-slope($x1, $x2, $guess-t); 202 $init-slope: cubic-bezier-func-slope($x1, $x2, $guess-t);
203 @if $init-slope >= $iro-cubic-bezier-newton-min-slope { 203 @if $init-slope >= $cubic-bezier-newton-min-slope {
204 @return iro-cubic-bezier-newton-raphson($x1, $x2, $x, $guess-t); 204 @return cubic-bezier-newton-raphson($x1, $x2, $x, $guess-t);
205 } @else if $init-slope == 0 { 205 } @else if $init-slope == 0 {
206 @return $guess-t; 206 @return $guess-t;
207 } @else { 207 } @else {
208 @return iro-cubic-bezier-binary-subdivide($x1, $x2, $x, $intv-start, $intv-start + 1 / $iro-cubic-bezier-sample-pool-size); 208 @return cubic-bezier-binary-subdivide($x1, $x2, $x, $intv-start, $intv-start + 1 / $cubic-bezier-sample-pool-size);
209 } 209 }
210} 210}
211 211
@@ -216,8 +216,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
216/// 216///
217/// @return {number} 217/// @return {number}
218/// 218///
219@function iro-ease($x) { 219@function ease($x) {
220 @return iro-cubic-bezier(0.25, 0.1, 0.25, 1, $x); 220 @return cubic-bezier(0.25, 0.1, 0.25, 1, $x);
221} 221}
222 222
223/// 223///
@@ -227,8 +227,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
227/// 227///
228/// @return {number} 228/// @return {number}
229/// 229///
230@function iro-ease-in($x) { 230@function ease-in($x) {
231 @return iro-cubic-bezier(0.42, 0, 1, 1, $x); 231 @return cubic-bezier(0.42, 0, 1, 1, $x);
232} 232}
233 233
234/// 234///
@@ -238,8 +238,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
238/// 238///
239/// @return {number} 239/// @return {number}
240/// 240///
241@function iro-ease-out($x) { 241@function ease-out($x) {
242 @return iro-cubic-bezier(0, 0, 0.58, 1, $x); 242 @return cubic-bezier(0, 0, 0.58, 1, $x);
243} 243}
244 244
245/// 245///
@@ -249,8 +249,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
249/// 249///
250/// @return {number} 250/// @return {number}
251/// 251///
252@function iro-ease-in-out($x) { 252@function ease-in-out($x) {
253 @return iro-cubic-bezier(0.42, 0, 0.58, 1, $x); 253 @return cubic-bezier(0.42, 0, 0.58, 1, $x);
254} 254}
255 255
256/// 256///
@@ -260,8 +260,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
260/// 260///
261/// @return {number} 261/// @return {number}
262/// 262///
263@function iro-ease-in-sine($x) { 263@function ease-in-sine($x) {
264 @return iro-cubic-bezier(0.47, 0, 0.745, 0.715, $x); 264 @return cubic-bezier(0.47, 0, 0.745, 0.715, $x);
265} 265}
266 266
267/// 267///
@@ -271,8 +271,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
271/// 271///
272/// @return {number} 272/// @return {number}
273/// 273///
274@function iro-ease-out-sine($x) { 274@function ease-out-sine($x) {
275 @return iro-cubic-bezier(0.39, 0.575, 0.565, 1, $x); 275 @return cubic-bezier(0.39, 0.575, 0.565, 1, $x);
276} 276}
277 277
278/// 278///
@@ -282,8 +282,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
282/// 282///
283/// @return {number} 283/// @return {number}
284/// 284///
285@function iro-ease-in-out-sine($x) { 285@function ease-in-out-sine($x) {
286 @return iro-cubic-bezier(0.445, 0.05, 0.55, 0.95, $x); 286 @return cubic-bezier(0.445, 0.05, 0.55, 0.95, $x);
287} 287}
288 288
289/// 289///
@@ -293,8 +293,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
293/// 293///
294/// @return {number} 294/// @return {number}
295/// 295///
296@function iro-ease-in-quad($x) { 296@function ease-in-quad($x) {
297 @return iro-cubic-bezier(0.55, 0.085, 0.68, 0.53, $x); 297 @return cubic-bezier(0.55, 0.085, 0.68, 0.53, $x);
298} 298}
299 299
300/// 300///
@@ -304,8 +304,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
304/// 304///
305/// @return {number} 305/// @return {number}
306/// 306///
307@function iro-ease-out-quad($x) { 307@function ease-out-quad($x) {
308 @return iro-cubic-bezier(0.25, 0.46, 0.45, 0.94, $x); 308 @return cubic-bezier(0.25, 0.46, 0.45, 0.94, $x);
309} 309}
310 310
311/// 311///
@@ -315,8 +315,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
315/// 315///
316/// @return {number} 316/// @return {number}
317/// 317///
318@function iro-ease-in-out-quad($x) { 318@function ease-in-out-quad($x) {
319 @return iro-cubic-bezier(0.455, 0.03, 0.515, 0.955, $x); 319 @return cubic-bezier(0.455, 0.03, 0.515, 0.955, $x);
320} 320}
321 321
322/// 322///
@@ -326,8 +326,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
326/// 326///
327/// @return {number} 327/// @return {number}
328/// 328///
329@function iro-ease-in-cubic($x) { 329@function ease-in-cubic($x) {
330 @return iro-cubic-bezier(0.55, 0.055, 0.675, 0.19, $x); 330 @return cubic-bezier(0.55, 0.055, 0.675, 0.19, $x);
331} 331}
332 332
333/// 333///
@@ -337,8 +337,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
337/// 337///
338/// @return {number} 338/// @return {number}
339/// 339///
340@function iro-ease-out-cubic($x) { 340@function ease-out-cubic($x) {
341 @return iro-cubic-bezier(0.215, 0.61, 0.355, 1, $x); 341 @return cubic-bezier(0.215, 0.61, 0.355, 1, $x);
342} 342}
343 343
344/// 344///
@@ -348,8 +348,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
348/// 348///
349/// @return {number} 349/// @return {number}
350/// 350///
351@function iro-ease-in-out-cubic($x) { 351@function ease-in-out-cubic($x) {
352 @return iro-cubic-bezier(0.645, 0.045, 0.355, 1, $x); 352 @return cubic-bezier(0.645, 0.045, 0.355, 1, $x);
353} 353}
354 354
355/// 355///
@@ -359,8 +359,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
359/// 359///
360/// @return {number} 360/// @return {number}
361/// 361///
362@function iro-ease-in-quart($x) { 362@function ease-in-quart($x) {
363 @return iro-cubic-bezier(0.895, 0.03, 0.685, 0.22, $x); 363 @return cubic-bezier(0.895, 0.03, 0.685, 0.22, $x);
364} 364}
365 365
366/// 366///
@@ -370,8 +370,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
370/// 370///
371/// @return {number} 371/// @return {number}
372/// 372///
373@function iro-ease-out-quart($x) { 373@function ease-out-quart($x) {
374 @return iro-cubic-bezier(0.165, 0.84, 0.44, 1, $x); 374 @return cubic-bezier(0.165, 0.84, 0.44, 1, $x);
375} 375}
376 376
377/// 377///
@@ -381,8 +381,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
381/// 381///
382/// @return {number} 382/// @return {number}
383/// 383///
384@function iro-ease-in-out-quart($x) { 384@function ease-in-out-quart($x) {
385 @return iro-cubic-bezier(0.77, 0, 0.175, 1, $x); 385 @return cubic-bezier(0.77, 0, 0.175, 1, $x);
386} 386}
387 387
388/// 388///
@@ -392,8 +392,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
392/// 392///
393/// @return {number} 393/// @return {number}
394/// 394///
395@function iro-ease-in-quint($x) { 395@function ease-in-quint($x) {
396 @return iro-cubic-bezier(0.755, 0.05, 0.855, 0.06, $x); 396 @return cubic-bezier(0.755, 0.05, 0.855, 0.06, $x);
397} 397}
398 398
399/// 399///
@@ -403,8 +403,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
403/// 403///
404/// @return {number} 404/// @return {number}
405/// 405///
406@function iro-ease-out-quint($x) { 406@function ease-out-quint($x) {
407 @return iro-cubic-bezier(0.23, 1, 0.32, 1, $x); 407 @return cubic-bezier(0.23, 1, 0.32, 1, $x);
408} 408}
409 409
410/// 410///
@@ -414,8 +414,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
414/// 414///
415/// @return {number} 415/// @return {number}
416/// 416///
417@function iro-ease-in-out-quint($x) { 417@function ease-in-out-quint($x) {
418 @return iro-cubic-bezier(0.86, 0, 0.07, 1, $x); 418 @return cubic-bezier(0.86, 0, 0.07, 1, $x);
419} 419}
420 420
421/// 421///
@@ -425,8 +425,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
425/// 425///
426/// @return {number} 426/// @return {number}
427/// 427///
428@function iro-ease-in-expo($x) { 428@function ease-in-expo($x) {
429 @return iro-cubic-bezier(0.95, 0.05, 0.795, 0.035, $x); 429 @return cubic-bezier(0.95, 0.05, 0.795, 0.035, $x);
430} 430}
431 431
432/// 432///
@@ -436,8 +436,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
436/// 436///
437/// @return {number} 437/// @return {number}
438/// 438///
439@function iro-ease-out-expo($x) { 439@function ease-out-expo($x) {
440 @return iro-cubic-bezier(0.19, 1, 0.22, 1, $x); 440 @return cubic-bezier(0.19, 1, 0.22, 1, $x);
441} 441}
442 442
443/// 443///
@@ -447,8 +447,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
447/// 447///
448/// @return {number} 448/// @return {number}
449/// 449///
450@function iro-ease-in-out-expo($x) { 450@function ease-in-out-expo($x) {
451 @return iro-cubic-bezier(1, 0, 0, 1, $x); 451 @return cubic-bezier(1, 0, 0, 1, $x);
452} 452}
453 453
454/// 454///
@@ -458,8 +458,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
458/// 458///
459/// @return {number} 459/// @return {number}
460/// 460///
461@function iro-ease-in-circ($x) { 461@function ease-in-circ($x) {
462 @return iro-cubic-bezier(0.6, 0.04, 0.98, 0.335, $x); 462 @return cubic-bezier(0.6, 0.04, 0.98, 0.335, $x);
463} 463}
464 464
465/// 465///
@@ -469,8 +469,8 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
469/// 469///
470/// @return {number} 470/// @return {number}
471/// 471///
472@function iro-ease-out-circ($x) { 472@function ease-out-circ($x) {
473 @return iro-cubic-bezier(0.075, 0.82, 0.165, 1, $x); 473 @return cubic-bezier(0.075, 0.82, 0.165, 1, $x);
474} 474}
475 475
476/// 476///
@@ -480,6 +480,6 @@ $iro-cubic-bezier-subdiv-max-iters: 10 !default;
480/// 480///
481/// @return {number} 481/// @return {number}
482/// 482///
483@function iro-ease-in-out-circ($x) { 483@function ease-in-out-circ($x) {
484 @return iro-cubic-bezier(0.785, 0.135, 0.15, 0.86, $x); 484 @return cubic-bezier(0.785, 0.135, 0.15, 0.86, $x);
485} 485}