📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Sep 24, 2021
Hello, motion one
animate = (await import('https://cdn.skypack.dev/motion@10')).animate
{
const out = html`<div class="box"></div>`
yield out;
animate(".box", { backgroundColor: "red" })
}
{
const out2 = html`<div class="box"></div>`
yield out2;
animate(
out2,
{ transform: "rotate(45deg)" },
{ duration: 0.5 },
)
}
{
const out3 = html`<div class="box"></div>`
yield out3;
animate(out3, {
transform: ["rotate(90deg)", "translateX(100px) rotate(45deg)", "none"],
})
}
html`<style>
.box{
height: 60px;
width: 60px;
border: 1px solid black;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
