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-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-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-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'))
})