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 88418d6a..9f453685 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -119,7 +119,7 @@

CSS variables.

- v1.5.16 + v1.6.0
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} + + /* will be removed in v2 */ + --ease-elastic-{1-5} /* deprecated; equal to elastic-out */ + --ease-squish-{1-5} /* deprecated; equal to elastic-in-out */ @@ -2352,7 +2357,26 @@
Ease In Out
-
Ease Elastic
+
Ease Elastic Out
+ +
+
+
ease-elastic-out-1
+
ease-elastic-out-2
+
ease-elastic-out-3
+
ease-elastic-out-4
+
ease-elastic-out-5
+
+
+ +
+
+
Ease Elastic In
-
ease-elastic-1
-
ease-elastic-2
-
ease-elastic-3
-
ease-elastic-4
-
ease-elastic-5
+
ease-elastic-in-1
+
ease-elastic-in-2
+
ease-elastic-in-3
+
ease-elastic-in-4
+
ease-elastic-in-5
-
Ease Squish
+
Ease Elastic In Out
-
ease-squish-1
-
ease-squish-2
-
ease-squish-3
-
ease-squish-4
-
ease-squish-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 +2769,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 +2815,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/package.json b/package.json index 8e084174..43043451 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "name": "open-props", "author": "Adam Argyle", "license": "MIT", - "version": "1.5.16", + "version": "1.6.0", "repository": { "type": "git", "url": "https://github.com/argyleink/open-props" diff --git a/src/props.easing.css b/src/props.easing.css index d316ed25..d0d03626 100644 --- a/src/props.easing.css +++ b/src/props.easing.css @@ -19,21 +19,36 @@ --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); --ease-step-4: steps(7); --ease-step-5: steps(10); + --ease-elastic-1: var(--ease-elastic-out-1); + --ease-elastic-2: var(--ease-elastic-out-2); + --ease-elastic-3: var(--ease-elastic-out-3); + --ease-elastic-4: var(--ease-elastic-out-4); + --ease-elastic-5: var(--ease-elastic-out-5); + --ease-squish-1: var(--elastic-in-out-1); + --ease-squish-2: var(--elastic-in-out-2); + --ease-squish-3: var(--elastic-in-out-3); + --ease-squish-4: var(--elastic-in-out-4); + --ease-squish-5: var(--elastic-in-out-5); --ease-spring-1: linear( 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, diff --git a/src/props.easing.js b/src/props.easing.js index 56d3b80d..bb583ec9 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)', @@ -41,6 +47,18 @@ export default { '--ease-step-4': 'steps(7)', '--ease-step-5': 'steps(10)', + '--ease-elastic-1': 'var(--ease-elastic-out-1)', + '--ease-elastic-2': 'var(--ease-elastic-out-2)', + '--ease-elastic-3': 'var(--ease-elastic-out-3)', + '--ease-elastic-4': 'var(--ease-elastic-out-4)', + '--ease-elastic-5': 'var(--ease-elastic-out-5)', + + '--ease-squish-1': 'var(--elastic-in-out-1)', + '--ease-squish-2': 'var(--elastic-in-out-2)', + '--ease-squish-3': 'var(--elastic-in-out-3)', + '--ease-squish-4': 'var(--elastic-in-out-4)', + '--ease-squish-5': 'var(--elastic-in-out-5)', + '--ease-spring-1': `linear( 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, diff --git a/test/basic.test.cjs b/test/basic.test.cjs index 6aaa5805..917fe983 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, 1642) }) 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, 434) t.assert(Object.keys(OPtokens).includes('--orange-0')) })