diff --git a/docsite/index.css b/docsite/index.css index c6f8bf60..cfce4b76 100644 --- a/docsite/index.css +++ b/docsite/index.css @@ -535,7 +535,7 @@ pre[class*="language-"] { &:is(:hover,:focus) { transform: scale(1.5); transition-delay: 0s; - transition-timing-function: var(--ease-elastic-3); + transition-timing-function: var(--ease-elastic-out-3); &::before { opacity: 1; @@ -1436,7 +1436,7 @@ input[type="range"] { stroke-width: 2px; transform-origin: center center; transition: - transform .5s var(--ease-elastic-4), + transform .5s var(--ease-elastic-out-4), opacity var(--_opacity-dur) var(--ease-3); @nest :hover > svg > & { diff --git a/docsite/index.html b/docsite/index.html index 76afd263..a56a5517 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -2252,8 +2252,9 @@
The Props
--ease-in-{1-5} --ease-out-{1-5} --ease-in-out-{1-5} - --ease-elastic-{1-5} - --ease-squish-{1-5} + --ease-elastic-out-{1-5} + --ease-elastic-in-{1-5} + --ease-elastic-in-out{1-5} --ease-spring-{1-5} --ease-step-{1-5} @@ -2352,7 +2353,7 @@
Ease In Out
-
Ease Elastic
+
Ease Elastic Out
-
ease-elastic-1
-
ease-elastic-2
-
ease-elastic-3
-
ease-elastic-4
-
ease-elastic-5
+
ease-elastic-out-1
+
ease-elastic-out-2
+
ease-elastic-out-3
+
ease-elastic-out-4
+
ease-elastic-out-5
-
Ease Squish
+
Ease Elastic In
-
ease-squish-1
-
ease-squish-2
-
ease-squish-3
-
ease-squish-4
-
ease-squish-5
+
ease-elastic-in-1
+
ease-elastic-in-2
+
ease-elastic-in-3
+
ease-elastic-in-4
+
ease-elastic-in-5
+
+
å + +
+
+
Ease Elastic In Out
+ +
+
+
ease-elastic-in-out-1
+
ease-elastic-in-out-2
+
ease-elastic-in-out-3
+
ease-elastic-in-out-4
+
ease-elastic-in-out-5
@@ -2745,7 +2765,7 @@
Slide Fade
animation: var(--animation-fade-out) forwards, var(--animation-slide-out-down); - animation-timing-function: var(--ease-squish-3); + animation-timing-function: var(--ease-elastic-in-out-3); animation-duration: 1s; } @@ -2791,7 +2811,7 @@
Push Out
animation: var(--animation-scale-down), var(--animation-fade-out); - animation-timing-function: var(--ease-squish-4); + animation-timing-function: var(--ease-elastic-in-out-4); } diff --git a/src/props.easing.css b/src/props.easing.css index d316ed25..07159a08 100644 --- a/src/props.easing.css +++ b/src/props.easing.css @@ -19,16 +19,21 @@ --ease-in-out-3: cubic-bezier(.5, 0, .5, 1); --ease-in-out-4: cubic-bezier(.7, 0, .3, 1); --ease-in-out-5: cubic-bezier(.9, 0, .1, 1); - --ease-elastic-1: cubic-bezier(.5, .75, .75, 1.25); - --ease-elastic-2: cubic-bezier(.5, 1, .75, 1.25); - --ease-elastic-3: cubic-bezier(.5, 1.25, .75, 1.25); - --ease-elastic-4: cubic-bezier(.5, 1.5, .75, 1.25); - --ease-elastic-5: cubic-bezier(.5, 1.75, .75, 1.25); - --ease-squish-1: cubic-bezier(.5, -.1, .1, 1.5); - --ease-squish-2: cubic-bezier(.5, -.3, .1, 1.5); - --ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5); - --ease-squish-4: cubic-bezier(.5, -.7, .1, 1.5); - --ease-squish-5: cubic-bezier(.5, -.9, .1, 1.5); + --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25); + --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25); + --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25); + --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25); + --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25); + --ease-elastic-in-1: cubic-bezier(.5, -0.25, .75, 1); + --ease-elastic-in-2: cubic-bezier(.5, -0.50, .75, 1); + --ease-elastic-in-3: cubic-bezier(.5, -0.75, .75, 1); + --ease-elastic-in-4: cubic-bezier(.5, -1.00, .75, 1); + --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1); + --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5); + --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5); + --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5); + --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5); + --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5); --ease-step-1: steps(2); --ease-step-2: steps(3); --ease-step-3: steps(4); diff --git a/src/props.easing.js b/src/props.easing.js index 56d3b80d..e21cb06f 100644 --- a/src/props.easing.js +++ b/src/props.easing.js @@ -23,17 +23,23 @@ export default { '--ease-in-out-4': 'cubic-bezier(.7, 0, .3, 1)', '--ease-in-out-5': 'cubic-bezier(.9, 0, .1, 1)', - '--ease-elastic-1': 'cubic-bezier(.5, .75, .75, 1.25)', - '--ease-elastic-2': 'cubic-bezier(.5, 1, .75, 1.25)', - '--ease-elastic-3': 'cubic-bezier(.5, 1.25, .75, 1.25)', - '--ease-elastic-4': 'cubic-bezier(.5, 1.5, .75, 1.25)', - '--ease-elastic-5': 'cubic-bezier(.5, 1.75, .75, 1.25)', + '--ease-elastic-out-1': 'cubic-bezier(.5, .75, .75, 1.25)', + '--ease-elastic-out-2': 'cubic-bezier(.5, 1, .75, 1.25)', + '--ease-elastic-out-3': 'cubic-bezier(.5, 1.25, .75, 1.25)', + '--ease-elastic-out-4': 'cubic-bezier(.5, 1.5, .75, 1.25)', + '--ease-elastic-out-5': 'cubic-bezier(.5, 1.75, .75, 1.25)', - '--ease-squish-1': 'cubic-bezier(.5, -.1, .1, 1.5)', - '--ease-squish-2': 'cubic-bezier(.5, -.3, .1, 1.5)', - '--ease-squish-3': 'cubic-bezier(.5, -.5, .1, 1.5)', - '--ease-squish-4': 'cubic-bezier(.5, -.7, .1, 1.5)', - '--ease-squish-5': 'cubic-bezier(.5, -.9, .1, 1.5)', + '--ease-elastic-in-1': 'cubic-bezier(.5, -0.25, .75, 1)', + '--ease-elastic-in-2': 'cubic-bezier(.5, -0.50, .75, 1)', + '--ease-elastic-in-3': 'cubic-bezier(.5, -0.75, .75, 1)', + '--ease-elastic-in-4': 'cubic-bezier(.5, -1.00, .75, 1)', + '--ease-elastic-in-5': 'cubic-bezier(.5, -1.25, .75, 1)', + + '--ease-elastic-in-out-1': 'cubic-bezier(.5, -.1, .1, 1.5)', + '--ease-elastic-in-out-2': 'cubic-bezier(.5, -.3, .1, 1.5)', + '--ease-elastic-in-out-3': 'cubic-bezier(.5, -.5, .1, 1.5)', + '--ease-elastic-in-out-4': 'cubic-bezier(.5, -.7, .1, 1.5)', + '--ease-elastic-in-out-5': 'cubic-bezier(.5, -.9, .1, 1.5)', '--ease-step-1': 'steps(2)', '--ease-step-2': 'steps(3)', diff --git a/test/basic.test.cjs b/test/basic.test.cjs index 6aaa5805..f373abca 100644 --- 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, 1612) + t.is(Object.keys(OpenProps).length, 1622) }) test('Import should have animations', async t => { @@ -24,7 +24,7 @@ test('Import should have colors', async t => { }) test('JSON Import should have colors', async t => { - t.is(Object.keys(OPtokens).length, 419) + t.is(Object.keys(OPtokens).length, 424) t.assert(Object.keys(OPtokens).includes('--orange-0')) })