2b:null 2c:["$","title",null,{"children":"Animate with GreenSock | Noah Song | Observable"}] 31:[] 2f:{"id":"f28a803495bf980e","slug":"animate-with-greensock","title":"Animate with GreenSock","thumbnail":"208d9ac56cf3930f68cd13a0bacf94b0dba8cd20201113779c9d744d957175d0","access_level":"public","create_time":"$D2020-04-25T01:30:59.646Z","update_time":"$D2020-04-25T01:54:02.331Z","view_time":null,"first_public_time":"$D2020-04-25T02:00:07.007Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"207f12ceec18efb8","login":"fnick851","name":"Noah Song","avatar_url":"https://avatars-next.observableusercontent.com/c6684bfd604737bde4eb05a174d5804d205c92922b16eccd82b09aedacf20b12","tier":"starter_2024"},"version":109,"publish_version":109,"role":null,"authored":false,"authors":[{"type":"individual","id":"54649d8977fcf1ae","login":"fnick851","name":"Noah Song","avatar_url":"https://avatars-next.observableusercontent.com/c6684bfd604737bde4eb05a174d5804d205c92922b16eccd82b09aedacf20b12","tier":null}],"members":[{"type":"individual","id":"54649d8977fcf1ae","login":"fnick851","name":"Noah Song","avatar_url":"https://avatars-next.observableusercontent.com/c6684bfd604737bde4eb05a174d5804d205c92922b16eccd82b09aedacf20b12","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"aa8f186d78a53554","slug":"flags","title":"Shapes","owner":{"id":"207f12ceec18efb8","login":"fnick851","name":"Noah Song"}},"type":"notebook","body":{"title":"Animate with GreenSock","cells":[{"id":0,"value":"md`\n# Animate with GreenSock\nAdapted from: https://css-tricks.com/how-to-animate-on-the-web-with-greensock/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"{\n gsap\n .timeline({\n repeat: -1,\n defaults: {\n duration: 1.5\n }\n })\n .to('.ball', {\n x: 200,\n scale: 2,\n ease: \"bounce\"\n })\n .to('.ball', {\n x: 0,\n scale: 1,\n ease: \"back.inOut(3)\"\n })\n .to('.ball', {\n x: -200,\n scale: 2,\n ease: \"bounce\"\n })\n .to('.ball', {\n x: 0,\n scale: 1,\n ease: \"back.inOut(3)\"\n });\n\n return `↑ Animate HTML element`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"{\n gsap\n .timeline({\n repeat: -1,\n yoyo: true,\n defaults: {\n duration: 1.5\n }\n })\n .to('.svg-ball', {\n duration: 2,\n x: 200,\n y: 150,\n scale: 1.5,\n ease: 'bounce'\n });\n return `↑ Animate SVG element`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`\n## Styles\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"gsap = (await require(`gsap`)).gsap","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"