Skip to content
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

v1.6 #421

Merged
merged 4 commits into from
Sep 29, 2023
Merged

v1.6 #421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d31f6c9
version bump
argyleink Sep 29, 2023
c326eee
Added --ease-anticipate-* easings (#419)
621alexl Sep 29, 2023
286da6d
document and create fallback
argyleink Sep 29, 2023
d453c5a
update tests
argyleink Sep 29, 2023
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
4 changes: 2 additions & 2 deletions docsite/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 > & {
Expand Down
58 changes: 41 additions & 17 deletions docsite/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ <h1><span>CSS</span> <span>variables.</span></h1>
</li>
</ul>
<small>
v1.5.16
v1.6.0
<span class="license">
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
<path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>
Expand Down Expand Up @@ -2252,10 +2252,15 @@ <h5>The Props</h5>
--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 */
</code></pre>
</div>
</div>
Expand Down Expand Up @@ -2352,7 +2357,26 @@ <h5>Ease In Out</h5>

<div class="block-wrap">
<header class="animation-control-header">
<h5>Ease Elastic</h5>
<h5>Ease Elastic Out</h5>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"/>
<use href="#pause-icon" class="hidden"/>
</svg>
</button>
</header>
<div class="ease-demo paused">
<div style="animation-timing-function: var(--ease-elastic-out-1)">ease-elastic-out-1</div>
<div style="animation-timing-function: var(--ease-elastic-out-2)">ease-elastic-out-2</div>
<div style="animation-timing-function: var(--ease-elastic-out-3)">ease-elastic-out-3</div>
<div style="animation-timing-function: var(--ease-elastic-out-4)">ease-elastic-out-4</div>
<div style="animation-timing-function: var(--ease-elastic-out-5)">ease-elastic-out-5</div>
</div>
</div>

<div class="block-wrap">
<header class="animation-control-header">
<h5>Ease Elastic In</h5>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"/>
Expand All @@ -2361,17 +2385,17 @@ <h5>Ease Elastic</h5>
</button>
</header>
<div class="ease-demo paused">
<div style="animation-timing-function: var(--ease-elastic-1)">ease-elastic-1</div>
<div style="animation-timing-function: var(--ease-elastic-2)">ease-elastic-2</div>
<div style="animation-timing-function: var(--ease-elastic-3)">ease-elastic-3</div>
<div style="animation-timing-function: var(--ease-elastic-4)">ease-elastic-4</div>
<div style="animation-timing-function: var(--ease-elastic-5)">ease-elastic-5</div>
<div style="animation-timing-function: var(--ease-elastic-in-1)">ease-elastic-in-1</div>
<div style="animation-timing-function: var(--ease-elastic-in-2)">ease-elastic-in-2</div>
<div style="animation-timing-function: var(--ease-elastic-in-3)">ease-elastic-in-3</div>
<div style="animation-timing-function: var(--ease-elastic-in-4)">ease-elastic-in-4</div>
<div style="animation-timing-function: var(--ease-elastic-in-5)">ease-elastic-in-5</div>
</div>
</div>

<div class="block-wrap">
<header class="animation-control-header">
<h5>Ease Squish</h5>
<h5>Ease Elastic In Out</h5>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"/>
Expand All @@ -2380,11 +2404,11 @@ <h5>Ease Squish</h5>
</button>
</header>
<div class="ease-demo paused">
<div style="animation-timing-function: var(--ease-squish-1)">ease-squish-1</div>
<div style="animation-timing-function: var(--ease-squish-2)">ease-squish-2</div>
<div style="animation-timing-function: var(--ease-squish-3)">ease-squish-3</div>
<div style="animation-timing-function: var(--ease-squish-4)">ease-squish-4</div>
<div style="animation-timing-function: var(--ease-squish-5)">ease-squish-5</div>
<div style="animation-timing-function: var(--ease-elastic-in-out-1)">ease-elastic-in-out-1</div>
<div style="animation-timing-function: var(--ease-elastic-in-out-2)">ease-elastic-in-out-2</div>
<div style="animation-timing-function: var(--ease-elastic-in-out-3)">ease-elastic-in-out-3</div>
<div style="animation-timing-function: var(--ease-elastic-in-out-4)">ease-elastic-in-out-4</div>
<div style="animation-timing-function: var(--ease-elastic-in-out-5)">ease-elastic-in-out-5</div>
</div>
</div>

Expand Down Expand Up @@ -2745,7 +2769,7 @@ <h6>Slide Fade</h6>
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;
}
</code></pre>
Expand Down Expand Up @@ -2791,7 +2815,7 @@ <h6>Push Out</h6>
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);
}
</code></pre>
</div>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
35 changes: 25 additions & 10 deletions src/props.easing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%,
Expand Down
38 changes: 28 additions & 10 deletions src/props.easing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,42 @@ 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)',
'--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%,
Expand Down
4 changes: 2 additions & 2 deletions test/basic.test.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand All @@ -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'))
})

Expand Down
Loading