The avatar for @datagrazing
Max Graze
Public
GSAP
Edited
Nov 9, 2022
Fork of Observable, GSAP and SVG
•
1 fork
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
simpleDemo = {
/////////////////////////////////////
///////////// Animation /////////////
/////////////////////////////////////
let demo =svg.querySelectorAll('.demo')

//First let's select the cell with our chart, then the items that we want to animate and save it in a variable
gsap.set(demo, {opacity: 0})
const anim = gsap.to(demo, {opacity:1, stagger:1})

/////////////// Control the animation //////////////////
// Button controls to be able to play/pause etc the gsap animation
const restart = document.querySelector("#restartDemo");
restart.onclick = () => anim.restart()

}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more