2c:null 2d:["$","title",null,{"children":"GSAP Starter | Kurtis Pivert | Observable"}] 32:[] 30:{"id":"48891d8caaa775a5","slug":null,"title":"GSAP Starter","thumbnail":"a3604bdf7b76b22884d46ba74f17bb9c4279d2d240c6295cf8121e04a1124682","access_level":"public","create_time":"$D2023-08-08T14:58:53.981Z","update_time":"$D2023-08-08T14:58:53.981Z","view_time":null,"first_public_time":"$D2023-08-08T14:58:53.981Z","has_unpublished_edits":null,"fork":{"id":"9acc2b0284416670","slug":"gsap-starter","title":"GSAP Starter","owner":{"id":"998e3f48dc296646","login":"datagrazing","name":"Max Graze"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e4bb8f7752ef9ed5","login":"kpivert","name":"Kurtis Pivert","avatar_url":"https://avatars-next.observableusercontent.com/af3d039b4208c460193a6b2797f843cc739817afb12524aa6bc440318590a1d1","tier":"starter_2024"},"version":69,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92da2bda7181e33a","login":"kpivert","name":"Kurtis Pivert","avatar_url":"https://avatars-next.observableusercontent.com/af3d039b4208c460193a6b2797f843cc739817afb12524aa6bc440318590a1d1","tier":null}],"members":[{"type":"individual","id":"92da2bda7181e33a","login":"kpivert","name":"Kurtis Pivert","avatar_url":"https://avatars-next.observableusercontent.com/af3d039b4208c460193a6b2797f843cc739817afb12524aa6bc440318590a1d1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"

\n \n \n \n \n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"chart = {\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"## GSAP Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"TextPlugin = tp.TextPlugin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"ScrollTrigger = st.ScrollTrigger","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"MotionPath = mp.MotionPathPlugin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"gsap = gs.gsap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"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":9,"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":18,"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":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"