Added --ease-anticipate-* easings (#419)

* breaking change: added --ease-elastic-in, renamed --ease-elastic-* and --ease-squish-* to --ease-elastic-out-* and --ease-elastic-in-out-* * Update docsite/index.css Fixed typo from refactor in docsite/index.css as per Adam's comment Co-authored-by: Adam Argyle <[email protected]> * adjusted tests to correspond to additional props we added --------- Co-authored-by: Alex Li <[email protected]> Co-authored-by: Adam Argyle <[email protected]>
argyleink · Sep 29, 2023 · c326eee · c326eee
1 parent d31f6c9
commit c326eee
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 40 deletions.
diff --git a/docsite/index.css b/docsite/index.css
@@ -535,7 +535,7 @@ pre[class*="language-"] {
   &:is(:hover,:focus) {
     transform: scale(1.5);
     transition-delay: 0s;
-    transition-timing-function: var(--ease-elastic-3);
+    transition-timing-function: var(--ease-elastic-out-3);
 
     &::before {
       opacity: 1;
@@ -1436,7 +1436,7 @@ input[type="range"] {
   stroke-width: 2px;
   transform-origin: center center;
   transition: 
-    transform .5s var(--ease-elastic-4),
+    transform .5s var(--ease-elastic-out-4),
     opacity var(--_opacity-dur) var(--ease-3);
 
   @nest :hover > svg > & {

diff --git a/docsite/index.html b/docsite/index.html
@@ -2252,8 +2252,9 @@ <h5>The Props</h5>
               --ease-in-{1-5}
               --ease-out-{1-5}
               --ease-in-out-{1-5}
-              --ease-elastic-{1-5}
-              --ease-squish-{1-5}
+              --ease-elastic-out-{1-5}
+              --ease-elastic-in-{1-5}
+              --ease-elastic-in-out{1-5}
               --ease-spring-{1-5}
               --ease-step-{1-5}
             </code></pre>
@@ -2352,7 +2353,7 @@ <h5>Ease In Out</h5>
 
         <div class="block-wrap">
           <header class="animation-control-header">
-            <h5>Ease Elastic</h5>
+            <h5>Ease Elastic Out</h5>
             <button class="play-button">
               <svg viewBox="0 0 20 20">
                 <use href="#play-icon"/>
@@ -2361,17 +2362,17 @@ <h5>Ease Elastic</h5>
             </button>
           </header>
           <div class="ease-demo paused">
-            <div style="animation-timing-function: var(--ease-elastic-1)">ease-elastic-1</div>
-            <div style="animation-timing-function: var(--ease-elastic-2)">ease-elastic-2</div>
-            <div style="animation-timing-function: var(--ease-elastic-3)">ease-elastic-3</div>
-            <div style="animation-timing-function: var(--ease-elastic-4)">ease-elastic-4</div>
-            <div style="animation-timing-function: var(--ease-elastic-5)">ease-elastic-5</div>
+            <div style="animation-timing-function: var(--ease-elastic-out-1)">ease-elastic-out-1</div>
+            <div style="animation-timing-function: var(--ease-elastic-out-2)">ease-elastic-out-2</div>
+            <div style="animation-timing-function: var(--ease-elastic-out-3)">ease-elastic-out-3</div>
+            <div style="animation-timing-function: var(--ease-elastic-out-4)">ease-elastic-out-4</div>
+            <div style="animation-timing-function: var(--ease-elastic-out-5)">ease-elastic-out-5</div>
           </div>
         </div>
 
         <div class="block-wrap">
           <header class="animation-control-header">
-            <h5>Ease Squish</h5>
+            <h5>Ease Elastic In</h5>
             <button class="play-button">
               <svg viewBox="0 0 20 20">
                 <use href="#play-icon"/>
@@ -2380,11 +2381,30 @@ <h5>Ease Squish</h5>
             </button>
           </header>
           <div class="ease-demo paused">
-            <div style="animation-timing-function: var(--ease-squish-1)">ease-squish-1</div>
-            <div style="animation-timing-function: var(--ease-squish-2)">ease-squish-2</div>
-            <div style="animation-timing-function: var(--ease-squish-3)">ease-squish-3</div>
-            <div style="animation-timing-function: var(--ease-squish-4)">ease-squish-4</div>
-            <div style="animation-timing-function: var(--ease-squish-5)">ease-squish-5</div>
+            <div style="animation-timing-function: var(--ease-elastic-in-1)">ease-elastic-in-1</div>
+            <div style="animation-timing-function: var(--ease-elastic-in-2)">ease-elastic-in-2</div>
+            <div style="animation-timing-function: var(--ease-elastic-in-3)">ease-elastic-in-3</div>
+            <div style="animation-timing-function: var(--ease-elastic-in-4)">ease-elastic-in-4</div>
+            <div style="animation-timing-function: var(--ease-elastic-in-5)">ease-elastic-in-5</div>
+          </div>
+        </div>å
+
+        <div class="block-wrap">
+          <header class="animation-control-header">
+            <h5>Ease Elastic In Out</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-elastic-in-out-1)">ease-elastic-in-out-1</div>
+            <div style="animation-timing-function: var(--ease-elastic-in-out-2)">ease-elastic-in-out-2</div>
+            <div style="animation-timing-function: var(--ease-elastic-in-out-3)">ease-elastic-in-out-3</div>
+            <div style="animation-timing-function: var(--ease-elastic-in-out-4)">ease-elastic-in-out-4</div>
+            <div style="animation-timing-function: var(--ease-elastic-in-out-5)">ease-elastic-in-out-5</div>
           </div>
         </div>
 
@@ -2745,7 +2765,7 @@ <h6>Slide Fade</h6>
                   animation: 
                     var(--animation-fade-out) forwards,
                     var(--animation-slide-out-down);
-                  animation-timing-function: var(--ease-squish-3);
+                  animation-timing-function: var(--ease-elastic-in-out-3);
                   animation-duration: 1s;
                 }
               </code></pre>
@@ -2791,7 +2811,7 @@ <h6>Push Out</h6>
                   animation: 
                     var(--animation-scale-down),
                     var(--animation-fade-out);
-                  animation-timing-function: var(--ease-squish-4);
+                  animation-timing-function: var(--ease-elastic-in-out-4);
                 }
               </code></pre>
             </div>

diff --git a/src/props.easing.css b/src/props.easing.css
@@ -19,16 +19,21 @@
   --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
   --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
   --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
-  --ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25);
-  --ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25);
-  --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25);
-  --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25);
-  --ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25);
-  --ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5);
-  --ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5);
-  --ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5);
-  --ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5);
-  --ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5);
+  --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
+  --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
+  --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
+  --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
+  --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
+  --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1);
+  --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1);
+  --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1);
+  --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1);
+  --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
+  --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
+  --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
+  --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
+  --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
+  --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
   --ease-step-1: steps(2);
   --ease-step-2: steps(3);
   --ease-step-3: steps(4);

