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.

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

Logical Animation Directions #422

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
1 change: 1 addition & 0 deletions build/props.js
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ buildPropsStylesheet({
// gen index.css
const entry = fs.createWriteStream(`../src/${pfx}index.css`)
entry.write(`@import 'props.media.css';
@import 'props.supports.css';
`)
Object.keys(mainbundle).forEach(filename => {
entry.write(`@import '${filename}';\n`)
Expand Down
9 changes: 7 additions & 2 deletions build/to-stylesheet.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@ export const buildPropsStylesheet = ({filename,props}, {selector,prefix}) => {

let appendedMeta = ''

if (filename.includes('shadows') || filename.includes('animations')) {
if (filename.includes('shadows')) {
file.write(`@import 'props.media.css';\n\n`)
} else if(filename.includes('animations')) {
file.write(`@import 'props.media.css';\n`)
file.write(`@import 'props.supports.css';\n\n`)
}

if (filename.includes('shadows')) {
Expand Down Expand Up @@ -40,7 +43,9 @@ ${dark_propsMeta}

if (prop.includes('animation')) {
let keyframes = props[`${prop}-@`]
appendedMeta += keyframes
if(keyframes != undefined) {
appendedMeta += keyframes
}
}

if (prefix && prefix !== "''") {
Expand Down
4 changes: 2 additions & 2 deletions docsite/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -1386,10 +1386,10 @@ input[type="range"] {
}

.shake-fade-combo {
--animation-slide-left-fade-in-shake-y:
--animation-slide-start-fade-in-shake-y:
var(--animation-shake-y),
var(--animation-fade-in),
var(--animation-slide-in-left);
var(--animation-slide-in-start);
}

.push-out-combo {
Expand Down
26 changes: 13 additions & 13 deletions docsite/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2467,8 +2467,8 @@ <h5>The Props</h5>
--animation-fade-{in,out}-bloom
--animation-shake-{x,y}

--animation-slide-out-{up,down,left,right}
--animation-slide-in-{up,down,left,right}
--animation-slide-out-{up,down,start,end}
--animation-slide-in-{up,down,start,end}
Comment on lines +2470 to +2471
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
--animation-slide-out-{up,down,start,end}
--animation-slide-in-{up,down,start,end}
--animation-slide-out-{up,down,left,right,start,end}
--animation-slide-in-{up,down,left,right,start,end}


--animation-spin
--animation-ping
Expand All @@ -2487,7 +2487,7 @@ <h5>Keyframe Effect Examples</h5>
to { opacity: 1 }
}

@keyframes op-slide-out-right {
@keyframes op-slide-out-end {
to { transform: translateX(100%) }
}

Expand Down Expand Up @@ -2608,8 +2608,8 @@ <h6>Slide Out Down</h6>
</button>
</div>

<div class="animation-demo-target" data-animation="slide-out-right">
<h6>Slide Out Right</h6>
<div class="animation-demo-target" data-animation="slide-out-end">
<h6>Slide Out End</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"/>
Expand All @@ -2618,8 +2618,8 @@ <h6>Slide Out Right</h6>
</button>
</div>

<div class="animation-demo-target" data-animation="slide-out-left">
<h6>Slide Out Left</h6>
<div class="animation-demo-target" data-animation="slide-out-start">
<h6>Slide Out Start</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"/>
Expand Down Expand Up @@ -2648,8 +2648,8 @@ <h6>Slide In Down</h6>
</button>
</div>

<div class="animation-demo-target" data-animation="slide-in-right">
<h6>Slide In Right</h6>
<div class="animation-demo-target" data-animation="slide-in-end">
<h6>Slide In End</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"/>
Expand All @@ -2658,8 +2658,8 @@ <h6>Slide In Right</h6>
</button>
</div>

<div class="animation-demo-target" data-animation="slide-in-left">
<h6>Slide In Left</h6>
<div class="animation-demo-target" data-animation="slide-in-start">
<h6>Slide In Start</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
<use href="#play-icon"/>
Expand Down Expand Up @@ -2778,7 +2778,7 @@ <h6>Slide Fade</h6>

<div class="animation-pair">
<!-- data-starting-styles="opacity:0" -->
<div class="animation-demo-target shake-fade-combo" data-animation="slide-left-fade-in-shake-y">
<div class="animation-demo-target shake-fade-combo" data-animation="slide-start-fade-in-shake-y">
<h6>Shake In</h6>
<button class="play-button">
<svg viewBox="0 0 20 20">
Expand All @@ -2793,7 +2793,7 @@ <h6>Shake In</h6>
animation:
var(--animation-shake-y),
var(--animation-fade-in),
var(--animation-slide-in-left);
var(--animation-slide-in-start);
}
</code></pre>
</div>
Expand Down
1 change: 1 addition & 0 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import 'props.media.css';
@import 'props.supports.css';
@import 'props.fonts.css';
@import 'props.sizes.css';
@import 'props.easing.css';
Expand Down
29 changes: 17 additions & 12 deletions src/props.animations.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import 'props.media.css';
@import 'props.supports.css';

:where(html) {
--animation-fade-in: fade-in .5s var(--ease-3);
Expand All @@ -9,12 +10,16 @@
--animation-scale-down: scale-down .5s var(--ease-3);
--animation-slide-out-up: slide-out-up .5s var(--ease-3);
--animation-slide-out-down: slide-out-down .5s var(--ease-3);
--animation-slide-out-right: slide-out-right .5s var(--ease-3);
--animation-slide-out-left: slide-out-left .5s var(--ease-3);
--animation-slide-out-end: slide-out-end .5s var(--ease-3);
--animation-slide-out-right: var(--animation-slide-out-end);
--animation-slide-out-start: slide-out-start .5s var(--ease-3);
--animation-slide-out-left: var(--animation-slide-out-start);
Comment on lines +13 to +16
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice job matching these all up 👍🏻

--animation-slide-in-up: slide-in-up .5s var(--ease-3);
--animation-slide-in-down: slide-in-down .5s var(--ease-3);
--animation-slide-in-right: slide-in-right .5s var(--ease-3);
--animation-slide-in-left: slide-in-left .5s var(--ease-3);
--animation-slide-in-end: slide-in-end .5s var(--ease-3);
--animation-slide-in-right: var(--animation-slide-in-end);
--animation-slide-in-start: slide-in-start .5s var(--ease-3);
--animation-slide-in-left: var(--animation-slide-in-start);
--animation-shake-x: shake-x .75s var(--ease-out-5);
--animation-shake-y: shake-y .75s var(--ease-out-5);
--animation-spin: spin 2s linear infinite;
Expand Down Expand Up @@ -53,23 +58,23 @@
@keyframes slide-out-down {
to { transform: translateY(100%) }
}
@keyframes slide-out-right {
to { transform: translateX(100%) }
@keyframes slide-out-end {
to { transform: translateX(calc(100% * var(--isLTR))) }
}
@keyframes slide-out-left {
to { transform: translateX(-100%) }
@keyframes slide-out-start {
to { transform: translateX(calc(-100% * var(--isLTR))) }
}
@keyframes slide-in-up {
from { transform: translateY(100%) }
}
@keyframes slide-in-down {
from { transform: translateY(-100%) }
}
@keyframes slide-in-right {
from { transform: translateX(-100%) }
@keyframes slide-in-end {
from { transform: translateX(calc(-100% * var(--isLTR))) }
}
@keyframes slide-in-left {
from { transform: translateX(100%) }
@keyframes slide-in-start {
from { transform: translateX(calc(100% * var(--isLTR))) }
}
@keyframes shake-x {
0%, 100% { transform: translateX(0%) }
Expand Down
40 changes: 22 additions & 18 deletions src/props.animations.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,18 @@ export default {
@keyframes slide-out-down {
to { transform: translateY(100%) }
}`,
"--animation-slide-out-right": "slide-out-right .5s var(--ease-3)",
"--animation-slide-out-right-@": `
@keyframes slide-out-right {
to { transform: translateX(100%) }
}`,
"--animation-slide-out-left": "slide-out-left .5s var(--ease-3)",
"--animation-slide-out-left-@": `
@keyframes slide-out-left {
to { transform: translateX(-100%) }
}`,
"--animation-slide-out-end": "slide-out-end .5s var(--ease-3)",
"--animation-slide-out-end-@": `
@keyframes slide-out-end {
to { transform: translateX(calc(100% * var(--isLTR))) }
}`,
"--animation-slide-out-right": "var(--animation-slide-out-end)",
"--animation-slide-out-start": "slide-out-start .5s var(--ease-3)",
"--animation-slide-out-start-@": `
@keyframes slide-out-start {
to { transform: translateX(calc(-100% * var(--isLTR))) }
}`,
"--animation-slide-out-left": "var(--animation-slide-out-start)",
"--animation-slide-in-up": "slide-in-up .5s var(--ease-3)",
"--animation-slide-in-up-@": `
@keyframes slide-in-up {
Expand All @@ -75,16 +77,18 @@ export default {
@keyframes slide-in-down {
from { transform: translateY(-100%) }
}`,
"--animation-slide-in-right": "slide-in-right .5s var(--ease-3)",
"--animation-slide-in-right-@": `
@keyframes slide-in-right {
from { transform: translateX(-100%) }
"--animation-slide-in-end": "slide-in-end .5s var(--ease-3)",
"--animation-slide-in-end-@": `
@keyframes slide-in-end {
from { transform: translateX(calc(-100% * var(--isLTR))) }
}`,
"--animation-slide-in-left": "slide-in-left .5s var(--ease-3)",
"--animation-slide-in-left-@": `
@keyframes slide-in-left {
from { transform: translateX(100%) }
"--animation-slide-in-right": "var(--animation-slide-in-end)",
"--animation-slide-in-start": "slide-in-start .5s var(--ease-3)",
"--animation-slide-in-start-@": `
@keyframes slide-in-start {
from { transform: translateX(calc(100% * var(--isLTR))) }
}`,
"--animation-slide-in-left": "var(--animation-slide-in-start)",
"--animation-shake-x": "shake-x .75s var(--ease-out-5)",
"--animation-shake-x-@": `
@keyframes shake-x {
Expand Down
11 changes: 9 additions & 2 deletions src/props.supports.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,16 @@
:where(html) {
--isLTR: 1;
--isRTL: -1;

&:dir(rtl) {
/* PostCSS compiles this to [dir="rtl"] :where(html) for older browsers, which doesn't work */
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adding 'dir-pseudo-class': false, to https://github.com/argyleink/open-props/blob/main/postcss.config.cjs#L17 will resolve this. postcss is attempting to polyfill it and we want just nesting.

--isLTR: -1;
--isRTL: 1;
}

&[dir="rtl"] {
/* Force the dir attribute selector to attach to :where(html) */
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a nice backup to using :dir() anyway, we'll do it ourselves in our own nesting way and not use the polyfill that's part of postcss-preset-env

--isLTR: -1;
--isRTL: 1;
}
}
}
2 changes: 1 addition & 1 deletion test/basic.test.cjs
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, 1642)
t.is(Object.keys(OpenProps).length, 1650)
})

test('Import should have animations', async t => {
Expand Down
Loading