Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add shake-z animation #489

Merged
merged 7 commits into from
Apr 5, 2024
Merged

add shake-z animation #489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1ace755
add wobble animation
Brian-Pob Apr 4, 2024
fd0c677
adjust wobble animation timing function
Brian-Pob Apr 4, 2024
8681c8f
update test
Brian-Pob Apr 5, 2024
eaae6b4
rename animation to shake-z
Brian-Pob Apr 5, 2024
45757d1
Update docsite/index.html
Brian-Pob Apr 5, 2024
3686ea3
Update docsite/index.html
Brian-Pob Apr 5, 2024
0a59238
add animation shake z in animation props example
Brian-Pob Apr 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion docsite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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>

Expand Down
8 changes: 8 additions & 0 deletions src/props.animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) }
}
Expand Down
9 changes: 9 additions & 0 deletions src/props.animations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-@": `
Expand Down
2 changes: 1 addition & 1 deletion test/basic.test.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
Loading