Hello world

\\n}\\n\",\"language\":\"typescript\"},{\"id\":\"/index.tsx\",\"name\":\"index.tsx\",\"code\":\"import React, { StrictMode } from \\\"react\\\";\\nimport { createRoot } from \\\"react-dom/client\\\";\\nimport \\\"./styles.css\\\";\\n\\nimport App from \\\"./App\\\";\\n\\nconst root = createRoot(document.getElementById(\\\"root\\\"));\\nroot.render(\\n \\n \\n \\n);\",\"language\":\"typescript\"},{\"id\":\"/public/index.html\",\"name\":\"public/index.html\",\"code\":\"\\n\\n\\n \\n \\n Document\\n\\n\\n

\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {\\n \\\"react\\\": \\\"^18.0.0\\\",\\n \\\"react-dom\\\": \\\"^18.0.0\\\",\\n \\\"react-scripts\\\": \\\"^5.0.0\\\",\\n \\\"gsap\\\": \\\"^3.12.5\\\",\\n \\\"@gsap/react\\\": \\\"^2.1.1\\\"\\n },\\n \\\"main\\\": \\\"/src/index.tsx\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/src/App.tsx\",\"name\":\"src/App.tsx\",\"code\":\"import { gsap } from \\\"gsap\\\"\\nimport { useGSAP } from \\\"@gsap/react\\\"\\nimport \\\"./styles.css\\\"\\n\\ngsap.registerPlugin(useGSAP)\\n\\nexport default function App() {\\n\\n useGSAP(() => {\\n\\n gsap.to(\\\".box\\\", {\\n x: 200,\\n duration: 1,\\n ease: \\\"power2.out\\\"\\n })\\n\\n })\\n\\n return (\\n

\\n

Hello world

\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {\\n \\\"react\\\": \\\"^18.0.0\\\",\\n \\\"react-dom\\\": \\\"^18.0.0\\\",\\n \\\"react-scripts\\\": \\\"^5.0.0\\\",\\n \\\"gsap\\\": \\\"^3.12.5\\\",\\n \\\"@gsap/react\\\": \\\"^2.1.1\\\"\\n },\\n \\\"main\\\": \\\"/src/index.tsx\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/src/App.tsx\",\"name\":\"src/App.tsx\",\"code\":\"import { useRef } from \\\"react\\\"\\nimport { gsap } from \\\"gsap\\\"\\nimport { useGSAP } from \\\"@gsap/react\\\"\\nimport \\\"./styles.css\\\"\\n\\ngsap.registerPlugin(useGSAP)\\n\\nexport default function App() {\\n\\n const container = useRef()\\n\\n useGSAP(() => {\\n\\n gsap.to(\\\".box\\\", {\\n x: 200,\\n duration: 1,\\n ease: \\\"power2.out\\\"\\n })\\n\\n }, { scope: container })\\n\\n return (\\n

\\n

\\n )\\n}\",\"language\":\"typescript\"},{\"id\":\"/src/index.tsx\",\"name\":\"src/index.tsx\",\"code\":\"import React, { StrictMode } from \\\"react\\\";\\nimport { createRoot } from \\\"react-dom/client\\\";\\nimport \\\"./styles.css\\\";\\n\\nimport App from \\\"./App\\\";\\n\\nconst root = createRoot(document.getElementById(\\\"root\\\"));\\nroot.render(\\n \\n \\n \\n);\",\"language\":\"typescript\"},{\"id\":\"/src/styles.css\",\"name\":\"src/styles.css\",\"code\":\"body {\\n font-family: system-ui, sans-serif;\\n padding: 20px;\\n}\\n\\n.box{\\n width:100px;\\n height:100px;\\n background:tomato;\\n}\",\"language\":\"css\"}]","template":"react-ts","activeFile":"/src/App.tsx","showCode":"true","width":"100%","height":"auto","emptyFolders":"[]"},"children":[]},{"id":"5ffca384-4474-4bf5-b1f0-d972a1fa77b9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"How Scoped Animations Work","styles":{}}],"children":[]},{"id":"47c0cc9d-92f2-4770-a9f9-b9933d9463b2","type":"columnList","props":{},"children":[{"id":"70a4ef5c-2cfe-4c8c-baa5-224cde574c2d","type":"column","props":{"width":1},"children":[{"id":"bda17ad3-3567-4669-8e66-b3dc66fdb9c2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"First we create a ","styles":{}},{"type":"text","text":"container reference","styles":{"bold":true}},{"type":"text","text":":","styles":{}}],"children":[]},{"id":"499a554c-7ee0-4f49-b196-8f33fbbe3d59","type":"procode","props":{"code":"const container = useRef()","language":"javascript","filename":"","files":"[{\"id\":\"58zk7d257\",\"name\":\"code\",\"code\":\"const container = useRef()\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6fe1c24b-94aa-46f8-806c-25d13ab89ae1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This reference becomes the ","styles":{}},{"type":"text","text":"animation scope","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"bff3b7e9-9bd3-4bfd-a194-21002534ea3f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"eacf12d3-dc2a-4b79-a41e-ac1055dc3af4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]},{"id":"28431e28-adae-416b-aa19-c61944909a75","type":"column","props":{"width":1},"children":[{"id":"0e3609f9-4054-44be-a652-72adf59cffc1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then we pass it to ","styles":{}},{"type":"text","text":"useGSAP","styles":{"code":true}},{"type":"text","text":":","styles":{}}],"children":[]},{"id":"682e75e1-87ca-4346-b773-cdee8dc969b2","type":"procode","props":{"code":"useGSAP(() => {\n gsap.to(\".box\", { x: 200 })\n}, { scope: container })","language":"javascript","filename":"","files":"[{\"id\":\"977pxantx\",\"name\":\"code\",\"code\":\"useGSAP(() => {\\n gsap.to(\\\".box\\\", { x: 200 })\\n}, { scope: container })\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6f1632dd-5776-4b2d-87ac-35d637d60da6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This means GSAP will only search for ","styles":{}},{"type":"text","text":".box","styles":{"code":true}},{"type":"text","text":" ","styles":{}},{"type":"text","text":"inside the container element","styles":{"bold":true}},{"type":"text","text":".","styles":{}}],"children":[]}]}]},{"id":"4479b18a-48cb-4878-bcc9-722b6f25c361","type":"divider","props":{},"children":[]},{"id":"36c241b2-de99-4bb6-8225-e5ffa25f2827","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Dependencies","styles":{}}],"children":[]},{"id":"e1c2ae2d-2f2e-4814-833a-2510fc38e9b4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"useGSAP()","styles":{"code":true}},{"type":"text","text":" supports dependency arrays similar to ","styles":{}},{"type":"text","text":"useEffect","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"1e9e42a1-dca9-4481-b53e-167adaeb950a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"2b412b1d-f8a9-40c3-854a-38cf80a5d825","type":"procode","props":{"code":"useGSAP(() => {\n\n gsap.to(\".box\",{x:300})\n\n}, [value])","language":"javascript","filename":"","files":"[{\"id\":\"t3ovslgga\",\"name\":\"code\",\"code\":\"useGSAP(() => {\\n\\n gsap.to(\\\".box\\\",{x:300})\\n\\n}, [value])\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2b06821d-e8ca-46b5-a29e-64eb0edae1ed","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The animation updates when ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" changes.","styles":{}}],"children":[]},{"id":"f2c8826e-1dff-460a-b068-28af9903cbb3","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: sans-serif;\\n -webkit-font-smoothing: auto;\\n -moz-font-smoothing: auto;\\n -moz-osx-font-smoothing: grayscale;\\n font-smoothing: auto;\\n text-rendering: optimizeLegibility;\\n font-smooth: always;\\n -webkit-tap-highlight-color: transparent;\\n -webkit-touch-callout: none;\\n}\\n\\nh1 {\\n font-size: 1.5rem;\\n}\",\"language\":\"css\"},{\"id\":\"/tsconfig.json\",\"name\":\"tsconfig.json\",\"code\":\"{\\n \\\"include\\\": [\\n \\\"./**/*\\\"\\n ],\\n \\\"compilerOptions\\\": {\\n \\\"strict\\\": true,\\n \\\"esModuleInterop\\\": true,\\n \\\"lib\\\": [ \\\"dom\\\", \\\"es2015\\\" ],\\n \\\"jsx\\\": \\\"react-jsx\\\"\\n }\\n}\",\"language\":\"json\"},{\"id\":\"/App.tsx\",\"name\":\"App.tsx\",\"code\":\"export default function App(): JSX.Element {\\n return

Hello world

\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {\\n \\\"react\\\": \\\"^18.0.0\\\",\\n \\\"react-dom\\\": \\\"^18.0.0\\\",\\n \\\"react-scripts\\\": \\\"^5.0.0\\\",\\n \\\"gsap\\\": \\\"^3.12.5\\\",\\n \\\"@gsap/react\\\": \\\"^2.1.1\\\"\\n },\\n \\\"main\\\": \\\"/src/index.tsx\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/src/App.tsx\",\"name\":\"src/App.tsx\",\"code\":\"import { useRef, useState } from \\\"react\\\"\\nimport { gsap } from \\\"gsap\\\"\\nimport { useGSAP } from \\\"@gsap/react\\\"\\n\\ngsap.registerPlugin(useGSAP)\\n\\nexport default function App(){\\n\\n const container = useRef()\\n const [value, setValue] = useState(100)\\n\\n useGSAP(() => {\\n\\n gsap.to(\\\".box\\\", {\\n x: value,\\n duration: 1\\n })\\n\\n }, { scope: container, dependencies: [value] })\\n\\n return (\\n

\\n\\n

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

\\n )\\n}\",\"language\":\"typescript\"},{\"id\":\"/src/index.tsx\",\"name\":\"src/index.tsx\",\"code\":\"import React, { StrictMode } from \\\"react\\\";\\nimport { createRoot } from \\\"react-dom/client\\\";\\nimport \\\"./styles.css\\\";\\n\\nimport App from \\\"./App\\\";\\n\\nconst root = createRoot(document.getElementById(\\\"root\\\"));\\nroot.render(\\n \\n \\n \\n);\",\"language\":\"typescript\"},{\"id\":\"/src/styles.css\",\"name\":\"src/styles.css\",\"code\":\"body {\\n font-family: system-ui, sans-serif;\\n padding: 20px;\\n}\\n\\n.box{\\n width:100px;\\n height:100px;\\n background:tomato;\\n}\",\"language\":\"css\"}]","template":"react-ts","activeFile":"/src/App.tsx","showCode":"true","width":"100%","height":"auto","emptyFolders":"[]"},"children":[]},{"id":"93ea2213-7928-4bee-9cb3-f55963caa281","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"How It Works","styles":{}}],"children":[]},{"id":"53d43904-c1ef-47d0-9832-e77d26ee4914","type":"columnList","props":{},"children":[{"id":"fd7fa0c3-e102-4d40-8a5f-cf4fa630cd80","type":"column","props":{"width":1},"children":[{"id":"dbbb92aa-760a-47c7-a978-8e1f4edb256d","type":"numberedListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"State Value","styles":{"bold":true}}],"children":[]},{"id":"6a412bf9-b4f4-4778-be99-d55a25b33123","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"const [value, setValue] = useState(100)","styles":{}}],"children":[]},{"id":"440e9946-d54a-41e9-8b4b-a8b8aac2e18a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" determines how far the element moves.","styles":{}}],"children":[]},{"id":"cffe3ef8-caf6-45f5-b08f-a9d4d4bf81ce","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]},{"id":"fa746445-3ce5-4506-80ea-d1475072a6df","type":"column","props":{"width":1},"children":[{"id":"c3580ea0-514e-417c-9f94-cdd5d20f83c3","type":"numberedListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","start":2},"content":[{"type":"text","text":"Animation Uses the Value","styles":{"bold":true}}],"children":[]},{"id":"8a551e36-fbd6-4ce6-b7c5-2042ed434961","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"9oqk3qcpf\",\"name\":\"code\",\"code\":\"gsap.to(\\\".box\\\", { x: value })\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e33c8328-8e20-4cc3-91c6-8fc41c6eaced","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The box moves horizontally based on ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"ffee5ad2-e783-4be6-8d09-4e4fbf903c9c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]},{"id":"e70632c9-2ded-41de-ad0f-8ba3cdd0caef","type":"column","props":{"width":1},"children":[{"id":"dac854a4-ed37-40b1-959d-6627881f0ec7","type":"numberedListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","start":3},"content":[{"type":"text","text":"Dependency Array","styles":{"bold":true}}],"children":[]},{"id":"caf65599-bb08-4934-a309-02fd00431c6f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"dependencies: [value]","styles":{}}],"children":[]},{"id":"89784d2e-23d1-4567-b901-27486584ffed","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Whenever ","styles":{}},{"type":"text","text":"value","styles":{"code":true}},{"type":"text","text":" changes:","styles":{}}],"children":[]},{"id":"10b4b66f-c2eb-4dd6-9634-f50f41325d5e","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"useGSAP()","styles":{"code":true}},{"type":"text","text":" runs again","styles":{}}],"children":[]},{"id":"efc2df60-f6d6-4d4b-835d-22e559ea579c","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"the animation updates","styles":{}}],"children":[]},{"id":"b2e127ce-6174-43d0-8ac0-0e9ffb88f070","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"the element animates to the new position","styles":{}}],"children":[]}]}]},{"id":"0d67734a-8f0b-4f01-bfc7-445790961888","type":"divider","props":{},"children":[]},{"id":"22160f53-69c0-41b6-9032-5c042e8d91d0","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":1,"isToggleable":false},"content":[{"type":"text","text":"Cleanup","styles":{}}],"children":[]},{"id":"00dfea28-134d-42c6-a11a-db9be24054e0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animations created with ","styles":{}},{"type":"text","text":"useGSAP()","styles":{"code":true}},{"type":"text","text":" automatically revert when:","styles":{}}],"children":[]},{"id":"4de2fe39-594e-4a28-bfbf-4e1e33e26ede","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"the component unmounts","styles":{}}],"children":[]},{"id":"70d73bca-14c8-4b6d-a16b-cb0a17b27f5b","type":"bulletListItem","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"dependencies change","styles":{}}],"children":[]},{"id":"635bd31c-1239-4d10-98d8-3aab37875bda","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example behavior:","styles":{}}],"children":[]},{"id":"3de92fe7-280f-41bc-8013-598892e10fbe","type":"procode","props":{"code":"Component mounts → animation created\nComponent unmounts → animation reverted","language":"javascript","filename":"","files":"[{\"id\":\"gdcfi7m63\",\"name\":\"code\",\"code\":\"Component mounts → animation created\\nComponent unmounts → animation reverted\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8dd70f15-8554-4a7b-9458-f49466ef681b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This prevents memory leaks.","styles":{}}],"children":[]},{"id":"2dc7d0d5-1833-46d4-94c6-e7cd46b1d442","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"7dd7b5b1-9d26-441e-8edb-ef790e706573","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"772a5a3d-46e5-4ad5-9024-39ba8f305041","type":"columnList","props":{},"children":[{"id":"12d6f653-683d-4ff3-9492-7a213e66b7ca","type":"column","props":{"width":1},"children":[{"id":"4f309d09-2ecd-4cf9-8490-e61045e90803","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":3,"isToggleable":false},"content":[{"type":"text","text":"Cleanup with ","styles":{}},{"type":"text","text":"useGSAP()","styles":{"code":true}}],"children":[]},{"id":"5e41fcf3-bebf-4a96-832e-ac50ef9c7408","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: sans-serif;\\n -webkit-font-smoothing: auto;\\n -moz-font-smoothing: auto;\\n -moz-osx-font-smoothing: grayscale;\\n font-smoothing: auto;\\n text-rendering: optimizeLegibility;\\n font-smooth: always;\\n -webkit-tap-highlight-color: transparent;\\n -webkit-touch-callout: none;\\n}\\n\\nh1 {\\n font-size: 1.5rem;\\n}\",\"language\":\"css\"},{\"id\":\"/tsconfig.json\",\"name\":\"tsconfig.json\",\"code\":\"{\\n \\\"include\\\": [\\n \\\"./**/*\\\"\\n ],\\n \\\"compilerOptions\\\": {\\n \\\"strict\\\": true,\\n \\\"esModuleInterop\\\": true,\\n \\\"lib\\\": [ \\\"dom\\\", \\\"es2015\\\" ],\\n \\\"jsx\\\": \\\"react-jsx\\\"\\n }\\n}\",\"language\":\"json\"},{\"id\":\"/App.tsx\",\"name\":\"App.tsx\",\"code\":\"export default function App(): JSX.Element {\\n return

Hello world

\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {\\n \\\"react\\\": \\\"^18.0.0\\\",\\n \\\"react-dom\\\": \\\"^18.0.0\\\",\\n \\\"react-scripts\\\": \\\"^5.0.0\\\",\\n \\\"gsap\\\": \\\"^3.12.5\\\",\\n \\\"@gsap/react\\\": \\\"^2.1.1\\\"\\n },\\n \\\"main\\\": \\\"/src/index.tsx\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/src/App.tsx\",\"name\":\"src/App.tsx\",\"code\":\"import { useRef } from \\\"react\\\"\\nimport { gsap } from \\\"gsap\\\"\\nimport { useGSAP } from \\\"@gsap/react\\\"\\n\\ngsap.registerPlugin(useGSAP)\\n\\nexport default function App(){\\n\\n const container = useRef()\\n\\n useGSAP(() => {\\n\\n gsap.to(\\\".box\\\", {\\n x: 200,\\n duration: 1\\n })\\n\\n }, { scope: container })\\n\\n return (\\n

\\n

Hello world

\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {\\n \\\"react\\\": \\\"^18.0.0\\\",\\n \\\"react-dom\\\": \\\"^18.0.0\\\",\\n \\\"react-scripts\\\": \\\"^5.0.0\\\",\\n \\\"gsap\\\": \\\"^3.12.5\\\",\\n \\\"@gsap/react\\\": \\\"^2.1.1\\\"\\n },\\n \\\"main\\\": \\\"/src/index.tsx\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/src/App.tsx\",\"name\":\"src/App.tsx\",\"code\":\"import { useEffect, useRef } from \\\"react\\\"\\nimport { gsap } from \\\"gsap\\\"\\nimport { useGSAP } from \\\"@gsap/react\\\"\\n\\ngsap.registerPlugin(useGSAP)\\n\\nexport default function App(){\\n\\n const container = useRef()\\n\\n useEffect(() => {\\n\\n const ctx = gsap.context(() => {\\n\\n gsap.to(\\\".box\\\", {\\n x: 200,\\n duration: 1\\n })\\n\\n }, container)\\n\\n return () => ctx.revert()\\n\\n }, [])\\n\\n return (\\n

\\n

Hello world

\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {\\n \\\"react\\\": \\\"^18.0.0\\\",\\n \\\"react-dom\\\": \\\"^18.0.0\\\",\\n \\\"react-scripts\\\": \\\"^5.0.0\\\",\\n \\\"gsap\\\": \\\"^3.12.5\\\",\\n \\\"@gsap/react\\\": \\\"^2.1.1\\\"\\n },\\n \\\"main\\\": \\\"/src/index.tsx\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/src/App.tsx\",\"name\":\"src/App.tsx\",\"code\":\"import { useRef } from \\\"react\\\"\\nimport { gsap } from \\\"gsap\\\"\\nimport { useGSAP } from \\\"@gsap/react\\\"\\nimport { ScrollTrigger } from \\\"gsap/ScrollTrigger\\\"\\n\\ngsap.registerPlugin(useGSAP, ScrollTrigger)\\n\\nexport default function App(){\\n\\n const container = useRef()\\n\\n useGSAP(() => {\\n\\n gsap.to(\\\".box\\\", {\\n x: 300,\\n duration: 1,\\n scrollTrigger: {\\n trigger: \\\".box\\\",\\n start: \\\"top center\\\",\\n end: \\\"top 100px\\\",\\n scrub: true,\\n markers: true,\\n }\\n })\\n\\n }, { scope: container })\\n\\n return (\\n

\\n\\n

\\n

Scroll Down

\\n

The animation will start when you scroll

\\n

\\n\\n

Hello world

\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {\\n \\\"react\\\": \\\"^18.0.0\\\",\\n \\\"react-dom\\\": \\\"^18.0.0\\\",\\n \\\"react-scripts\\\": \\\"^5.0.0\\\",\\n \\\"gsap\\\": \\\"^3.12.5\\\",\\n \\\"@gsap/react\\\": \\\"^2.1.1\\\"\\n },\\n \\\"main\\\": \\\"/src/index.tsx\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/src/App.tsx\",\"name\":\"src/App.tsx\",\"code\":\"import { useRef } from \\\"react\\\"\\nimport { gsap } from \\\"gsap\\\"\\nimport { useGSAP } from \\\"@gsap/react\\\"\\n\\ngsap.registerPlugin(useGSAP)\\n\\nexport default function App(){\\n\\n const container = useRef()\\n\\n useGSAP(() => {\\n\\n const tl = gsap.timeline()\\n\\n tl.from(\\\".box1\\\", {\\n y: -100,\\n opacity: 0,\\n duration: 0.8\\n })\\n .from(\\\".box2\\\", {\\n x: -100,\\n opacity: 0,\\n duration: 0.8\\n })\\n .from(\\\".box3\\\", {\\n scale: 0,\\n opacity: 0,\\n duration: 0.8\\n })\\n\\n }, { scope: container })\\n\\n return (\\n

\\n

Hello world

\\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {\\n \\\"react\\\": \\\"^18.0.0\\\",\\n \\\"react-dom\\\": \\\"^18.0.0\\\",\\n \\\"react-scripts\\\": \\\"^5.0.0\\\",\\n \\\"gsap\\\": \\\"^3.12.5\\\",\\n \\\"@gsap/react\\\": \\\"^2.1.1\\\"\\n },\\n \\\"main\\\": \\\"/src/index.tsx\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"},{\"id\":\"/src/App.tsx\",\"name\":\"src/App.tsx\",\"code\":\"import { useRef } from \\\"react\\\"\\nimport { gsap } from \\\"gsap\\\"\\nimport { useGSAP } from \\\"@gsap/react\\\"\\n\\ngsap.registerPlugin(useGSAP)\\n\\nexport default function App(){\\n\\n const container = useRef()\\n\\n useGSAP(() => {\\n\\n gsap.to(\\\".box\\\", {\\n x: 200,\\n duration: 1\\n })\\n\\n }, { scope: container })\\n\\n return (\\n

\\n