30:T457,{ await visibility(); const div = html`

${circles(8)}

`; const tween = gsap.from(div.querySelectorAll(".circle"), { duration: 1, opacity: 0, y: -100, stagger: 0.25 // delay, in seconds }); const play = document.querySelector("#play"); const pause = document.querySelector("#pause"); const resume = document.querySelector("#resume"); const restart = document.querySelector("#restart"); const reverse = document.querySelector("#reverse"); const scaleUp = document.querySelector("#scale-up"); const scaleSame = document.querySelector("#scale-same"); const scaleDown = document.querySelector("#scale-down"); play.onclick = () => tween.play(); pause.onclick = () => tween.pause(); resume.onclick = () => tween.resume(); restart.onclick = () => tween.restart(); reverse.onclick = () => tween.reverse(); scaleUp.onclick = () => tween.timeScale(4); scaleSame.onclick = () => tween.timeScale(1); scaleDown.onclick = () => tween.timeScale(0.2); invalidation.then(() => tween.kill()); return div; }31:T86f,{ const tl = tlShowcase.tl; const children = tl.getChildren(); const labels = Object.entries(tl.labels); const margin = { top: 40, bottom: 0, right: 10, left: 40 }; const w = 20; const height = w * children.length + margin.top + margin.bottom; const x = d3 .scaleLinear() .domain([0, tl.duration()]) .range([margin.left, width - margin.right]); const y = d3 .scaleBand() .domain(children.map(c => c.data.name)) .range([margin.top, height - margin.bottom]); function xAxis(g) { g.call(d3.axisTop(x)) .attr("transform", `translate(0,${margin.top})`) .call(g => g.select(".domain").remove()) .call(g => g .selectAll(".tick") .append("line") .attr("y2", height - margin.bottom - margin.top) .attr("stroke", "black") .attr("stroke-opacity", 0.15) ); } return html` `; }32:T504,tlShowcase = { await visibility(); const div = html`

${logo()}

${circles(8)}

`; // Re-run cell to restart animation const tl = gsap.timeline({ // Uncomment to see what happens //repeat: 2, //yoyo: true, }); tl.from(div.querySelector("#logo"), { data: { name: "Logo" }, duration: 2.5, opacity: 0, scale: 0.3, ease: "back" }); // Uncomment to see what happens /* tl.to(div.querySelector("#logo"), { data: { name: "Logo (rotate)" }, duration: 1, rotation: 360 }); */ tl.from(div.querySelectorAll(".circle"), { data: { name: "Circles" }, duration: 1, opacity: 0, y: 100, stagger: 0.15 // What happens to duration? }); // Uncomment to see what happens /* tl.addLabel("circlesOutro", "+=0.75"); tl.to( div.querySelectorAll(".circle"), { data: { name: "Circles (disappear)" }, duration: 1, opacity: 0, y: () => (Math.round(Math.random()) ? 100 : -100), stagger: 0.15 }, "circlesOutro" ); */ mutable playing = true; tl.then(() => (mutable playing = false)); invalidation.then(() => tl.kill()); return Object.assign(div, { tl }); }33:T1ed0,// Source: https://codepen.io/chrisgannon/pen/EjVyXN astronaut = () => html` `34:[] 2e:{"title":"Hello, GSAP!","cells":[{"id":0,"value":"md`# Hello, GSAP!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"{\n const div = html`\n

\n $\"GreenSock$ \n

\n`;\n\n await visibility();\n\n const tween = gsap.from(div.querySelector(\"#logo\"), {\n duration: 1,\n x: width,\n opacity: 0,\n ease: \"elastic.out(1, 0.2)\"\n });\n\n invalidation.then(() => tween.kill());\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"md`The [GreenSock Animation Platform](https://greensock.com/gsap/), or GSAP, is a well-known JavaScript library for making animations that are fast, robust, and compatible with different browsers and libraries.\n\nThis notebook showcases the functions and techniques highlighted in the [GSAP introduction video](https://greensock.com/get-started). Consider it a supplement that also demonstrates how GSAP can be implemented on Observable.\n\nRe-run each of the cells below to restart the animation!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"md`### The \\`to()\\` method`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"{\n await visibility();\n const div = html`

${logo()}

`;\n\n // Re-run cell to restart animation\n const tween = gsap.to(div.querySelector(\"#logo\"), { duration: 2, x: 300 });\n\n // Kills the animation and releases it to garbage collection as the cell is re-evaluated\n invalidation.then(() => tween.kill());\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"md`### Properties and values\n\nNotice how the cell's height gradually increases as the border is drawn? GSAP supports easing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"{\n await visibility();\n const div = html`

${logo()}

`;\n\n // Re-run cell to restart animation\n const tween = gsap.to(div.querySelector(\"#logo\"), {\n duration: 2, // in seconds\n x: 300,\n backgroundColor: \"orange\",\n borderRadius: \"20%\",\n border: \"5px solid black\"\n });\n\n invalidation.then(() => tween.kill());\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`### Special properties: \\`ease\\`\n\nGSAP's [ease visualizer](https://greensock.com/get-started/#easing) is a great tool to inspect and customize easing methods.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"{\n await visibility();\n const div = html`

${logo()}

`;\n\n // Re-run cell to restart animation\n const tween = gsap.to(div.querySelector(\"#logo\"), {\n duration: 2,\n x: 300,\n backgroundColor: \"orange\",\n borderRadius: \"20%\",\n border: \"5px solid black\",\n ease: \"bounce\"\n });\n\n invalidation.then(() => tween.kill());\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"md`### Animating multiple objects`","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"{\n await visibility();\n const div = html`

${logo()}${astronaut()}

`;\n\n // First, move the objects away from one another to better illustrate rotation\n const tween1 = gsap.to(div.querySelector(\"#logo\"), {\n duration: 0, // No animation for moving\n x: 300\n });\n const tween2 = gsap.to(div.querySelector(\"#astronaut\"), {\n duration: 0,\n x: 400\n });\n\n // Re-run cell to restart animation\n const selection = div.querySelectorAll(\"#logo, #astronaut\");\n const tween3 = gsap.set(selection, {\n transformOrigin: \"50% 50%\"\n });\n const tween4 = gsap.to(selection, {\n duration: 2,\n rotation: 360\n });\n\n invalidation.then(() => {\n tween1.kill();\n tween2.kill();\n tween3.kill();\n tween4.kill();\n });\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":286,"value":"md`### Animating non-DOM objects / Callback functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"{\n await visibility();\n const div = html`

`;\n\n // Re-run cell to restart animation\n const myObject = { value: 0 };\n const tween = gsap.to(myObject, {\n duration: 2,\n value: 360,\n onUpdate: () => {\n div.textContent = myObject.value;\n }\n });\n\n invalidation.then(() => tween.kill());\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`### The \\`from()\\` method\n\nWhereas \\`to()\\` styles an animation happening after an object first appears on the screen, \\`from()\\` styles the animation leading to that first appearance.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"{\n await visibility();\n const div = html`

${logo()}

`;\n\n // Re-run cell to restart animation\n const tween = gsap.from(div.querySelector(\"#logo\"), {\n duration: 1.5,\n opacity: 0,\n scale: 0.3,\n ease: \"back\"\n });\n\n invalidation.then(() => tween.kill());\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"md`### Staggering animations\n\nThanks to the \\`stagger\\` property, animations of objects in the same selection can start consecutively instead of simultaneously.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":505,"value":"viewof stagger = checkbox({ options: [\"Stagger?\"] })","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"{\n await visibility();\n const div = html`\n

\n ${circles(5)}\n

`;\n\n // Re-run cell or use checkbox to restart animation\n const tween = gsap.from(div.querySelectorAll(\".circle\"), {\n duration: 1,\n opacity: 0,\n y: 100,\n stagger: stagger ? 0.25 : 0 // delay, in seconds\n });\n\n invalidation.then(() => tween.kill());\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"md`### Function-based values`","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"{\n await visibility();\n const div = html`\n

\n ${circles(8)}\n

`;\n\n // Re-run cell to restart animation\n const tween = gsap.from(div.querySelectorAll(\".circle\"), {\n duration: 1,\n opacity: 0,\n y: \"random(-100, 100)\", // same as () => Math.random() * 200 - 100\n stagger: 0.25\n });\n\n invalidation.then(() => tween.kill());\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"md`### Control methods\nMore [methods](https://greensock.com/docs/v3/GSAP/Tween) are available. Can you figure out the differences between \\`resume()\\` and \\`play()\\`? `","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"html`\n

\n \n \n \n \n \n \n \n \n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":548,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":644,"value":"md`### Timelines\n\nThanks to [\\`Timeline.time()\\`](https://greensock.com/docs/v3/GSAP/Timeline/time), we can create a [generator](https://observablehq.com/@observablehq/introduction-to-generators) able to keep track of the animation progress.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":919,"value":"html`

${d3.format(\".2f\")(\n t\n)}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":767,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"mutable playing = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":729,"value":"t = {\n const tl = tlShowcase.tl;\n yield tlShowcase.tl.time();\n while (playing) {\n yield tlShowcase.tl.time();\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`\n___\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1047,"value":"md`Woohoo! You made it this far. Thanks for reading!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"circles = n =>\n d3.schemeSet2\n .slice(0, n)\n .map(d => html`

`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"logo = () =>\n html` $\"GreenSock$ `","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"gsap = gs.gsap","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"gs = require('gsap@3.5.0/dist/gsap.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"d3 = require(\"d3-scale-chromatic@1\", \"d3-axis@1\", \"d3-scale@3\", \"d3-selection@1\", \"d3-format@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}