31:[] 2f:{"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"},{"id":9,"value":"html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":76,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":13,"value":"md`\n## Styles\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"gsap = (await require(`gsap`)).gsap","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}