diff --git a/src/props.easing.js b/src/props.easing.js
@@ -23,17 +23,23 @@ export default {
   '--ease-in-out-4': 'cubic-bezier(.7, 0, .3, 1)',
   '--ease-in-out-5': 'cubic-bezier(.9, 0, .1, 1)',
 
-  '--ease-elastic-1': 'cubic-bezier(.5, .75, .75, 1.25)',
-  '--ease-elastic-2': 'cubic-bezier(.5, 1, .75, 1.25)',
-  '--ease-elastic-3': 'cubic-bezier(.5, 1.25, .75, 1.25)',
-  '--ease-elastic-4': 'cubic-bezier(.5, 1.5, .75, 1.25)',
-  '--ease-elastic-5': 'cubic-bezier(.5, 1.75, .75, 1.25)',
+  '--ease-elastic-out-1': 'cubic-bezier(.5, .75, .75, 1.25)',
+  '--ease-elastic-out-2': 'cubic-bezier(.5, 1, .75, 1.25)',
+  '--ease-elastic-out-3': 'cubic-bezier(.5, 1.25, .75, 1.25)',
+  '--ease-elastic-out-4': 'cubic-bezier(.5, 1.5, .75, 1.25)',
+  '--ease-elastic-out-5': 'cubic-bezier(.5, 1.75, .75, 1.25)',
 
-  '--ease-squish-1': 'cubic-bezier(.5, -.1, .1, 1.5)',
-  '--ease-squish-2': 'cubic-bezier(.5, -.3, .1, 1.5)',
-  '--ease-squish-3': 'cubic-bezier(.5, -.5, .1, 1.5)',
-  '--ease-squish-4': 'cubic-bezier(.5, -.7, .1, 1.5)',
-  '--ease-squish-5': 'cubic-bezier(.5, -.9, .1, 1.5)',
+  '--ease-elastic-in-1': 'cubic-bezier(.5, -0.25, .75, 1)',
+  '--ease-elastic-in-2': 'cubic-bezier(.5, -0.50, .75, 1)',
+  '--ease-elastic-in-3': 'cubic-bezier(.5, -0.75, .75, 1)',
+  '--ease-elastic-in-4': 'cubic-bezier(.5, -1.00, .75, 1)',
+  '--ease-elastic-in-5': 'cubic-bezier(.5, -1.25, .75, 1)',
+
+  '--ease-elastic-in-out-1': 'cubic-bezier(.5, -.1, .1, 1.5)',
+  '--ease-elastic-in-out-2': 'cubic-bezier(.5, -.3, .1, 1.5)',
+  '--ease-elastic-in-out-3': 'cubic-bezier(.5, -.5, .1, 1.5)',
+  '--ease-elastic-in-out-4': 'cubic-bezier(.5, -.7, .1, 1.5)',
+  '--ease-elastic-in-out-5': 'cubic-bezier(.5, -.9, .1, 1.5)',
 
   '--ease-step-1': 'steps(2)',
   '--ease-step-2': 'steps(3)',

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, 1612)
+  t.is(Object.keys(OpenProps).length, 1622)
 })
 
 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, 419)
+  t.is(Object.keys(OPtokens).length, 424)
   t.assert(Object.keys(OPtokens).includes('--orange-0'))
 })