Skip to content

Issue 192 #194

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

Closed
Que-tin wants to merge 11 commits into from
Closed

Issue 192 #194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a595dd8
Fix build on windows devices
Que-tin Feb 17, 2022
a835966
Enhance anmations with reduced motion
Que-tin Feb 17, 2022
3f692c1
Move the empty string string check to to-stylesheet.js
Que-tin Feb 23, 2022
a916ed9
Merge branch 'main' into Issue-192
Que-tin Feb 23, 2022
b23f29c
Remove windows fix from this branch
Que-tin Feb 23, 2022
6cf4a63
Revoke changes from windows fix
Que-tin Feb 23, 2022
a752b66
Add reduced motion with steps
Que-tin Feb 23, 2022
c7d4163
Add easings
Que-tin Feb 23, 2022
25ab580
Fix step timings
Que-tin Feb 23, 2022
c439cd2
adds fixes for combo examples, fixes scale animations
argyleink Feb 24, 2022
057cd2d
Merge pull request #1 from argyleink/pr/194
Que-tin Feb 24, 2022
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
23 changes: 23 additions & 0 deletions build/to-stylesheet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,29 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {
}`
}

if (filename.includes('animations')) {
appendedMeta += `
@media (--motionOK) {
:where(html) {
--scale-duration: .5s;
--scale-easing: var(--ease-3);
--slide-duration: .5s;
--slide-easing: var(--ease-3);
--shake-duration: .75s;
--shake-easing: var(--ease-out-5);
--spin-easing: linear;
--ping-duration: 5s;
--ping-easing: var(--ease-out-3);
--blink-duration: 1s;
--float-ease: var(--ease-out-3);
--bounce-duration: 2s;
--bounce-ease: var(--ease-squish-2);
--pulse-duration: 2s;
--pulse-ease: var(--ease-out-3);
}
}`
}

file.write('}\n')
file.end(appendedMeta)
}
11 changes: 9 additions & 2 deletions docsite/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1352,9 +1352,13 @@ input[type="range"] {
--animation-slide-down-fade-out:
var(--animation-fade-out) forwards,
var(--animation-slide-out-down);

/* important required because JS is writing props into inline styles */
animation-timing-function: var(--ease-squish-3) !important;
animation-duration: 1s !important;

@media (--motionOK) {
animation-timing-function: var(--ease-3), var(--ease-squish-3) !important;
}
}

.shake-fade-combo {
Expand All @@ -1369,7 +1373,10 @@ input[type="range"] {
var(--animation-scale-down),
var(--animation-fade-out)
;
animation-timing-function: var(--ease-squish-4) !important;

@media (--motionOK) {
animation-timing-function: var(--ease-squish-4), var(--ease-3) !important;
}
}


Expand Down
16 changes: 14 additions & 2 deletions docsite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2386,8 +2386,14 @@ <h6>Slide Fade</h6>
animation:
var(--animation-fade-out) forwards,
var(--animation-slide-out-down);
animation-timing-function: var(--ease-squish-3);
animation-duration: 1s;

/* change slide timing to squish */
@media (--motionOK) {
animation-timing-function:
var(--ease-3),
var(--ease-squish-3);
}
}
</code></pre>
</div>
Expand Down Expand Up @@ -2432,7 +2438,13 @@ <h6>Push Out</h6>
animation:
var(--animation-scale-down),
var(--animation-fade-out);
animation-timing-function: var(--ease-squish-4);

/* change scale timing to squish */
@media (--motionOK) {
animation-timing-function:
var(--ease-squish-4),
var(--ease-3);
}
}
</code></pre>
</div>
Expand Down
55 changes: 37 additions & 18 deletions src/props.animations.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
:where(html) {
--animation-fade-in: fade-in .5s var(--ease-3);
--animation-fade-out: fade-out .5s var(--ease-3);
--animation-scale-up: scale-up .5s var(--ease-3);
--animation-scale-down: scale-down .5s var(--ease-3);
--animation-slide-out-up: slide-out-up .5s var(--ease-3);
--animation-slide-out-down: slide-out-down .5s var(--ease-3);
--animation-slide-out-right: slide-out-right .5s var(--ease-3);
--animation-slide-out-left: slide-out-left .5s var(--ease-3);
--animation-slide-in-up: slide-in-up .5s var(--ease-3);
--animation-slide-in-down: slide-in-down .5s var(--ease-3);
--animation-slide-in-right: slide-in-right .5s var(--ease-3);
--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-spin: spin 2s linear infinite;
--animation-ping: ping 5s var(--ease-out-3) infinite;
--animation-blink: blink 1s var(--ease-out-3) infinite;
--animation-float: float 3s var(--ease-in-out-3) infinite;
--animation-bounce: bounce 2s var(--ease-squish-2) infinite;
--animation-pulse: pulse 2s var(--ease-out-3) infinite;
--animation-scale-up: scale-up var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start));
--animation-scale-down: scale-down var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start));
--animation-slide-out-up: slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
--animation-slide-out-down: slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
--animation-slide-out-right: slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
--animation-slide-out-left: slide-out-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
--animation-slide-in-up: slide-in-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
--animation-slide-in-down: slide-in-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
--animation-slide-in-right: slide-in-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
--animation-slide-in-left: slide-in-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both));
--animation-shake-x: shake-x var(--shake-duration, 3s) var(--shake-easing, steps(1));
--animation-shake-y: shake-y var(--shake-duration, 3s) var(--shake-easing, steps(1));
--animation-spin: spin 2s var(--spin-easing, steps(4, jump-start)) infinite;
--animation-ping: ping var(--ping-duration, 4s) var(--ping-easing, steps(4, jump-start)) infinite;
--animation-blink: blink var(--blink-duration, 2s) var(--ease-out-3) infinite;
--animation-float: float 3s var(--float-ease, steps(2, jump-start)) infinite;
--animation-bounce: bounce var(--bounce-duration, 4s) var(--bounce-ease, steps(2)) infinite;
--animation-pulse: pulse 2s var(--pulse-ease, steps(2, jump-start)) infinite;
}

@keyframes fade-in {
Expand Down Expand Up @@ -98,4 +98,23 @@
}
@keyframes pulse {
50% { transform: scale(.9,.9) }
}
@media (--motionOK) {
:where(html) {
--scale-duration: .5s;
--scale-easing: var(--ease-3);
--slide-duration: .5s;
--slide-easing: var(--ease-3);
--shake-duration: .75s;
--shake-easing: var(--ease-out-5);
--spin-easing: linear;
--ping-duration: 5s;
--ping-easing: var(--ease-out-3);
--blink-duration: 1s;
--float-ease: var(--ease-out-3);
--bounce-duration: 2s;
--bounce-ease: var(--ease-squish-2);
--pulse-duration: 2s;
--pulse-ease: var(--ease-out-3);
}
}
36 changes: 18 additions & 18 deletions src/props.animations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,57 +9,57 @@ export default {
@keyframes fade-out {
to { opacity: 0 }
}`,
"--animation-scale-up": "scale-up .5s var(--ease-3)",
"--animation-scale-up": "scale-up var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start))",
"--animation-scale-up-@": `
@keyframes scale-up {
to { transform: scale(1.25) }
}`,
"--animation-scale-down": "scale-down .5s var(--ease-3)",
"--animation-scale-down": "scale-down var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start))",
"--animation-scale-down-@": `
@keyframes scale-down {
to { transform: scale(.75) }
}`,
"--animation-slide-out-up": "slide-out-up .5s var(--ease-3)",
"--animation-slide-out-up": "slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))",
"--animation-slide-out-up-@": `
@keyframes slide-out-up {
to { transform: translateY(-100%) }
}`,
"--animation-slide-out-down": "slide-out-down .5s var(--ease-3)",
"--animation-slide-out-down": "slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))",
"--animation-slide-out-down-@": `
@keyframes slide-out-down {
to { transform: translateY(100%) }
}`,
"--animation-slide-out-right": "slide-out-right .5s var(--ease-3)",
"--animation-slide-out-right": "slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))",
"--animation-slide-out-right-@": `
@keyframes slide-out-right {
to { transform: translateX(100%) }
}`,
"--animation-slide-out-left": "slide-out-left .5s var(--ease-3)",
"--animation-slide-out-left": "slide-out-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))",
"--animation-slide-out-left-@": `
@keyframes slide-out-left {
to { transform: translateX(-100%) }
}`,
"--animation-slide-in-up": "slide-in-up .5s var(--ease-3)",
"--animation-slide-in-up": "slide-in-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))",
"--animation-slide-in-up-@": `
@keyframes slide-in-up {
from { transform: translateY(100%) }
}`,
"--animation-slide-in-down": "slide-in-down .5s var(--ease-3)",
"--animation-slide-in-down": "slide-in-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))",
"--animation-slide-in-down-@": `
@keyframes slide-in-down {
from { transform: translateY(-100%) }
}`,
"--animation-slide-in-right": "slide-in-right .5s var(--ease-3)",
"--animation-slide-in-right": "slide-in-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))",
"--animation-slide-in-right-@": `
@keyframes slide-in-right {
from { transform: translateX(-100%) }
}`,
"--animation-slide-in-left": "slide-in-left .5s var(--ease-3)",
"--animation-slide-in-left": "slide-in-left var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both))",
"--animation-slide-in-left-@": `
@keyframes slide-in-left {
from { transform: translateX(100%) }
}`,
"--animation-shake-x": "shake-x .75s var(--ease-out-5)",
"--animation-shake-x": "shake-x var(--shake-duration, 3s) var(--shake-easing, steps(1))",
"--animation-shake-x-@": `
@keyframes shake-x {
0%, 100% { transform: translateX(0%) }
Expand All @@ -68,7 +68,7 @@ export default {
60% { transform: translateX(-5%) }
80% { transform: translateX(5%) }
}`,
"--animation-shake-y": "shake-y .75s var(--ease-out-5)",
"--animation-shake-y": "shake-y var(--shake-duration, 3s) var(--shake-easing, steps(1))",
"--animation-shake-y-@": `
@keyframes shake-y {
0%, 100% { transform: translateY(0%) }
Expand All @@ -77,20 +77,20 @@ export default {
60% { transform: translateY(-5%) }
80% { transform: translateY(5%) }
}`,
"--animation-spin": "spin 2s linear infinite",
"--animation-spin": "spin 2s var(--spin-easing, steps(4, jump-start)) infinite",
"--animation-spin-@": `
@keyframes spin {
to { transform: rotate(1turn) }
}`,
"--animation-ping": "ping 5s var(--ease-out-3) infinite",
"--animation-ping": "ping var(--ping-duration, 4s) var(--ping-easing, steps(4, jump-start)) infinite",
"--animation-ping-@": `
@keyframes ping {
90%, 100% {
transform: scale(2);
opacity: 0;
}
}`,
"--animation-blink": "blink 1s var(--ease-out-3) infinite",
"--animation-blink": "blink var(--blink-duration, 2s) var(--ease-out-3) infinite",
"--animation-blink-@": `
@keyframes blink {
0%, 100% {
Expand All @@ -100,19 +100,19 @@ export default {
opacity: .5
}
}`,
"--animation-float": "float 3s var(--ease-in-out-3) infinite",
"--animation-float": "float 3s var(--float-ease, steps(2, jump-start)) infinite",
"--animation-float-@": `
@keyframes float {
50% { transform: translateY(-25%) }
}`,
"--animation-bounce": "bounce 2s var(--ease-squish-2) infinite",
"--animation-bounce": "bounce var(--bounce-duration, 4s) var(--bounce-ease, steps(2)) infinite",
"--animation-bounce-@": `
@keyframes bounce {
25% { transform: translateY(-20%) }
40% { transform: translateY(-3%) }
0%, 60%, 100% { transform: translateY(0) }
}`,
"--animation-pulse": "pulse 2s var(--ease-out-3) infinite",
"--animation-pulse": "pulse 2s var(--pulse-ease, steps(2, jump-start)) infinite",
"--animation-pulse-@": `
@keyframes pulse {
50% { transform: scale(.9,.9) }
Expand Down