aboutsummaryrefslogtreecommitdiffstats
path: root/src/_easing.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_easing.scss')
-rw-r--r--src/_easing.scss206
1 files changed, 103 insertions, 103 deletions
diff --git a/src/_easing.scss b/src/_easing.scss
index 6d66ea7..939eda2 100644
--- a/src/_easing.scss
+++ b/src/_easing.scss
@@ -55,62 +55,62 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
55/// @return {number} 55/// @return {number}
56/// 56///
57@function cubic-bezier($x1, $y1, $x2, $y2, $x) { 57@function cubic-bezier($x1, $y1, $x2, $y2, $x) {
58 // 58 //
59 // Cover simple cases 59 // Cover simple cases
60 // 60 //
61 61
62 @if ($x1 == $y1) and ($x2 == $y2) { 62 @if ($x1 == $y1) and ($x2 == $y2) {
63 @return $x; 63 @return $x;
64 } 64 }
65 @if $x == 0 { 65 @if $x == 0 {
66 @return 0; 66 @return 0;
67 } 67 }
68 @if $x == 1 { 68 @if $x == 1 {
69 @return 1; 69 @return 1;
70 } 70 }
71 71
72 // 72 //
73 // Generate samples 73 // Generate samples
74 // 74 //
75 75
76 $sample-pool-key: $x1 + '_' + $x2; 76 $sample-pool-key: $x1 + '_' + $x2;
77 77
78 @if not map.has-key($cubic-bezier-sample-pool, $sample-pool-key) { 78 @if not map.has-key($cubic-bezier-sample-pool, $sample-pool-key) {
79 $samples: (); 79 $samples: ();
80 80
81 @for $i from 0 through $cubic-bezier-sample-pool-size { 81 @for $i from 0 through $cubic-bezier-sample-pool-size {
82 $samples: list.append($samples, cubic-bezier-func($x1, $x2, math.div($i, $cubic-bezier-sample-pool-size))); 82 $samples: list.append($samples, cubic-bezier-func($x1, $x2, math.div($i, $cubic-bezier-sample-pool-size)));
83 } 83 }
84 84
85 $cubic-bezier-sample-pool: map.merge($cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global; 85 $cubic-bezier-sample-pool: map.merge($cubic-bezier-sample-pool, ($sample-pool-key: $samples)) !global;
86 } 86 }
87 87
88 // 88 //
89 // Calculate cubic bezier 89 // Calculate cubic bezier
90 // 90 //
91 91
92 @return cubic-bezier-func($y1, $y2, cubic-bezier-t-for-x($x1, $x2, $x)); 92 @return cubic-bezier-func($y1, $y2, cubic-bezier-t-for-x($x1, $x2, $x));
93} 93}
94 94
95/// 95///
96/// @access private 96/// @access private
97/// 97///
98@function cubic-bezier-func-a($p1, $p2) { 98@function cubic-bezier-func-a($p1, $p2) {
99 @return 1 - 3 * $p2 + 3 * $p1; 99 @return 1 - 3 * $p2 + 3 * $p1;
100} 100}
101 101
102/// 102///
103/// @access private 103/// @access private
104/// 104///
105@function cubic-bezier-func-b($p1, $p2) { 105@function cubic-bezier-func-b($p1, $p2) {
106 @return 3 * $p2 - 6 * $p1; 106 @return 3 * $p2 - 6 * $p1;
107} 107}
108 108
109/// 109///
110/// @access private 110/// @access private
111/// 111///
112@function cubic-bezier-func-c($p1) { 112@function cubic-bezier-func-c($p1) {
113 @return 3 * $p1; 113 @return 3 * $p1;
114} 114}
115 115
116/// 116///
@@ -119,7 +119,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
119/// @access private 119/// @access private
120/// 120///
121@function cubic-bezier-func($p1, $p2, $t) { 121@function cubic-bezier-func($p1, $p2, $t) {
122 @return ((cubic-bezier-func-a($p1, $p2) * $t + cubic-bezier-func-b($p1, $p2)) * $t + cubic-bezier-func-c($p1)) * $t; 122 @return ((cubic-bezier-func-a($p1, $p2) * $t + cubic-bezier-func-b($p1, $p2)) * $t + cubic-bezier-func-c($p1)) * $t;
123} 123}
124 124
125/// 125///
@@ -128,7 +128,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
128/// @access private 128/// @access private
129/// 129///
130@function cubic-bezier-func-slope($p1, $p2, $t) { 130@function cubic-bezier-func-slope($p1, $p2, $t) {
131 @return 3 * cubic-bezier-func-a($p1, $p2) * $t * $t + 2 * cubic-bezier-func-b($p1, $p2) * $t + cubic-bezier-func-c($p1); 131 @return 3 * cubic-bezier-func-a($p1, $p2) * $t * $t + 2 * cubic-bezier-func-b($p1, $p2) * $t + cubic-bezier-func-c($p1);
132} 132}
133 133
134/// 134///
@@ -137,18 +137,18 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
137/// @access private 137/// @access private
138/// 138///
139@function cubic-bezier-newton-raphson($x1, $x2, $x, $t) { 139@function cubic-bezier-newton-raphson($x1, $x2, $x, $t) {
140 @for $i from 1 through $cubic-bezier-newton-iters { 140 @for $i from 1 through $cubic-bezier-newton-iters {
141 $cur-slope: cubic-bezier-func-slope($x1, $x2, $t); 141 $cur-slope: cubic-bezier-func-slope($x1, $x2, $t);
142 142
143 @if $cur-slope == 0 { 143 @if $cur-slope == 0 {
144 @return $t; 144 @return $t;
145 } 145 }
146 146
147 $cur-x: cubic-bezier-func($x1, $x2, $t) - $x; 147 $cur-x: cubic-bezier-func($x1, $x2, $t) - $x;
148 $t: $t - math.div($cur-x, $cur-slope); 148 $t: $t - math.div($cur-x, $cur-slope);
149 } 149 }
150 150
151 @return $t; 151 @return $t;
152} 152}
153 153
154/// 154///
@@ -157,26 +157,26 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
157/// @access private 157/// @access private
158/// 158///
159@function cubic-bezier-binary-subdivide($x1, $x2, $x, $a, $b) { 159@function cubic-bezier-binary-subdivide($x1, $x2, $x, $a, $b) {
160 $cur-x: 0; 160 $cur-x: 0;
161 $cur-t: 0; 161 $cur-t: 0;
162 $i: 0; 162 $i: 0;
163 163
164 @while $i < $cubic-bezier-subdiv-max-iters { 164 @while $i < $cubic-bezier-subdiv-max-iters {
165 $cur-t: $a + ($b - $a) / 2; 165 $cur-t: $a + ($b - $a) / 2;
166 $cur-x: cubic-bezier-func($x1, $x2, $cur-t) - $x; 166 $cur-x: cubic-bezier-func($x1, $x2, $cur-t) - $x;
167 167
168 @if $cur-x > 0 { 168 @if $cur-x > 0 {
169 $b: $cur-t; 169 $b: $cur-t;
170 } @else { 170 } @else {
171 $a: $cur-t; 171 $a: $cur-t;
172 } 172 }
173 173
174 @if math.abs($cur-x) < $cubic-bezier-subdiv-precision { 174 @if math.abs($cur-x) < $cubic-bezier-subdiv-precision {
175 @return $cur-t; 175 @return $cur-t;
176 } 176 }
177 } 177 }
178 178
179 @return $cur-t; 179 @return $cur-t;
180} 180}
181 181
182/// 182///
@@ -185,30 +185,30 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
185/// @access private 185/// @access private
186/// 186///
187@function cubic-bezier-t-for-x($x1, $x2, $x) { 187@function cubic-bezier-t-for-x($x1, $x2, $x) {
188 $sample-pool-key: $x1 + '_' + $x2; 188 $sample-pool-key: $x1 + '_' + $x2;
189 $samples: map.get($cubic-bezier-sample-pool, $sample-pool-key); 189 $samples: map.get($cubic-bezier-sample-pool, $sample-pool-key);
190 190
191 $intv-start: 0; 191 $intv-start: 0;
192 $cur-sample: 1; 192 $cur-sample: 1;
193 $last-sample: $cubic-bezier-sample-pool-size; 193 $last-sample: $cubic-bezier-sample-pool-size;
194 194
195 @while ($cur-sample != $last-sample) and (list.nth($samples, $cur-sample) <= $x) { 195 @while ($cur-sample != $last-sample) and (list.nth($samples, $cur-sample) <= $x) {
196 $intv-start: $intv-start + math.div(1, $cubic-bezier-sample-pool-size); 196 $intv-start: $intv-start + math.div(1, $cubic-bezier-sample-pool-size);
197 $cur-sample: $cur-sample + 1; 197 $cur-sample: $cur-sample + 1;
198 } 198 }
199 $cur-sample: $cur-sample - 1; 199 $cur-sample: $cur-sample - 1;
200 200
201 $dist: math.div($x - list.nth($samples, $cur-sample), list.nth($samples, $cur-sample + 1) - list.nth($samples, $cur-sample)); 201 $dist: math.div($x - list.nth($samples, $cur-sample), list.nth($samples, $cur-sample + 1) - list.nth($samples, $cur-sample));
202 $guess-t: $intv-start + math.div($dist, $cubic-bezier-sample-pool-size); 202 $guess-t: $intv-start + math.div($dist, $cubic-bezier-sample-pool-size);
203 203
204 $init-slope: cubic-bezier-func-slope($x1, $x2, $guess-t); 204 $init-slope: cubic-bezier-func-slope($x1, $x2, $guess-t);
205 @if $init-slope >= $cubic-bezier-newton-min-slope { 205 @if $init-slope >= $cubic-bezier-newton-min-slope {
206 @return cubic-bezier-newton-raphson($x1, $x2, $x, $guess-t); 206 @return cubic-bezier-newton-raphson($x1, $x2, $x, $guess-t);
207 } @else if $init-slope == 0 { 207 } @else if $init-slope == 0 {
208 @return $guess-t; 208 @return $guess-t;
209 } @else { 209 } @else {
210 @return cubic-bezier-binary-subdivide($x1, $x2, $x, $intv-start, $intv-start + 1 / $cubic-bezier-sample-pool-size); 210 @return cubic-bezier-binary-subdivide($x1, $x2, $x, $intv-start, $intv-start + 1 / $cubic-bezier-sample-pool-size);
211 } 211 }
212} 212}
213 213
214/// 214///
@@ -219,7 +219,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
219/// @return {number} 219/// @return {number}
220/// 220///
221@function linear($x) { 221@function linear($x) {
222 @return $x; 222 @return $x;
223} 223}
224 224
225/// 225///
@@ -230,7 +230,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
230/// @return {number} 230/// @return {number}
231/// 231///
232@function ease($x) { 232@function ease($x) {
233 @return cubic-bezier(.25, .1, .25, 1, $x); 233 @return cubic-bezier(.25, .1, .25, 1, $x);
234} 234}
235 235
236/// 236///
@@ -241,7 +241,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
241/// @return {number} 241/// @return {number}
242/// 242///
243@function ease-in($x) { 243@function ease-in($x) {
244 @return cubic-bezier(.42, 0, 1, 1, $x); 244 @return cubic-bezier(.42, 0, 1, 1, $x);
245} 245}
246 246
247/// 247///
@@ -252,7 +252,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
252/// @return {number} 252/// @return {number}
253/// 253///
254@function ease-out($x) { 254@function ease-out($x) {
255 @return cubic-bezier(0, 0, .58, 1, $x); 255 @return cubic-bezier(0, 0, .58, 1, $x);
256} 256}
257 257
258/// 258///
@@ -263,7 +263,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
263/// @return {number} 263/// @return {number}
264/// 264///
265@function ease-in-out($x) { 265@function ease-in-out($x) {
266 @return cubic-bezier(.42, 0, .58, 1, $x); 266 @return cubic-bezier(.42, 0, .58, 1, $x);
267} 267}
268 268
269/// 269///
@@ -274,7 +274,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
274/// @return {number} 274/// @return {number}
275/// 275///
276@function ease-in-sine($x) { 276@function ease-in-sine($x) {
277 @return cubic-bezier(.47, 0, .745, .715, $x); 277 @return cubic-bezier(.47, 0, .745, .715, $x);
278} 278}
279 279
280/// 280///
@@ -285,7 +285,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
285/// @return {number} 285/// @return {number}
286/// 286///
287@function ease-out-sine($x) { 287@function ease-out-sine($x) {
288 @return cubic-bezier(.39, .575, .565, 1, $x); 288 @return cubic-bezier(.39, .575, .565, 1, $x);
289} 289}
290 290
291/// 291///
@@ -296,7 +296,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
296/// @return {number} 296/// @return {number}
297/// 297///
298@function ease-in-out-sine($x) { 298@function ease-in-out-sine($x) {
299 @return cubic-bezier(.445, .05, .55, .95, $x); 299 @return cubic-bezier(.445, .05, .55, .95, $x);
300} 300}
301 301
302/// 302///
@@ -307,7 +307,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
307/// @return {number} 307/// @return {number}
308/// 308///
309@function ease-in-quad($x) { 309@function ease-in-quad($x) {
310 @return cubic-bezier(.55, .085, .68, .53, $x); 310 @return cubic-bezier(.55, .085, .68, .53, $x);
311} 311}
312 312
313/// 313///
@@ -318,7 +318,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
318/// @return {number} 318/// @return {number}
319/// 319///
320@function ease-out-quad($x) { 320@function ease-out-quad($x) {
321 @return cubic-bezier(.25, .46, .45, .94, $x); 321 @return cubic-bezier(.25, .46, .45, .94, $x);
322} 322}
323 323
324/// 324///
@@ -329,7 +329,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
329/// @return {number} 329/// @return {number}
330/// 330///
331@function ease-in-out-quad($x) { 331@function ease-in-out-quad($x) {
332 @return cubic-bezier(.455, .03, .515, .955, $x); 332 @return cubic-bezier(.455, .03, .515, .955, $x);
333} 333}
334 334
335/// 335///
@@ -340,7 +340,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
340/// @return {number} 340/// @return {number}
341/// 341///
342@function ease-in-cubic($x) { 342@function ease-in-cubic($x) {
343 @return cubic-bezier(.55, .055, .675, .19, $x); 343 @return cubic-bezier(.55, .055, .675, .19, $x);
344} 344}
345 345
346/// 346///
@@ -351,7 +351,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
351/// @return {number} 351/// @return {number}
352/// 352///
353@function ease-out-cubic($x) { 353@function ease-out-cubic($x) {
354 @return cubic-bezier(.215, .61, .355, 1, $x); 354 @return cubic-bezier(.215, .61, .355, 1, $x);
355} 355}
356 356
357/// 357///
@@ -362,7 +362,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
362/// @return {number} 362/// @return {number}
363/// 363///
364@function ease-in-out-cubic($x) { 364@function ease-in-out-cubic($x) {
365 @return cubic-bezier(.645, .045, .355, 1, $x); 365 @return cubic-bezier(.645, .045, .355, 1, $x);
366} 366}
367 367
368/// 368///
@@ -373,7 +373,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
373/// @return {number} 373/// @return {number}
374/// 374///
375@function ease-in-quart($x) { 375@function ease-in-quart($x) {
376 @return cubic-bezier(.895, .03, .685, .22, $x); 376 @return cubic-bezier(.895, .03, .685, .22, $x);
377} 377}
378 378
379/// 379///
@@ -384,7 +384,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
384/// @return {number} 384/// @return {number}
385/// 385///
386@function ease-out-quart($x) { 386@function ease-out-quart($x) {
387 @return cubic-bezier(.165, .84, .44, 1, $x); 387 @return cubic-bezier(.165, .84, .44, 1, $x);
388} 388}
389 389
390/// 390///
@@ -395,7 +395,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
395/// @return {number} 395/// @return {number}
396/// 396///
397@function ease-in-out-quart($x) { 397@function ease-in-out-quart($x) {
398 @return cubic-bezier(.77, 0, .175, 1, $x); 398 @return cubic-bezier(.77, 0, .175, 1, $x);
399} 399}
400 400
401/// 401///
@@ -406,7 +406,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
406/// @return {number} 406/// @return {number}
407/// 407///
408@function ease-in-quint($x) { 408@function ease-in-quint($x) {
409 @return cubic-bezier(.755, .05, .855, .06, $x); 409 @return cubic-bezier(.755, .05, .855, .06, $x);
410} 410}
411 411
412/// 412///
@@ -417,7 +417,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
417/// @return {number} 417/// @return {number}
418/// 418///
419@function ease-out-quint($x) { 419@function ease-out-quint($x) {
420 @return cubic-bezier(.23, 1, .32, 1, $x); 420 @return cubic-bezier(.23, 1, .32, 1, $x);
421} 421}
422 422
423/// 423///
@@ -428,7 +428,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
428/// @return {number} 428/// @return {number}
429/// 429///
430@function ease-in-out-quint($x) { 430@function ease-in-out-quint($x) {
431 @return cubic-bezier(.86, 0, .07, 1, $x); 431 @return cubic-bezier(.86, 0, .07, 1, $x);
432} 432}
433 433
434/// 434///
@@ -439,7 +439,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
439/// @return {number} 439/// @return {number}
440/// 440///
441@function ease-in-expo($x) { 441@function ease-in-expo($x) {
442 @return cubic-bezier(.95, .05, .795, .035, $x); 442 @return cubic-bezier(.95, .05, .795, .035, $x);
443} 443}
444 444
445/// 445///
@@ -450,7 +450,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
450/// @return {number} 450/// @return {number}
451/// 451///
452@function ease-out-expo($x) { 452@function ease-out-expo($x) {
453 @return cubic-bezier(.19, 1, .22, 1, $x); 453 @return cubic-bezier(.19, 1, .22, 1, $x);
454} 454}
455 455
456/// 456///
@@ -461,7 +461,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
461/// @return {number} 461/// @return {number}
462/// 462///
463@function ease-in-out-expo($x) { 463@function ease-in-out-expo($x) {
464 @return cubic-bezier(1, 0, 0, 1, $x); 464 @return cubic-bezier(1, 0, 0, 1, $x);
465} 465}
466 466
467/// 467///
@@ -472,7 +472,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
472/// @return {number} 472/// @return {number}
473/// 473///
474@function ease-in-circ($x) { 474@function ease-in-circ($x) {
475 @return cubic-bezier(.6, .04, .98, .335, $x); 475 @return cubic-bezier(.6, .04, .98, .335, $x);
476} 476}
477 477
478/// 478///
@@ -483,7 +483,7 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
483/// @return {number} 483/// @return {number}
484/// 484///
485@function ease-out-circ($x) { 485@function ease-out-circ($x) {
486 @return cubic-bezier(.075, .82, .165, 1, $x); 486 @return cubic-bezier(.075, .82, .165, 1, $x);
487} 487}
488 488
489/// 489///
@@ -494,5 +494,5 @@ $cubic-bezier-subdiv-max-iters: 10 !default;
494/// @return {number} 494/// @return {number}
495/// 495///
496@function ease-in-out-circ($x) { 496@function ease-in-out-circ($x) {
497 @return cubic-bezier(.785, .135, .15, .86, $x); 497 @return cubic-bezier(.785, .135, .15, .86, $x);
498} 498}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-08-22 18:47:38 +0000