2c:null 2d:["$","title",null,{"children":"Observable, GSAP and SVG | Max Graze | Observable"}] 32:T58a,md ` ### Step 3: Make your animation In a new cell, start your animation and select the elements you want to move. There are a few different methods to select. Either by using \`querySelector\` to select elements from within your chart's cell, or you can use it directly in your GSAP animation. **Do not use \`d3.select\`**. \`\`\`js let demo = svg.querySelectorAll('.demo') \`\`\` or \`\`\`js gsap.to('.demo', ..... ); \`\`\` The following don't work: \`\`\`js let demo = d3.select(svg).selectAll('.demo') let demo = d3.selectAll('.demo') \`\`\` We have to set our boxes to have an opacity of 0, so they don't show up right away. \`\`\`js gsap.set(demo, {opacity: 0}) \`\`\` Check the console to see what these select. Then we create our little stagger animation. Since we are using buttons to prototype it, I've added \`paused\` so that it doesn't play right away. I've used \`gsap.to\` and so I write the state that I want the animation to go to. \`\`\`js const anim = gsap.to(demo, { paused: true, opacity: 1, stagger: 0.5 }); \`\`\` ### Gotchas: Be careful with prototyping your tween in the reactive notebooks. If you apply a style change and then want to get rid of it, you will likely have to refresh the page to see your tween revert to how it was before. If all else fails, reload the notebook. #### Exercise: Try changing the code to achieve the same animation, but with \`gsap.from\`. `33:T410,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() }34:T619,scatter = { { /////Selections///// let xAxis = plotScatter.querySelectorAll('[aria-label="x-axis"] text') let xText = xAxis[xAxis.length- 1] let yAxis = plotScatter.querySelectorAll('[aria-label="y-axis"] text') let yText = yAxis[yAxis.length- 1] let plotCircles = plotScatter.querySelectorAll('circle') let sepalButton = document.getElementById("sepal") let petalButton = document.getElementById("petal") /////Set the text opacity to 0//// gsap.set(yText, {opacity: 0}) gsap.set(xText, {opacity: 0}) gsap.set(plotCircles, {opacity: 0}) ////Register TextPlugin///// gsap.registerPlugin(TextPlugin); ////Question Time///// //Do we make a timeline? Do we put our animation directly in the buttons? sepalButton.onclick = () => { gsap.to('circle', { duration: 2, opacity: 1, cx: index => xScale(flowerData[index]["sepalLength"]), //access the index unlike data cy: index => yScale(flowerData[index]["sepalWidth"]), ease: "circ" }) gsap.to(xText, {text:"sepalLength →", opacity:1}) gsap.to(yText, {text:"↑ sepalWidth", opacity:1}) } petalButton.onclick = () => { gsap.to('circle', { duration: 2, opacity: 1, cx: index => xScale(flowerData[index]["petalLength"]), cy: index => yScale(flowerData[index]["petalWdith"]), ease: "circ" }) gsap.to(xText, {text:"petalLength →"}) gsap.to(yText, {text:"↑ petalWidth"}) } // sepal.onclick = () => sepalAnim.play() // petal.onclick = () => petalAnim.play() } }35:[] 30:{"id":"fab72ce526ae160e","slug":null,"title":"Observable, GSAP and SVG","thumbnail":"326336a4419b430e7d01176dd90d4f16587374d9902cbf5345f7e0ed5e9f1316","access_level":"public","create_time":"$D2022-10-21T21:38:11.585Z","update_time":"$D2022-11-03T23:33:14.134Z","view_time":null,"first_public_time":"$D2022-10-26T16:46:01.414Z","has_unpublished_edits":null,"fork":true,"stars":17,"starred":false,"owner":{"type":"team","id":"998e3f48dc296646","login":"datagrazing","name":"Max Graze","avatar_url":"https://avatars-next.observableusercontent.com/f69d8a810962426c04ba3ee76a79f7dfb2fc875b2c2d768f60d2084049a4dcdc","tier":"starter_2024"},"version":1382,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c2305a37ae74c4b","login":"datagrazing","name":"Max Graze","avatar_url":"https://avatars-next.observableusercontent.com/f69d8a810962426c04ba3ee76a79f7dfb2fc875b2c2d768f60d2084049a4dcdc","tier":null}],"members":[{"type":"individual","id":"4c2305a37ae74c4b","login":"datagrazing","name":"Max Graze","avatar_url":"https://avatars-next.observableusercontent.com/f69d8a810962426c04ba3ee76a79f7dfb2fc875b2c2d768f60d2084049a4dcdc","tier":null,"role":"editor"}],"comments":[{"id":"6c4c3aca3e16ca35","reply_to_id":null,"content":"FYI: d3.selectAll('.demo')._groups[0] = svg.querySelectorAll('.demo')","create_time":"$D2022-10-26T17:08:20.147Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"1d3988d482a8ec0f","login":"mariodelgadosr","name":"Mario Delgado ","avatar_url":"https://avatars-next.observableusercontent.com/2d2982ad09c4ca9dfd6570810ae00301e0db6ef798c4f7025ea03d4325d4807d","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Observable, GSAP and SVG","cells":[{"id":0,"value":"# Observable, GSAP and SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":747,"value":"md ` \nThere are some hiccups you might experience when trying to integrate GSAP into Observable notebooks. \n\nWe will be looking at: \n- Selections\n- Coding GSAP in a reactive notebook\n\nUsing' GSAP's:\n- Staggers\n- GSAP's TextPlugin\n- GSAP's ScrollTrigger\n\nBy using waffle charts and scatterplots made with D3.js & Plot.\n\n### Step 1: Import GSAP\n\\`\\`\\`js\ngsap = gs.gsap\ngs = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js\")\n\\`\\`\\`\n\n### Step 2: Make chart\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"demo = {\n /////////////////////////////////////\n /////////// Build the waffle ////////\n /////////////////////////////////////\n let numCols = 4\n let numRows = 4\n let waffleSize = 600\n let height = width/4\n let data = d3.range(numCols*numRows)\n const svg = d3\n .create('svg')\n .attr(\"viewBox\", [0,0, width, height])\n\n \n let scale = d3.scaleBand()\n\t\t.range([0,waffleSize])\n\t\t.domain(d3.range(numCols))\n .padding(0.1)\n\n const cellSize = scale.bandwidth()\n\n \n // make a grid to put the figures in\n\n\n const rects = svg.selectAll('.demo')\n .data(data)\n .join('rect')\n .attr(\"class\", \"demo1\")\n .attr(\"x\", d => scale(d%numCols))\n .attr(\"y\", d => height/4)\n // .attr(\"y\", d => scale(Math.floor(d/numCols)))\n .attr(\"rx\", 3)\n .attr(\"ry\", 3)\n .attr(\"width\", cellSize)\n .attr(\"height\", cellSize) \n .style('fill', \"cornflowerblue\")\n .attr('stroke', 'white')\n .attr('stroke-linecap', 'round')\n .attr('stroke-width', '3')\n .style('scale', 1)\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"

\n \n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"svg = {\n /////////////////////////////////////\n /////////// Build the waffle ////////\n /////////////////////////////////////\n let numCols = 4\n let numRows = 4\n let waffleSize = 600\n let height = width/4\n let data = d3.range(numCols*numRows)\n const svg = d3\n .create('svg')\n .attr(\"viewBox\", [0,0, width, height])\n\n \n let scale = d3.scaleBand()\n\t\t.range([0,waffleSize])\n\t\t.domain(d3.range(numCols))\n .padding(0.1)\n\n const cellSize = scale.bandwidth()\n\n \n // make a grid to put the figures in\n\n\n const rects = svg.selectAll('.demo')\n .data(data)\n .join('rect')\n .attr(\"class\", \"demo\")\n .attr(\"x\", d => scale(d%numCols))\n .attr(\"y\", d => height/4)\n // .attr(\"y\", d => scale(Math.floor(d/numCols)))\n .attr(\"rx\", 3)\n .attr(\"ry\", 3)\n .attr(\"width\", cellSize)\n .attr(\"height\", cellSize) \n .style('fill', \"cornflowerblue\")\n .attr('stroke', 'white')\n .attr('stroke-linecap', 'round')\n .attr('stroke-width', '3')\n .style('scale', 1)\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1300,"value":"selectors = {\n\nconsole.log(\"d3.select(svg).selectAll('.demo')\", d3.select(svg).selectAll('.demo'))\nconsole.log(\"d3.selectAll('.demo')\", d3.selectAll('.demo'))\nconsole.log(\"svg.querySelectorAll('.demo')\", svg.querySelectorAll('.demo'))\nconsole.log(\"gsap.utils.toArray('.demo')\", gsap.utils.toArray('.demo'))\n\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":795,"value":"That was pretty simple. What about a Plot scatter plot? ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":979,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":975,"value":"plotScatter = {\n return Plot.plot({\n x: {\ndomain: [0,10]\n },\n y: {\ndomain: [0,10]\n },\n marks: [\n\n Plot.dot(flowerData, {x: \"sepalLength\", y: \"sepalWidth\"})\n ]\n})\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":973,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"buttons","database":"$undefined"},{"id":400,"value":"timelineChart = {\n const svg = d3.create(\"svg\")\n .style(\"cursor\", \"default\")\n .attr(\"viewBox\", [0, 0, width, width/1.5]);\n \n const g = svg.selectAll(\".waffle\") \n .data(waffles)\n .join(\"g\")\n .attr(\"class\", \"waffle\");\n \n const cellSize = waffleScale.bandwidth();\n const half = cellSize / 2;\n const cells = \n g\n .selectAll('rect')\n .data(d => d)\n .join('rect')\n .attr('class', 'waffleCells')\n .attr('id', d => nameScale(d.index))\n .attr('opacity', 0)\n .attr(\"fill\", d => d.index === -1 ? \"#ddd\" : colorScale(d.index));\n \n cells.attr(\"x\", d => waffleScale(d.x))\n .attr(\"y\", 0)\n .attr(\"rx\", 3).attr(\"ry\", 3)\n .attr(\"width\", cellSize).attr(\"height\", cellSize) \n .attr(\"y\", d => waffleScale(d.y) + 0); \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"\ntimeline = {\n let waffles = timelineChart.querySelectorAll('.waffle .waffleCells')\n\n gsap.set(waffles, {opacity: 0})\n\n let anim \n anim = gsap.timeline({ paused: true })\n\n anim.to(waffles, {\n opacity: 1,\n stagger: {\n grid: \"auto\",\n from: \"end\",\n axis: \"y\",\n each: .2\n }\n })\n const play = document.querySelector(\"#play\");\n const pause = document.querySelector(\"#pause\");\n const restart = document.querySelector(\"#restart\");\n const reverse = document.querySelector(\"#reverse\");\n play.onclick = () => anim.play();\n restart.onclick = () => anim.restart()\n pause.onclick = () => anim.pause();\n reverse.onclick = () => anim.reverse();\n\n\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":" ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1255,"value":"scrolltriggerChart = {\n const svg = d3.create(\"svg\")\n .style(\"cursor\", \"default\")\n .attr(\"viewBox\", [0, 0, width, width/1.5]);\n \n const g = svg.selectAll(\".waffle2\") \n .data(waffles)\n .join(\"g\")\n .attr(\"class\", \"waffle2\");\n \n const cellSize = waffleScale.bandwidth();\n const half = cellSize / 2;\n const cells = \n g\n .selectAll('rect')\n .data(d => d)\n .join('rect')\n .attr('class', 'waffleCells2')\n .attr('opacity', 0)\n .attr(\"fill\", d => d.index === -1 ? \"#ddd\" : colorScale(d.index));\n \n cells.attr(\"x\", d => waffleScale(d.x))\n .attr(\"y\", 0)\n .attr(\"rx\", 3).attr(\"ry\", 3)\n .attr(\"width\", cellSize).attr(\"height\", cellSize) \n .attr(\"y\", d => waffleScale(d.y) + 0); \n let play = document.querySelector(\".scrolltrigger\")\nplay.onclick = () => scrolltriggerVersion()\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"function scrolltriggerVersion() {\n gsap.registerPlugin(ScrollTrigger);\n let anim = gsap.timeline()\n anim.to('.waffle2 .waffleCells2', {\n scrollTrigger: {\n once: true,\n trigger :\n ScrollTrigger.batch('.waffle2 .waffleCells2', {\n onEnter: batch => {\n batch.forEach((waffle, index) => gsap.to(waffle, {\n opacity: 1, \n y: 0, \n scale: 1, \n stagger: {\n each: .5\n },\n delay: index * 0.1\n }))\n },\n \n})\n },\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"## Useful Resources\n- [Beware of d3.select on Observable](https://observablehq.com/@tophtucker/beware-d3-select-on-observable)\n- [GSAP Express](https://www.creativecodingclub.com/courses/take/FreeGSAP3Express/texts/16605508-welcome-to-the-course)\n- [How to Animate on the Web with Greensock](https://css-tricks.com/how-to-animate-on-the-web-with-greensock/)\n- [Greensock Learning](https://greensock.com/learning/)\n- [motionPathPlugin](https://greensock.com/motionpath/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"ghibli = d3.json(\"https://raw.githubusercontent.com/Laboratoria/CDMX011-data-lovers/master/src/data/ghibli/ghibli.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"colorScale = d3.scaleOrdinal(orange_teal )\n.domain(d3.range(species.length))\n// .range(colorPalette)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"nameScale = d3.scaleOrdinal(species.map(d => d.species))\n.domain(d3.range(species.length))\n// .range(colorPalette)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"waffleScale = d3.scaleBand()\n .domain(d3.range(10))\n .range([0, waffleSize])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"margin = ({top: 50, right: 50, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"plotHeight = 396","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"xScale = d3.scaleLinear()\n .domain([0, 10])\n .range([margin.left, 640 - margin.left])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"yScale = d3.scaleLinear()\n .domain([0,10])\n .range([plotHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"waffles = {\n const array = [];\n const max = species.length -1 ; \n let index = 0, curr = 1, \n accu = Math.round(species[0].pct), waffle = [];\n \n for (let y = 9; y >= 0; y--)\n for (let x = 0; x < 10; x ++) {\n if (curr > accu && index < max) {\n let r = species[++index].pct;\n while(r === 0 && index < max) r = species[++index].pct;\n accu += r;\n }\n waffle.push({x, y, index});\n curr++;\n } \n array.push(waffle);\n \n \n return array;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"height = width/1.3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"species = {\nlet arr = ([\n {species: \"human\", count:\t130},\n {species : \"animal\", count:\t22},\n {species : \"supernatural\", count:\t16},\n]\n )\n return arr.map(d => ({\nspecies: d.species,\ncount: d.count,\npct: +(d.count/168*100).toFixed(0)\n\n }))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"waffleSize = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"orange_teal = [d3.rgb(228,141,49), d3.rgb(63, 171, 171), d3.rgb(44,49,122), d3.rgb(251, 240, 202)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1101,"value":"flowerData = (await require(\"@observablehq/iris\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"## GSAP Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1222,"value":"TextPlugin = tp.TextPlugin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"ScrollTrigger = st.ScrollTrigger","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"gs = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1217,"value":"tp = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/TextPlugin.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"st = require('gsap@3.9.1/dist/ScrollTrigger.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 31:"$30:body"