Palette in Hanoi.
{
await visibility();
const div = html`<div>${logo()}</div>`;
// Re-run cell to restart animation
const tween = gsap.to(div.querySelector("#logo"), { duration: 2, x: 300 });
// Kills the animation and releases it to garbage collection as the cell is re-evaluated
invalidation.then(() => tween.kill());
return div;
}
{
await visibility();
const div = html`<div>${logo()}</div>`;
// Re-run cell to restart animation
const tween = gsap.to(div.querySelector("#logo"), {
duration: 2, // in seconds
x: 300,
backgroundColor: "orange",
borderRadius: "20%",
border: "5px solid black"
});
invalidation.then(() => tween.kill());
return div;
}
{
await visibility();
const div = html`<div>${logo()}</div>`;
// Re-run cell to restart animation
const tween = gsap.to(div.querySelector("#logo"), {
duration: 2,
x: 300,
backgroundColor: "orange",
borderRadius: "20%",
border: "5px solid black",
ease: "bounce"
});
invalidation.then(() => tween.kill());
return div;
}
{
await visibility();
const div = html`<div>${logo()}${astronaut()}</div>`;
// First, move the objects away from one another to better illustrate rotation
const tween1 = gsap.to(div.querySelector("#logo"), {
duration: 0, // No animation for moving
x: 300
});
const tween2 = gsap.to(div.querySelector("#astronaut"), {
duration: 0,
x: 400
});
// Re-run cell to restart animation
const selection = div.querySelectorAll("#logo, #astronaut");
const tween3 = gsap.set(selection, {
transformOrigin: "50% 50%"
});
const tween4 = gsap.to(selection, {
duration: 2,
rotation: 360
});
invalidation.then(() => {
tween1.kill();
tween2.kill();
tween3.kill();
tween4.kill();
});
return div;
}
{
await visibility();
const div = html`<div style="font-family:var(--sans-serif); font-variant-numeric:tabular-nums;">`;
// Re-run cell to restart animation
const myObject = { value: 0 };
const tween = gsap.to(myObject, {
duration: 2,
value: 360,
onUpdate: () => {
div.textContent = myObject.value;
}
});
invalidation.then(() => tween.kill());
return div;
}
{
await visibility();
const div = html`<div>${logo()}</div>`;
// Re-run cell to restart animation
const tween = gsap.from(div.querySelector("#logo"), {
duration: 1.5,
opacity: 0,
scale: 0.3,
ease: "back"
});
invalidation.then(() => tween.kill());
return div;
}
{
await visibility();
const div = html`
<div style="display:inline-flex;">
${circles(5)}
</div>`;
// Re-run cell or use checkbox to restart animation
const tween = gsap.from(div.querySelectorAll(".circle"), {
duration: 1,
opacity: 0,
y: 100,
stagger: stagger ? 0.25 : 0 // delay, in seconds
});
invalidation.then(() => tween.kill());
return div;
}
{
await visibility();
const div = html`
<div style="display:inline-flex; overflow:hidden;">
${circles(8)}
</div>`;
// Re-run cell to restart animation
const tween = gsap.from(div.querySelectorAll(".circle"), {
duration: 1,
opacity: 0,
y: "random(-100, 100)", // same as () => Math.random() * 200 - 100
stagger: 0.25
});
invalidation.then(() => tween.kill());
return div;
}
{
await visibility();
const div = html`
<div style="display:inline-flex; overflow:hidden;">
${circles(8)}
</div>`;
const tween = gsap.from(div.querySelectorAll(".circle"), {
duration: 1,
opacity: 0,
y: -100,
stagger: 0.25 // delay, in seconds
});
const play = document.querySelector("#play");
const pause = document.querySelector("#pause");
const resume = document.querySelector("#resume");
const restart = document.querySelector("#restart");
const reverse = document.querySelector("#reverse");
const scaleUp = document.querySelector("#scale-up");
const scaleSame = document.querySelector("#scale-same");
const scaleDown = document.querySelector("#scale-down");
play.onclick = () => tween.play();
pause.onclick = () => tween.pause();
resume.onclick = () => tween.resume();
restart.onclick = () => tween.restart();
reverse.onclick = () => tween.reverse();
scaleUp.onclick = () => tween.timeScale(4);
scaleSame.onclick = () => tween.timeScale(1);
scaleDown.onclick = () => tween.timeScale(0.2);
invalidation.then(() => tween.kill());
return div;
}
tlShowcase = {
await visibility();
const div = html`
<div style="display:inline-flex;">
${logo()}
<div style="overflow:hidden; display:inline-flex;">${circles(8)}</div>
</div>`;
// Re-run cell to restart animation
const tl = gsap.timeline({
// Uncomment to see what happens
//repeat: 2,
//yoyo: true,
});
tl.from(div.querySelector("#logo"), {
data: { name: "Logo" },
duration: 2.5,
opacity: 0,
scale: 0.3,
ease: "back"
});
// Uncomment to see what happens
/*
tl.to(div.querySelector("#logo"), {
data: { name: "Logo (rotate)" },
duration: 1,
rotation: 360
});
*/
tl.from(div.querySelectorAll(".circle"), {
data: { name: "Circles" },
duration: 1,
opacity: 0,
y: 100,
stagger: 0.15 // What happens to duration?
});
// Uncomment to see what happens
/*
tl.addLabel("circlesOutro", "+=0.75");
tl.to(
div.querySelectorAll(".circle"),
{
data: { name: "Circles (disappear)" },
duration: 1,
opacity: 0,
y: () => (Math.round(Math.random()) ? 100 : -100),
stagger: 0.15
},
"circlesOutro"
);
*/
mutable playing = true;
tl.then(() => (mutable playing = false));
invalidation.then(() => tl.kill());
return Object.assign(div, { tl });
}
mutable playing = false
t = {
const tl = tlShowcase.tl;
yield tlShowcase.tl.time();
while (playing) {
yield tlShowcase.tl.time();
}
}
gsap = gs.gsap
gs = require('gsap@3.5.0/dist/gsap.js')
d3 = require("d3-scale-chromatic@1", "d3-axis@1", "d3-scale@3", "d3-selection@1", "d3-format@1")
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.
