Skip to content

Reduced Motion Animations (for #192) #341

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

Draft
saitheninja wants to merge 41 commits into
base: main
Choose a base branch
from
Draft

Reduced Motion Animations (for #192) #341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
f79c77a
add animations for reduced motion
saitheninja Jan 27, 2023
9d58a7f
add previews for new animations to docsite
saitheninja Jan 27, 2023
9f8fb02
add animations that use fades
saitheninja Feb 10, 2023
fe8bdeb
change "reduced" to "less"
saitheninja Feb 10, 2023
0873a79
remove old iterations
saitheninja Apr 24, 2023
0bde169
rename animations to ANIMATION_NAME-reduced
saitheninja Apr 24, 2023
6afb4ee
new iteration of reduced animations
saitheninja Apr 24, 2023
20a48b6
implement reduced motion animations
saitheninja Apr 25, 2023
a232412
clean up diffs
saitheninja Apr 28, 2023
87dd5c4
add documentation
saitheninja Apr 28, 2023
a00460a
clean up diff
saitheninja Apr 28, 2023
21cd694
Merge branch 'reduced-motion' of https://github.com/saitheninja/open-…
Que-tin Apr 28, 2023
6975f7f
[add] Reduced media handling for animations
Que-tin Apr 28, 2023
31a04ba
fixes #353
Mar 11, 2023
3da4776
cut 1.5.6 with normalize update
argyleink Mar 11, 2023
3a53f02
chore: include color helper (#355)
kaf-lamed-beyt Mar 17, 2023
22b7878
op-logo-svg-fix (#359)
syndicatefx Mar 30, 2023
2a3da8e
init build process (#360)
Mar 30, 2023
5022a12
cut v1.5.7 🎨
Mar 30, 2023
43bd27b
fixes #364
Apr 11, 2023
29e39d7
bug fix for bright oklch color
Apr 19, 2023
3688379
Fix accessibility issues on theme toggle button (#365)
mobalti Apr 21, 2023
5dcd28e
remove old iterations
saitheninja Apr 24, 2023
af7ca24
clean up diffs
saitheninja Apr 28, 2023
b79d585
Merge pull request #1 from Que-tin/feature/reduced-motion
saitheninja Apr 29, 2023
af89ad9
Merge branch 'argyleink:main' into reduced-motion
saitheninja Apr 29, 2023
61cdce2
[add] Reduced media handling for animations
Que-tin Apr 28, 2023
8995020
[chg] Remove duplicate media definitons
Que-tin May 8, 2023
0dd1ec8
Update build/to-stylesheet.js
saitheninja May 9, 2023
9470790
Merge branch 'argyleink:main' into reduced-motion
saitheninja May 10, 2023
07dcb37
Merge branch 'argyleink:main' into main
saitheninja May 10, 2023
b873ef4
Merge branch 'main' into reduced-motion
saitheninja May 10, 2023
afb0966
Merge pull request #3 from saitheninja/reduced-motion
saitheninja May 10, 2023
752fc57
typo
saitheninja May 11, 2023
d8cfd83
[chg] Fix formating
Que-tin May 23, 2023
15f10c4
[del] Remove unnecessary whitespace
Que-tin May 23, 2023
10776a4
Merge branch 'main' into feature/reduced-motion
saitheninja Jul 10, 2023
2b123d5
Merge pull request #2 from Que-tin/feature/reduced-motion
saitheninja Jul 10, 2023
0fff7d9
Merge branch 'argyleink:main' into main
saitheninja Aug 3, 2023
7369ab4
Merge branch 'argyleink:main' into reduced-motion
saitheninja Aug 3, 2023
ebe68a9
Merge branch 'origin-main' into reduced-motion
saitheninja Aug 4, 2023
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
42 changes: 31 additions & 11 deletions build/to-stylesheet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,20 @@
import fs from 'fs'

/**
* Wraps a set of definitions inside of a media query
* @param {*} queryValue The media value to query for
* @param {*} definitions The definitions that need to be wrapped
* @returns Media query string
*/
const wrapInQuery = (queryValue, definitions) => {
return definitions ? `
@media (${queryValue}) {
${definitions.reduce((acc, [_, val], i) => (
`${acc} ${i ? `\n` : ''} ${val}`
), '')}
}` : '';
}

export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
const file = fs.createWriteStream("../src/" + filename)

Expand Down Expand Up @@ -53,19 +68,24 @@ ${dark_propsMeta}
})

if (filename.includes('animations')) {
let dark_props = Object.entries(props)
.filter(([prop, val]) =>
prop.includes('-@media:dark'))

dark_props.forEach(([prop, val], index) => {
let hasDarkKeyframe = prop.endsWith('-@media:dark') && val.trim().startsWith('@keyframe')
if (hasDarkKeyframe) {
appendedMeta += `
@media (--OSdark) {
${val.trim().replace(/\n/g, '\n ')};
}`
const [
dark_props,
reduced_props,
] = Object.entries(props).reduce((acc, prop) => {
const [key, val] = prop;

if (val.trim().startsWith('@keyframe')) {
const _val = val.trim().replace(/\n/g, '\n ');
key.endsWith('-@media:dark') && acc[0].push([key, _val]);
key.endsWith('-@media:reduced') && acc[1].push([key, _val]);
}
})

return acc;
}, [[], []]);

appendedMeta += wrapInQuery('--OSdark', dark_props)
appendedMeta += wrapInQuery('--motionNotOK', reduced_props)
}

file.write('}\n')
Expand Down
2 changes: 2 additions & 0 deletions docsite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2413,6 +2413,7 @@ <h5>Ease Steps</h5>
<header>
<h2>Animations</h2>
<p>Premade <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect">keyframe effects</a> allow you to orchestrate your own animations. Plus, a few nice attention-grabbers and indeterminate state animations.</p>
<p>All animations automatically offer a reduced motion fallback. Slide and scale animations crossfade between their start and end states, while all the attention getting animations reduce to a simple attention getting blink.</p>
</header>
<div class="block-wrap">
<div>
Expand All @@ -2423,6 +2424,7 @@ <h5>The Props</h5>
--animation-fade-{in,out}-bloom
--animation-shake-{x,y}

--animation-scale-{up,down}
--animation-slide-out-{up,down,left,right}
--animation-slide-in-{up,down,left,right}

Expand Down
254 changes: 254 additions & 0 deletions src/props.animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,4 +126,258 @@
10% { opacity: 1; filter: brightness(0.5) blur(10px) }
0% { opacity: 1; filter: brightness(1) blur(0) }
};
}
@media (--motionNotOK) {
@keyframes scale-up {
0% {
opacity: 1;
}
50% {
opacity: 0;
transform: scale(1);
}
50.01% {
transform: scale(1.25);
}
100% {
opacity: 1;
transform: scale(1.25);
}
};
}
@media (--motionNotOK) {
@keyframes scale-down {
0% {
opacity: 1;
}
50% {
opacity: 0;
transform: scale(1);
}
50.01% {
transform: scale(0.75);
}
100% {
opacity: 1;
transform: scale(0.75);
}
};
}
@media (--motionNotOK) {
@keyframes slide-out-up {
0% {
opacity: 1;
}
50% {
opacity: 0;
transform: translateY(0%);
}
50.01% {
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(-100%);
}
};
}
@media (--motionNotOK) {
@keyframes slide-out-down {
0% {
opacity: 1;
}
50% {
opacity: 0;
transform: translateY(0%);
}
50.01% {
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(100%);
}
};
}
@media (--motionNotOK) {
@keyframes slide-out-right {
0% {
opacity: 1;
}
50% {
opacity: 0;
transform: translateX(0%);
}
50.01% {
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(100%);
}
};
}
@media (--motionNotOK) {
@keyframes slide-out-left {
0% {
opacity: 1;
}
50% {
opacity: 0;
transform: translateX(0%);
}
50.01% {
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(-100%);
}
};
}
@media (--motionNotOK) {
@keyframes slide-in-up {
0% {
opacity: 1;
transform: translateY(100%);
}
50% {
opacity: 0;
transform: translateY(100%);
}
50.01% {
transform: translateY(0%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
};
}
@media (--motionNotOK) {
@keyframes slide-in-down {
0% {
opacity: 1;
transform: translateY(-100%);
}
50% {
opacity: 0;
transform: translateY(-100%);
}
50.01% {
transform: translateY(0%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
};
}
@media (--motionNotOK) {
@keyframes slide-in-right {
0% {
opacity: 1;
transform: translateX(-100%);
}
50% {
opacity: 0;
transform: translateX(-100%);
}
50.01% {
transform: translateX(0%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
};
}
@media (--motionNotOK) {
@keyframes slide-in-left {
0% {
opacity: 1;
transform: translateX(100%);
}
50% {
opacity: 0;
transform: translateX(100%);
}
50.01% {
transform: translateX(0%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
};
}
@media (--motionNotOK) {
@keyframes shake-x {
0%, 100% {
opacity: 1
}
50% {
opacity: .5
}
};
}
@media (--motionNotOK) {
@keyframes shake-y {
0%, 100% {
opacity: 1
}
50% {
opacity: .5
}
};
}
@media (--motionNotOK) {
@keyframes spin {
0%, 100% {
opacity: 1
}
50% {
opacity: .5
}
};
}
@media (--motionNotOK) {
@keyframes ping {
0%, 100% {
opacity: 1
}
50% {
opacity: .5
}
};
}
@media (--motionNotOK) {
@keyframes float {
0%, 100% {
opacity: 1
}
50% {
opacity: .5
}
};
}
@media (--motionNotOK) {
@keyframes bounce {
0%, 100% {
opacity: 1
}
50% {
opacity: .5
}
};
}
@media (--motionNotOK) {
@keyframes pulse {
0%, 100% {
opacity: 1
}
50% {
opacity: .5
}
};
}
Loading