The avatar for @datagrazing
Max Graze
Public
Edited
Nov 3, 2022
3 forks
17 stars
Insert cell
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.timeline({paused:true})
.to(demo, {opacity:1, stagger:1})
// const fadeIn = gsap.to(demo, { opacity: 1, stagger: 0.5 })

//create your animation. You can use gsap to/from or a timeline, if you want to get fancy

//say we want the last item to scale x2. How would we do that?

//Hmm...that looks weird. Let's get rid of it and replay the animation. What happens?

/////////////// Control the animation //////////////////
// Button controls to be able to play/pause etc the gsap animation
const play = document.querySelector("#playDemo");
const restart = document.querySelector("#restartDemo");
play.onclick = () => anim.play();
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
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