+29 -8 +/-5 browse
| 1 | diff --git a/build/to-stylesheet.js b/build/to-stylesheet.js |
| 2 | index 7045822..568f611 100644 |
| 3 | --- a/build/to-stylesheet.js |
| 4 | +++ b/build/to-stylesheet.js |
| 5 | @@ -40,6 +40,7 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => { |
| 6 | @media (--motionOK) { |
| 7 | :where(html) { |
| 8 | --scale-duration: .5s; |
| 9 | + --scale-easing: var(--ease-3); |
| 10 | --slide-duration: .5s; |
| 11 | --slide-easing: var(--ease-3); |
| 12 | --shake-duration: .75s; |
| 13 | diff --git a/docsite/index.css b/docsite/index.css |
| 14 | index ff0fcb9..6cd6e36 100644 |
| 15 | --- a/docsite/index.css |
| 16 | +++ b/docsite/index.css |
| 17 | @@ -1352,9 +1352,13 @@ input[type="range"] { |
| 18 | --animation-slide-down-fade-out: |
| 19 | var(--animation-fade-out) forwards, |
| 20 | var(--animation-slide-out-down); |
| 21 | + |
| 22 | /* important required because JS is writing props into inline styles */ |
| 23 | - animation-timing-function: var(--ease-squish-3) !important; |
| 24 | animation-duration: 1s !important; |
| 25 | + |
| 26 | + @media (--motionOK) { |
| 27 | + animation-timing-function: var(--ease-3), var(--ease-squish-3) !important; |
| 28 | + } |
| 29 | } |
| 30 | |
| 31 | .shake-fade-combo { |
| 32 | @@ -1369,7 +1373,10 @@ input[type="range"] { |
| 33 | var(--animation-scale-down), |
| 34 | var(--animation-fade-out) |
| 35 | ; |
| 36 | - animation-timing-function: var(--ease-squish-4) !important; |
| 37 | + |
| 38 | + @media (--motionOK) { |
| 39 | + animation-timing-function: var(--ease-squish-4), var(--ease-3) !important; |
| 40 | + } |
| 41 | } |
| 42 | |
| 43 | |
| 44 | diff --git a/docsite/index.html b/docsite/index.html |
| 45 | index 4989367..e4c76b7 100644 |
| 46 | --- a/docsite/index.html |
| 47 | +++ b/docsite/index.html |
| 48 | @@ -2386,8 +2386,14 @@ |
| 49 | animation: |
| 50 | var(--animation-fade-out) forwards, |
| 51 | var(--animation-slide-out-down); |
| 52 | - animation-timing-function: var(--ease-squish-3); |
| 53 | animation-duration: 1s; |
| 54 | + |
| 55 | + /* change slide timing to squish */ |
| 56 | + @media (--motionOK) { |
| 57 | + animation-timing-function: |
| 58 | + var(--ease-3), |
| 59 | + var(--ease-squish-3); |
| 60 | + } |
| 61 | } |
| 62 | </code></pre> |
| 63 | </div> |
| 64 | @@ -2432,7 +2438,13 @@ |
| 65 | animation: |
| 66 | var(--animation-scale-down), |
| 67 | var(--animation-fade-out); |
| 68 | - animation-timing-function: var(--ease-squish-4); |
| 69 | + |
| 70 | + /* change scale timing to squish */ |
| 71 | + @media (--motionOK) { |
| 72 | + animation-timing-function: |
| 73 | + var(--ease-squish-4), |
| 74 | + var(--ease-3); |
| 75 | + } |
| 76 | } |
| 77 | </code></pre> |
| 78 | </div> |
| 79 | diff --git a/src/props.animations.css b/src/props.animations.css |
| 80 | index 04f6ea0..12eacde 100644 |
| 81 | --- a/src/props.animations.css |
| 82 | +++ b/src/props.animations.css |
| 83 | @@ -1,8 +1,8 @@ |
| 84 | :where(html) { |
| 85 | --animation-fade-in: fade-in .5s var(--ease-3); |
| 86 | --animation-fade-out: fade-out .5s var(--ease-3); |
| 87 | - --animation-scale-up: scale-up var(--scale-duration, 1ms) var(--ease-3); |
| 88 | - --animation-scale-down: scale-down var(--scale-duration, 1ms) var(--ease-3); |
| 89 | + --animation-scale-up: scale-up var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start)); |
| 90 | + --animation-scale-down: scale-down var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start)); |
| 91 | --animation-slide-out-up: slide-out-up var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both)); |
| 92 | --animation-slide-out-down: slide-out-down var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both)); |
| 93 | --animation-slide-out-right: slide-out-right var(--slide-duration, 2s) var(--slide-easing, steps(3, jump-both)); |
| 94 | @@ -102,6 +102,7 @@ |
| 95 | @media (--motionOK) { |
| 96 | :where(html) { |
| 97 | --scale-duration: .5s; |
| 98 | + --scale-easing: var(--ease-3); |
| 99 | --slide-duration: .5s; |
| 100 | --slide-easing: var(--ease-3); |
| 101 | --shake-duration: .75s; |
| 102 | diff --git a/src/props.animations.js b/src/props.animations.js |
| 103 | index b0715b3..9cbdf24 100644 |
| 104 | --- a/src/props.animations.js |
| 105 | +++ b/src/props.animations.js |
| 106 | @@ -9,12 +9,12 @@ export default { |
| 107 | @keyframes fade-out { |
| 108 | to { opacity: 0 } |
| 109 | }`, |
| 110 | - "--animation-scale-up": "scale-up var(--scale-duration, 1ms) var(--ease-3)", |
| 111 | + "--animation-scale-up": "scale-up var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start))", |
| 112 | "--animation-scale-up-@": ` |
| 113 | @keyframes scale-up { |
| 114 | to { transform: scale(1.25) } |
| 115 | }`, |
| 116 | - "--animation-scale-down": "scale-down var(--scale-duration, 1ms) var(--ease-3)", |
| 117 | + "--animation-scale-down": "scale-down var(--scale-duration, 1s) var(--scale-easing, steps(1, jump-start))", |
| 118 | "--animation-scale-down-@": ` |
| 119 | @keyframes scale-down { |
| 120 | to { transform: scale(.75) } |