Public
Edited
Jan 8
link = {
const link = document.createElement("link");
link.rel = "stylesheet";
link.href =
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
document.head.append(link);
await new Promise((r) => (link.onload = r));
return link;
}
animate = {
link;
return {
animated: "animate__animated",
infinite: "animate__infinite",
repeat_1: "animate__repeat-1",
repeat_2: "animate__repeat-2",
repeat_3: "animate__repeat-3",
delay_1s: "animate__delay-1s",
delay_2s: "animate__delay-2s",
delay_3s: "animate__delay-3s",
delay_4s: "animate__delay-4s",
delay_5s: "animate__delay-5s",
faster: "animate__faster",
fast: "animate__fast",
slow: "animate__slow",
slower: "animate__slower",
bounce: "animate__bounce",
flash: "animate__flash",
pulse: "animate__pulse",
rubberBand: "animate__rubberBand",
shakeX: "animate__shakeX",
shakeY: "animate__shakeY",
headShake: "animate__headShake",
swing: "animate__swing",
tada: "animate__tada",
wobble: "animate__wobble",
jello: "animate__jello",
heartBeat: "animate__heartBeat",
backInDown: "animate__backInDown",
backInLeft: "animate__backInLeft",
backInRight: "animate__backInRight",
backInUp: "animate__backInUp",
backOutDown: "animate__backOutDown",
backOutLeft: "animate__backOutLeft",
backOutRight: "animate__backOutRight",
backOutUp: "animate__backOutUp",
bounceIn: "animate__bounceIn",
bounceInDown: "animate__bounceInDown",
bounceInLeft: "animate__bounceInLeft",
bounceInRight: "animate__bounceInRight",
bounceInUp: "animate__bounceInUp",
bounceOut: "animate__bounceOut",
bounceOutDown: "animate__bounceOutDown",
bounceOutLeft: "animate__bounceOutLeft",
bounceOutRight: "animate__bounceOutRight",
bounceOutUp: "animate__bounceOutUp",
fadeIn: "animate__fadeIn",
fadeInDown: "animate__fadeInDown",
fadeInDownBig: "animate__fadeInDownBig",
fadeInLeft: "animate__fadeInLeft",
fadeInLeftBig: "animate__fadeInLeftBig",
fadeInRight: "animate__fadeInRight",
fadeInRightBig: "animate__fadeInRightBig",
fadeInUp: "animate__fadeInUp",
fadeInUpBig: "animate__fadeInUpBig",
fadeInTopLeft: "animate__fadeInTopLeft",
fadeInTopRight: "animate__fadeInTopRight",
fadeInBottomLeft: "animate__fadeInBottomLeft",
fadeInBottomRight: "animate__fadeInBottomRight",
fadeOut: "animate__fadeOut",
fadeOutDown: "animate__fadeOutDown",
fadeOutDownBig: "animate__fadeOutDownBig",
fadeOutLeft: "animate__fadeOutLeft",
fadeOutLeftBig: "animate__fadeOutLeftBig",
fadeOutRight: "animate__fadeOutRight",
fadeOutRightBig: "animate__fadeOutRightBig",
fadeOutUp: "animate__fadeOutUp",
fadeOutUpBig: "animate__fadeOutUpBig",
fadeOutTopLeft: "animate__fadeOutTopLeft",
fadeOutTopRight: "animate__fadeOutTopRight",
fadeOutBottomRight: "animate__fadeOutBottomRight",
fadeOutBottomLeft: "animate__fadeOutBottomLeft",
flipInX: "animate__flipInX",
flipInY: "animate__flipInY",
flipOutX: "animate__flipOutX",
flipOutY: "animate__flipOutY",
lightSpeedInRight: "animate__lightSpeedInRight",
lightSpeedInLeft: "animate__lightSpeedInLeft",
lightSpeedOutRight: "animate__lightSpeedOutRight",
lightSpeedOutLeft: "animate__lightSpeedOutLeft",
rotateIn: "animate__rotateIn",
rotateInDownLeft: "animate_rotateInDownLeft",
rotateInDownRight: "animate__rotateInDownRight",
rotateInUpLeft: "animate__rotateInUpLeft",
rotateInUpRight: "animate__rotateInUpRight",
rotateOut: "animate__rotateOut",
rotateOutDownLeft: "animate__rotateOutDownLeft",
rotateOutDownRight: "animate__rotateOutDownRight",
rotateOutUpLeft: "animate__rotateOutUpLeft",
rotateOutUpRight: "animate__rotateOutUpRight",
hinge: "animate__hinge",
jackInTheBox: "animate__jackInTheBox",
rollIn: "animate__rollIn",
rollOut: "animate__rollOut",
zoomIn: "animate__zoomIn",
zoomInDown: "animate__zoomInDown",
zoomInLeft: "animate_zoomInLeft",
zoomInRight: "animate__zoomInRight",
zoomInUp: "animate__zoomInUp",
zoomOut: "animate__zoomOut",
zoomOutDown: "animate__zoomOutDown",
zoomOutLeft: "animate__zoomOutLeft",
zoomOutRight: "animate__zoomOutRight",
zoomOutUp: "animate__zoomOutUp",
slideInDown: "animate__slideInDown",
slideInLeft: "animate__slideInLeft",
slideInRight: "animate__slideInRight",
slideInUp: "animate__slideInUp",
slideOutDown: "animate__slideOutDown",
slideOutLeft: "animate__slideOutLeft",
slideOutRight: "animate__slideOutRight",
slideOutUp: "animate__slideOutUp"
};
}
animated = new Proxy(animate, {
get(target, prop, receiver) {
if (typeof target[prop] == "string") {
return animate.animated + " " + target[prop];
}
return Reflect.get(...arguments);
}
})
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.
