add shake-z animation (#489)

* add wobble animation * adjust wobble animation timing function * update test * rename animation to shake-z * Update docsite/index.html Co-authored-by: Adam Argyle <[email protected]> * Update docsite/index.html Co-authored-by: Adam Argyle <[email protected]> * add animation shake z in animation props example --------- Co-authored-by: Adam Argyle <[email protected]>
argyleink · Apr 5, 2024 · a04f5d4 · a04f5d4
1 parent b07d9ee
commit a04f5d4
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 2 deletions.
diff --git a/docsite/index.html b/docsite/index.html
@@ -2562,7 +2562,7 @@ <h5>The Props</h5>
             <pre class="language-css"><code>
               --animation-fade-{in,out}
               --animation-fade-{in,out}-bloom
-              --animation-shake-{x,y}
+              --animation-shake-{x,y,z}
 
               --animation-slide-out-{up,down,left,right}
               --animation-slide-in-{up,down,left,right}
@@ -2844,6 +2844,16 @@ <h6>Shake Y</h6>
               </svg>
             </button>
           </div>
+
+          <div class="animation-demo-target" data-animation="shake-z">
+            <h6>Shake Z</h6>
+            <button class="play-button">
+              <svg viewBox="0 0 20 20">
+                <use href="#play-icon"/>
+                <use href="#pause-icon" class="hidden"/>
+              </svg>
+            </button>
+          </div>
         </div>
       </div>
 

diff --git a/src/props.animations.css b/src/props.animations.css
@@ -17,6 +17,7 @@
   --animation-slide-in-left: slide-in-left .5s var(--ease-3);
   --animation-shake-x: shake-x .75s var(--ease-out-5);
   --animation-shake-y: shake-y .75s var(--ease-out-5);
+  --animation-shake-z: shake-z 1s var(--ease-in-out-3);
   --animation-spin: spin 2s linear infinite;
   --animation-ping: ping 5s var(--ease-out-3) infinite;
   --animation-blink: blink 1s var(--ease-out-3) infinite;
@@ -85,6 +86,13 @@
   60% { transform: translateY(-5%) }
   80% { transform: translateY(5%) }
 }
+@keyframes shake-z {
+  0%, 100% { transform: rotate(0deg) }
+  20% { transform: rotate(-2deg) }
+  40% { transform: rotate(2deg) }
+  60% { transform: rotate(-2deg) }
+  80% { transform: rotate(2deg) }
+}
 @keyframes spin {
   to { transform: rotate(1turn) }
 }

diff --git a/src/props.animations.js b/src/props.animations.js
@@ -102,6 +102,15 @@ export default {
   40% { transform: translateY(5%) }
   60% { transform: translateY(-5%) }
   80% { transform: translateY(5%) }
+}`,
+"--animation-shake-z": "shake-z 1s var(--ease-in-out-3)", 
+"--animation-shake-z-@": `
+@keyframes shake-z {
+  0%, 100% { transform: rotate(0deg) }
+  20% { transform: rotate(-2deg) }
+  40% { transform: rotate(2deg) }
+  60% { transform: rotate(-2deg) }
+  80% { transform: rotate(2deg) }
 }`,
   "--animation-spin": "spin 2s linear infinite", 
   "--animation-spin-@": `

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, 1654)
+  t.is(Object.keys(OpenProps).length, 1658)
 })
 
 test('Import should have animations', async t => {