Skip to content

Commit

Permalink
add initial demo of transitions
Browse files Browse the repository at this point in the history
  • Loading branch information
brainkim committed Jul 22, 2020
1 parent 9d7c506 commit 27d118b
Show file tree
Hide file tree
Showing 5 changed files with 5,263 additions and 0 deletions.
5 changes: 5 additions & 0 deletions examples/transitions/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"presets": [
"@babel/preset-react",
]
}
12 changes: 12 additions & 0 deletions examples/transitions/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>Crank.js Sandbox</title>
<meta charset="UTF-8" />
</head>

<body>
<div id="app"></div>
<script src="src/index.jsx"></script>
</body>
</html>
27 changes: 27 additions & 0 deletions examples/transitions/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "transitions",
"private": true,
"version": "1.0.0",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"eslint": {
"settings": {
"react": {
"pragma": "createElement"
}
}
},
"dependencies": {
"@bikeshaving/crank": "0.2.1"
},
"devDependencies": {
"@babel/core": "^7.0.0-0",
"@babel/preset-react": "^7.10.4",
"parcel-bundler": "^1.6.1"
},
"keywords": [],
"browserslist": ["last 1 Chrome versions"]
}
73 changes: 73 additions & 0 deletions examples/transitions/src/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/** @jsx createElement */
import {createElement} from "@bikeshaving/crank";
import {renderer} from "@bikeshaving/crank/dom";

const alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
function shuffle(arr) {
arr = arr.slice();
for (let i = arr.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[arr[i], arr[j]] = [arr[j], arr[i]];
}

return arr;
}

function randomLetters() {
return shuffle(alphabet)
.slice(0, Math.floor(Math.random() * 26))
.sort();
}

async function* Letter({letter, index}) {
let em = index * 1.3;
let node;
try {
const style = {
position: "absolute",
transition: "transform .7s",
transform: `translate(${em}em, -30px)`,
color: "green",
};
node = yield <span style={style}>{letter}</span>;
requestAnimationFrame(() => {
node.style.transform = `translate(${em}em, 0)`;
});

for await ({letter, index} of this) {
em = index * 1.3;
yield <span>{letter}</span>;
requestAnimationFrame(() => {
node.style.color = "black";
node.style.transform = `translate(${em}em, 0)`;
});
}
} finally {
if (node !== undefined) {
requestAnimationFrame(() => {
node.style.color = "red";
node.style.transform = `translate(${em}em, 30px)`;
});

await new Promise((resolve) => setTimeout(resolve, 700));
}
}
}

function* Letters() {
const interval = setInterval(() => this.refresh(), 1500);

try {
while (true) {
const letters = randomLetters().map((l, i) => (
<Letter crank-key={l} letter={l} index={i} />
));

yield <div style="margin: 50px 20px;">{letters}</div>;
}
} finally {
clearInterval(interval);
}
}

renderer.render(<Letters letter="a" />, document.body);
Loading

0 comments on commit 27d118b

Please sign in to comment.