Bounce easings (#430)

* stubs 5 new bouncy easings * document new easings * update tests to new prop total * update token count test * Apply suggestions from code review Co-authored-by: Ric <[email protected]> --------- Co-authored-by: Ric <[email protected]>
argyleink · Oct 19, 2023 · ce8c2d3 · ce8c2d3
1 parent 476af80
commit ce8c2d3
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 2 deletions.
diff --git a/docsite/index.html b/docsite/index.html
@@ -2257,10 +2257,14 @@ <h5>The Props</h5>
               --ease-in-{1-5}
               --ease-out-{1-5}
               --ease-in-out-{1-5}
+
               --ease-elastic-out-{1-5}
               --ease-elastic-in-{1-5}
               --ease-elastic-in-out-{1-5} 
+
               --ease-spring-{1-5}
+              --ease-bounce-{1-5}
+
               --ease-step-{1-5}
 
               /* will be removed in v2 */
@@ -2279,6 +2283,10 @@ <h5>Usage Sample</h5>
             .dramatic-ease {
               animation: fade-in 1s var(--ease-5);
             }
+
+            .bouncy {
+              animation: slide-in-up 3s var(--ease-bounce-2);
+            }
           </code></pre>
         </div>
       </div>
@@ -2436,6 +2444,25 @@ <h5>Ease Spring</h5>
           </div>
         </div>
 
+        <div class="block-wrap">
+          <header class="animation-control-header">
+            <h5>Ease Bounce</h5>
+            <button class="play-button">
+              <svg viewBox="0 0 20 20">
+                <use href="#play-icon" />
+                <use href="#pause-icon" class="hidden" />
+              </svg>
+            </button>
+          </header>
+          <div class="ease-demo paused">
+            <div style="animation-timing-function: var(--ease-bounce-1)">ease-bounce-1</div>
+            <div style="animation-timing-function: var(--ease-bounce-2)">ease-bounce-2</div>
+            <div style="animation-timing-function: var(--ease-bounce-3)">ease-bounce-3</div>
+            <div style="animation-timing-function: var(--ease-bounce-4)">ease-bounce-4</div>
+            <div style="animation-timing-function: var(--ease-bounce-5)">ease-bounce-5</div>
+          </div>
+        </div>
+
         <div class="block-wrap">
           <header class="animation-control-header">
             <h5>Ease Steps</h5>

diff --git a/src/props.easing.css b/src/props.easing.css
@@ -77,4 +77,35 @@
     0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
     1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
   );
+  --ease-bounce-1: linear(
+    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%,
+    0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879,
+    0.885, 0.895, 0.908 89.7%, 0.946, 1
+  );
+  --ease-bounce-2: linear(
+    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765,
+    1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788,
+    0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954,
+    0.973, 1
+  );
+  --ease-bounce-3: linear(
+    0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764,
+    1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672,
+    0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879,
+    0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957,
+    0.96, 0.968, 0.981, 1
+  );
+  --ease-bounce-4: linear(
+    0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81,
+    0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%,
+    0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%,
+    0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1
+  );
+  --ease-bounce-5: linear(
+    0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627,
+    0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892,
+    0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%,
+    0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943,
+    0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1
+  );
 }
diff --git a/src/props.easing.js b/src/props.easing.js
@@ -87,4 +87,36 @@ export default {
     0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
     1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
   )`,
+
+  '--ease-bounce-1': `linear(
+    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%,
+    0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879,
+    0.885, 0.895, 0.908 89.7%, 0.946, 1
+  )`,
+  '--ease-bounce-2': `linear(
+    0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765,
+    1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788,
+    0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954,
+    0.973, 1
+  )`,
+  '--ease-bounce-3': `linear(
+    0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764,
+    1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672,
+    0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879,
+    0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957,
+    0.96, 0.968, 0.981, 1
+  )`,
+  '--ease-bounce-4': `linear(
+    0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81,
+    0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%,
+    0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%,
+    0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1
+  )`,
+  '--ease-bounce-5': `linear(
+    0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627,
+    0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892,
+    0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%,
+    0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943,
+    0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1
+  )`,
 }
diff --git a/test/basic.test.cjs b/test/basic.test.cjs
@@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
 const OPtokens = require('../open-props.tokens.json')
 
 test('Should have an all included import', t => {
-  t.is(Object.keys(OpenProps).length, 1642)
+  t.is(Object.keys(OpenProps).length, 1652)
 })
 
 test('Import should have animations', async t => {
@@ -24,7 +24,7 @@ test('Import should have colors', async t => {
 })
 
 test('JSON Import should have colors', async t => {
-  t.is(Object.keys(OPtokens).length, 434)
+  t.is(Object.keys(OPtokens).length, 439)
   t.assert(Object.keys(OPtokens).includes('--orange-0'))
 })