28:null 29:["$","title",null,{"children":"Exploring Greensock Animation | Kavya Beheraj | Observable"}] 2e:T4e1,{ let squashEls = Array.from(document.getElementsByClassName("circ-squash")) let regEls = Array.from(document.getElementsByClassName("circ-reg")) let maxDistance = width * 0.7 // Add en event listener to each element squashEls.map(el => { el.addEventListener("mouseenter", function(e) { const tl = gsap.timeline() tl.to(this, { x: 0, scaleX: 1, scaleY: 1, }) tl.to(this, { duration: 0.1, x: maxDistance / 2, scaleX: 1.5, scaleY: 0.6, ease: "slow(0.7, 0.7, false)" }) tl.to(this, { duration: 0.5, x: maxDistance, scaleX: 1, scaleY: 1, }) tl.to(this, { duration: 0.1, x: maxDistance / 2, scaleX: 1.5, scaleY: 0.6, ease: "slow(0.7, 0.7, false)" }) tl.to(this, { duration: 0.2, x: 0, scaleX: 1, scaleY: 1, }) }) }) regEls.map(el => { el.addEventListener("mouseenter", function(e) { const tl = gsap.timeline() tl.to(this, { duration: 0.5, x: 0, }) tl.to(this, { duration: 0.5, x: maxDistance, }) tl.to(this, { duration: 0.5, x: 0, }) }) }) }2f:[{"id":"d3c7623997589eb9babb2aa0649216782530796064e0d700fb04b27603744bc5dab641e5be010f136f3e81e044944289f39a7f205a58bb43521bd4a036dd85cf","href":"https://static.observableusercontent.com/files/d3c7623997589eb9babb2aa0649216782530796064e0d700fb04b27603744bc5dab641e5be010f136f3e81e044944289f39a7f205a58bb43521bd4a036dd85cf","name":"mtcars@7.csv","type":"text/csv","lastModified":1602972264127.955,"size":1015}] 2c:{"id":"75f2ff614f40b863","slug":"exploring-animation","title":"Exploring Greensock Animation","thumbnail":"7d444c0b0a3b20d95fb1aab1bfd8af19aa0ef3cfb4ecf217f0974e413f7cc48b","access_level":"public","create_time":"$D2020-10-14T13:47:20.421Z","update_time":"$D2020-10-19T19:00:40.524Z","view_time":null,"first_public_time":"$D2020-10-16T03:55:13.440Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"5a240aa53f69c5a7","login":"koffeeya","name":"Kavya Beheraj","avatar_url":"https://avatars-next.observableusercontent.com/455a20fd40ad6eb3fc145a00d68052219200256f65e4a30c52497087e4400f33","tier":"starter_2024"},"version":800,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aadc210eca456c01","login":"koffeeya","name":"Kavya Beheraj","avatar_url":"https://avatars-next.observableusercontent.com/455a20fd40ad6eb3fc145a00d68052219200256f65e4a30c52497087e4400f33","tier":null}],"members":[{"type":"individual","id":"aadc210eca456c01","login":"koffeeya","name":"Kavya Beheraj","avatar_url":"https://avatars-next.observableusercontent.com/455a20fd40ad6eb3fc145a00d68052219200256f65e4a30c52497087e4400f33","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Exploring Greensock Animation","cells":[{"id":0,"value":"md`# Exploring Greensock Animation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"md`## Eases`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"md`Hover over a block below to change its size and color. Try changing the ease to see the effect.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof selectedEase = select({\n title: \"Ease\",\n options: [\"none\", \"power1\", \"power2\", \"power3\", \"power4\", \"elastic\", \"bounce\", \"rough\", \"slow\", \"circ\", \"expo\", \"sine\"],\n value: \"circ\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"{\n const div = html`\n

`;\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"{\n \nlet elements = Array.from(document.getElementsByClassName(\"rect\"))\n\nfunction getRndInteger(min, max) {\n return Math.floor(Math.random() * (max - min + 1) ) + min;\n}\n\n// Alternate between short and long heights, for effect\nfunction setHeight(h) {\n const diff = 150 - h;\n if (diff > 10) {\n return getRndInteger(135, 150);\n } else {\n return getRndInteger(20, 50);\n }\n}\n\n// Add en event listener to each element\nelements.map(el => {\n el.addEventListener(\"mouseenter\", function(e) {\n gsap.to(this, {\n duration: 0.3,\n height: setHeight(this.offsetHeight),\n backgroundColor: d3.rgb(Math.random() * 255, Math.random() * 255, Math.random() * 255),\n opacity: 1,\n ease: selectedEase,\n });\n })\n})\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"md`## Squash and Stretch`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"md`Hover over each circle to see the effect of adding a squash and stretch during motion, along with variable timing.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"{\n const div = html`\n

Squash and Stretch + Variable Timing

No Squash and Stretch + Equal Timing

`;\n\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"md`## Squash and Stretch with Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"md`Re-run the chart block to reset the dots`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"chart();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"function chart() {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .classed(\"scatter-group\", true)\n .attr(\"stroke-width\", 1.5)\n .attr(\"fill\", \"lightcoral\")\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .classed(\"scatter\", true)\n .attr(\"cx\", d => x(d.x))\n .attr(\"cy\", d => y(d.y))\n .attr(\"r\", 8);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"{\n let scatterEls = document.getElementsByClassName(\"scatter\")\n let scatterBtn = document.getElementById(\"move-btn\")\n //slow(0.7, 0.7, false)\n scatterBtn.addEventListener(\"click\", function(e) {\n const tl = gsap.timeline()\n \n tl.to(scatterEls, {\n duration: 0.05,\n cx: 400,\n scaleX: 1.5,\n scaleY: 0.6,\n ease: \"circ\"\n })\n tl.to(scatterEls, {\n duration: 0.6,\n cx: 800,\n scaleX: 1,\n scaleY: 1,\n })\n })\n \n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"x = d3.scaleLinear()\n .domain([10, 34])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"mtcars@7.csv\").text(), ({name, mpg: x, hp: y}) => ({name, x: +x, y: +y})), {x: \"Miles per gallon →\", y: \"↑ Horsepower\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"gs = require('gsap@3.5.0/dist/gsap.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"