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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more