2f:[] 2d:{"title":"GSAP Starter","cells":[{"id":0,"value":"# GSAP Starter\n\nA notebook to get you started with GSAP and plugins I've found helpful when working with dataviz:\n- [MotionPath](https://greensock.com/docs/v3/Plugins/MotionPathPlugin)\n- [Text](https://greensock.com/docs/v3/Plugins/TextPlugin)\n- [Scrolltrigger](https://greensock.com/docs/v3/Plugins/ScrollTrigger)\n\n[Click here](https://greensock.com/docs/v3/Installation?checked=core#CDN) to see the other plugins that GSAP has to offer. \n\nThere are some hiccups you might experience when trying to integrate GSAP into Observable notebooks. If all else fails, re-run the cell or refresh the page.","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"chart = {\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"animation = {\n /////Make Selections/////\n\n /////Set the opacities to 0//// \n // gsap.set(, {opacity: 0})\n\n /////Make animation//// \n //let anim =\n \n /////Control the animation/////\n // Button controls to be able to play/pause etc the gsap animation\n const play = document.querySelector(\"#playDemo\");\n const restart = document.querySelector(\"#restartDemo\");\n //play.onclick = () => anim.play();\n //restart.onclick = () => anim.restart()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"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/)","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"## GSAP Imports","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"TextPlugin = tp.TextPlugin","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"ScrollTrigger = st.ScrollTrigger","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"MotionPath = mp.MotionPathPlugin","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"mp = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/MotionPathPlugin.min.js\")\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"tp = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/TextPlugin.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"gs = require(\"https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"st = require('gsap@3.9.1/dist/ScrollTrigger.js')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}