[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fadd-animations-to-react-app-using-gsap":671,"blog-author-\u002Fblog\u002Fadd-animations-to-react-app-using-gsap":1144,"i-material-symbols:arrow-back-rounded":1159},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1133,"date":1134,"description":1135,"draft":1136,"editorsPick":1136,"extension":1137,"featured":1136,"image":1138,"imageAlt":676,"meta":1139,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1140,"seo":1141,"stem":1142,"tags":676,"__hash__":1143},"blog\u002Fblog\u002Fadd-animations-to-react-app-using-gsap.md","How to Add Animations to your React App Using GSAP","James Amoo","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ftailwind-theming-create-light-and-dark-modes\u002Fauthor.jpeg",null,"james-amoo",{"type":679,"value":680,"toc":1119},"minimark",[681,693,702,711,716,719,728,732,735,754,759,762,785,795,825,842,848,872,883,889,911,915,918,922,931,937,940,944,947,953,956,962,966,983,987,990,996,1021,1042,1054,1060,1063,1070,1093,1099,1102,1105,1108,1111],[682,683,684,685,692],"p",{},"With the increasing complexities of modern web pages often proposed by UI\u002FUX designers, developers need to stay abreast of this evolution to ensure maximum user experience. 10 years ago, you may have created the greatest website of all time by simply stringing together some ",[686,687,691],"a",{"href":688,"rel":689},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fintroduction-to-html",[690],"nofollow","HTML"," pages for some basic layout, there’s not so much luck with that nowadays.",[682,694,695,696,701],{},"Modern web pages consist of more sophisticated ",[686,697,700],{"href":698,"rel":699},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fstyling-text-in-css",[690],"CSS"," codes for styling and several objects moving around the screen — animations! Web animations ensure your webpage doesn't look so static and give it that modern UI feel.",[682,703,704,705,710],{},"Having to pick what animation library to use for your ",[686,706,709],{"href":707,"rel":708},"https:\u002F\u002Fpieces.app\u002Fblog\u002Freact-18-a-comprehensive-guide-to-the-latest-features-and-updates",[690],"React"," project may be confusing, but that ends now. In this tutorial, you will learn how to add animations to your React application using GSAP, one of the most popular animation libraries for JavaScript.",[712,713,715],"h2",{"id":714},"what-is-gsap","What is GSAP?",[682,717,718],{},"The GreenSock Animation Platform (GSAP) is a web animation library that provides the logic for adding animation to any site powered by JavaScript. React, being built on top of JavaScript, falls under this category. GSAP is an extremely fun animation tool to use because it offers a great deal of flexibility, you can animate anything using GSAP — texts, images, scroll actions, SVGs, UI interactions, anything!",[682,720,721,722,727],{},"The most exciting feature about GSAP is its speed, it runs your animation sequences very fast. It is also a very popular framework with about ",[686,723,726],{"href":724,"rel":725},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fgsap",[690],"292,000 weekly downloads",".",[712,729,731],{"id":730},"why-gsap","Why GSAP?",[682,733,734],{},"There are many JavaScript animation libraries to use, but GSAP stands tall because:",[736,737,738,742,745,748,751],"ul",{},[739,740,741],"li",{},"It provides support for different frameworks, which makes migration of code easy.",[739,743,744],{},"It has very minimal abstraction, you are in full control of your animation sequences.",[739,746,747],{},"It is lightweight and fast, which is a very important factor to consider because sophisticated animation sequences tend to slow down page load time.",[739,749,750],{},"It offers the flexibility of animating any section of your website.",[739,752,753],{},"It has very comprehensive documentation and provides additional resources and templates to get you started with basic animations.",[755,756,758],"h3",{"id":757},"how-to-use-gsap","How To Use GSAP?",[682,760,761],{},"GSAP creates basic animations following the concept of tweens. A tween does all the animation work, it contains the target (object or section you want to animate), the duration (how long you want the animation to run), and other properties you may want to include in your animations. To properly use GSAP to animate, a knowledge of these three built-in tweens is required:",[736,763,764],{},[739,765,766,770,771,773,774,778,779,781,782,784],{},[767,768,769],"code",{},"gsap.to()",": The ",[767,772,769],{}," tween moves a target from one position ",[775,776,777],"strong",{},"to"," another position. Suppose you want to move a text that says \"Pieces co pilot provides code snippet and context for you\" to the right position, you use the ",[767,780,769],{}," function for that. Let's consider the block of code below that makes use of the ",[767,783,769],{}," tween.",[786,787,792],"pre",{"className":788,"code":790,"language":791},[789],"language-text","gsap.to(\".pieces-class\", {x: 100, duration: 2 });\n","text",[767,793,790],{"__ignoreMap":794},"",[682,796,797,798,800,801,804,805,808,809,812,813,816,817,820,821,824],{},"In the code snippet above, the ",[767,799,769],{}," tween acts on the ",[767,802,803],{},".pieces-class",", which is the target containing the content we want to animate. We set the property of ",[767,806,807],{},"x"," to ",[767,810,811],{},"100",", which means we want to move the object 100 pixels to the right. The positioning is based on the concept of the x-axis and y-axis, which means we would set our property to ",[767,814,815],{},"y:100"," if we want it to move 100 pixels downwards from the initial position, or ",[767,818,819],{},"y-100"," if we want it to move 100 pixels upwards from the initial position. We also set our duration to ",[767,822,823],{},"2",", which means it runs for 2 seconds. There are tons of other properties which you can check out in the GSAP docs.",[736,826,827],{},[739,828,829,770,832,834,835,837,838,841],{},[767,830,831],{},"gsap.from()",[767,833,831],{}," tween is the opposite of the ",[767,836,769],{}," tween, it moves an object ",[775,839,840],{},"from"," its normal position. To explain this further, consider the block of code below:",[786,843,846],{"className":844,"code":845,"language":791},[789],"gsap.from(\".pieces-class\", {y: 100, duration: 1 });\n",[767,847,845],{"__ignoreMap":794},[682,849,850,851,854,855,858,859,862,863,865,866,868,869,871],{},"You should know that the default position of all elements(if it is not explicitly defined) is ",[767,852,853],{},"0",". So in the code snippet above, on entering the viewport, the content in the target(the ",[767,856,857],{},"pieces.class"," target) starts from 100 pixels downwards(when ",[767,860,861],{},"y"," is set to ",[767,864,811],{},") and moves slowly to its default position(when ",[767,867,861],{}," eventually reaches ",[767,870,853],{},").",[736,873,874],{},[739,875,876,879,880,882],{},[767,877,878],{},"gsap.fromTo()",": As you'd guess, the ",[767,881,878],{}," tween handles the sequence for both the start and end positions. This tween gives you the flexibility to define exactly where you want your animation sequence to start from, and where you want it to end. Consider the block of code below:",[786,884,887],{"className":885,"code":886,"language":791},[789],"gsap.fromTo(\".pieces-class\", { y: 100 }, { y: 50, duration: 1 });\n",[767,888,886],{"__ignoreMap":794},[682,890,891,892,895,896,898,899,902,903,906,907,910],{},"Here, we set our animation to start from 100 pixels downwards and go all the way to the top, but not to ",[767,893,894],{},"y:0","(the default behavior), we set our ",[767,897,861],{}," to be ",[767,900,901],{},"50"," pixels, which sets both positions only 50 pixels apart. The first block of code represents properties for the ",[767,904,905],{},".from"," tween, while the second block represents properties for the ",[767,908,909],{},".to"," tween.These three built-in tweens are all you need to create simple GSAP animations and we will do that in a bit.",[712,912,914],{"id":913},"adding-gsap-animation-sequences-to-your-application","Adding GSAP Animation Sequences to Your Application",[682,916,917],{},"In this section, we will add some basic animation sequences to our application, but before then, let's create a new React application.",[755,919,921],{"id":920},"scaffolding-your-react-application","Scaffolding your React Application",[682,923,924,925,930],{},"To create a new React application using Next as a build tool, run the line of code below in your terminal(provided you already have ",[686,926,929],{"href":927,"rel":928},"https:\u002F\u002Fnodejs.org\u002Fen\u002F",[690],"Node.js"," installed on your machine):",[786,932,935],{"className":933,"code":934,"language":791},[789],"npx create-next-app@latest\n",[767,936,934],{"__ignoreMap":794},[682,938,939],{},"This installs all the packages and necessary dependencies to use GSAP in React for your project.",[755,941,943],{"id":942},"gsap-installation","GSAP Installation",[682,945,946],{},"After creating a new React application, the next step is to install GSAP in our project so we can start animating! To do that, run the line of code below in your terminal",[786,948,951],{"className":949,"code":950,"language":791},[789],"npm install gsap\n",[767,952,950],{"__ignoreMap":794},[682,954,955],{},"This installs GSAP in your application and then we can import it in the file that contains the content we want to animate:",[786,957,960],{"className":958,"code":959,"language":791},[789],"import React from \"react\";import { gsap } from \"gsap\";\n",[767,961,959],{"__ignoreMap":794},[755,963,965],{"id":964},"working-principle","Working Principle",[682,967,968,969,972,973,976,977,979,980,982],{},"To implement animations in our React application using GSAP, we make use of two hooks; the ",[767,970,971],{},"useLayoutEffect()"," hook and the ",[767,974,975],{},"useRef()"," hook. The ",[767,978,971],{}," hook acts as a wrapper that contains all our animation code, so it takes effect after React has performed all DOM mutations. It ensures the animation gets rendered in the DOM. The ",[767,981,975],{}," hook is used to target elements we want to animate. It connects our animation code to the section or element to be animated.",[755,984,986],{"id":985},"implementing-animation-sequences","Implementing Animation Sequences",[682,988,989],{},"Now it's time for some real action! Let's implement some animations, but first, we need to create a block of code to animate.",[786,991,994],{"className":992,"code":993,"language":791},[789],"\u003Cdiv>\n    \u003Cdiv className=\"flex flex-col items-center justify-center\">\n        \u003Cdiv>\n            \u003Ch1 className=\"text-8xl text-center mb-20\">\n                Pieces for Developers\n            \u003C\u002Fh1>\n            \u003Cli className=\"text-2xl text-center\">\n                Copy and Save code with Pieces\n            \u003C\u002Fli>\n            \u003Cli className=\"text-2xl text-center\">\n                Convert from one programming language to another using Pieces\n            \u003C\u002Fli>\n            \u003Cli className=\"text-2xl text-center\">\n                Speed up Development Time using the Pieces Copilot\n            \u003C\u002Fli>\n        \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n    {\u002F* This is just static code content, one which we want to animate. Let's create some animation code: *\u002F}\n    {\u002F* target elements with useRef *\u002F}\n    let animateBounce = useRef();\n    let animateLeft = useRef();\n    let animateRight = useRef();\n    let animateUp = useRef();\n\n    useLayoutEffect(() => {\n        gsap.fromTo(\n            animateBounce.current,\n            { y: 40 },\n            { y: 0, duration: 1, repeat: -1, yoyo: true }\n        );\n        gsap.fromTo(\n            animateUp.current,\n            { y: -100, opacity: 0 },\n            {\n                y: 0,\n                duration: 4,\n                opacity: 1,\n            }\n        );\n        gsap.fromTo(\n            animateLeft.current,\n            { x: -200, opacity: 0 },\n            {\n                x: 0,\n                duration: 4,\n                opacity: 1,\n            }\n        );\n        gsap.fromTo(\n            animateRight.current,\n            { x: 200, opacity: 0 },\n            {\n                x: 0,\n                duration: 4,\n                opacity: 1,\n            }\n        );\n    }, []);\n\u003C\u002Fdiv>\n",[767,995,993],{"__ignoreMap":794},[682,997,998,999,1002,1003,1006,1007,1010,1011,1013,1014,1017,1018,1020],{},"The ",[767,1000,1001],{},"animateBounce"," is set in a way that an element repeatedly bounces in an \"up-and-down\" motion like a yoyo. This is why we set ",[767,1004,1005],{},"yoyo:true",", and then we set the repeat property to ",[767,1008,1009],{},"-1",", which makes the animation continuously run. We use the ",[767,1012,878],{}," hook and set our initial value to be ",[767,1015,1016],{},"y:40",", which means it starts 40 pixels from its initial position, and then the property in the second block is set to ",[767,1019,894],{},". The expected animation behavior of this code is to repeatedly move up and down, 40 pixels apart.",[682,1022,998,1023,1026,1027,1030,1031,1034,1035,1030,1038,1041],{},[767,1024,1025],{},"animateUp"," is set in a way that the animation starts 100 pixels away from its end position on the y-axis. We also set the opacity of the first block(which represents the ",[767,1028,1029],{},".from()"," tween) to ",[767,1032,1033],{},"0,"," and the second block(which represents the ",[767,1036,1037],{},".to()",[767,1039,1040],{},"1",". The expected animation behavior of this code is that it starts to descend 100 pixels to its end position like an umbrella.",[682,1043,998,1044,1047,1048,1050,1051,1053],{},[767,1045,1046],{},"animateLeft"," property is set in a way that it comes 200 pixels from the left to its end position. We also set the opacity of the first block to ",[767,1049,853],{}," and set the opacity of the second block to ",[767,1052,1040],{},", which allows the element to gradually be visible as it enters the viewport.",[682,1055,998,1056,1059],{},[767,1057,1058],{},"animateRight"," property is set in a way that it comes 200 pixels away from the right to its end position. Then the opacity is set in a way that it gradually becomes visible as it reaches its end position.",[682,1061,1062],{},"Enough talking! Here's the result of the animation",[682,1064,1065],{},[1066,1067],"img",{"alt":1068,"src":1069},"Animated text in a React app.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fadd-animations-to-react-app-using-gsap\u002Fimg-001.gif",[682,1071,1072,1073,1075,1076,1079,1080,1082,1083,1086,1087,1082,1089,1092],{},"And Voila! The animation acts just as we want it to. The header bounces, the ",[767,1074,1025],{}," animation acts on the ",[775,1077,1078],{},"Copy and Save code with Pieces"," text, the ",[767,1081,1058],{}," acts on the ",[775,1084,1085],{},"Convert from one programming language to another using Pieces text",", and the ",[767,1088,1046],{},[775,1090,1091],{},"Speed up Development Time using Pieces Copilot"," text. Here's how the final code looks like:",[786,1094,1097],{"className":1095,"code":1096,"language":791},[789],"import React, { useRef, useLayoutEffect } from \"react\";\nimport { gsap } from \"gsap\";\n\nconst Pieces = () => {\n    \u002F\u002F target elements with useRef\n    let animateBounce = useRef();\n    let animateLeft = useRef();\n    let animateRight = useRef();\n    let animateUp = useRef();\n\n    useLayoutEffect(() => {\n        gsap.fromTo(\n            animateBounce.current,\n            { y: 40 },\n            { y: 0, duration: 1, repeat: -1, yoyo: true }\n        );\n        gsap.fromTo(\n            animateUp.current,\n            { y: -100, opacity: 0 },\n            {\n                y: 0,\n                duration: 4,\n                opacity: 1,\n            }\n        );\n        gsap.fromTo(\n            animateLeft.current,\n            { x: -200, opacity: 0 },\n            {\n                x: 0,\n                duration: 4,\n                opacity: 1,\n            }\n        );\n        gsap.fromTo(\n            animateRight.current,\n            { x: 200, opacity: 0 },\n            {\n                x: 0,\n                duration: 4,\n                opacity: 1,\n            }\n        );\n    }, []);\n\n    return (\n        \u003Cdiv>\n            \u003Cdiv className=\"flex flex-col items-center justify-center\">\n                \u003Cdiv>\n                    \u003Ch1 ref={animateBounce} className=\"text-8xl text-center mb-20\">\n                        Pieces for Developers\n                    \u003C\u002Fh1>\n                    \u003Cli ref={animateUp} className=\"text-2xl text-center\">\n                        Copy and Save code with Pieces\n                    \u003C\u002Fli>\n                    \u003Cli ref={animateRight} className=\"text-2xl text-center\">\n                        Convert from one programming language to another using Pieces\n                    \u003C\u002Fli>\n                    \u003Cli ref={animateLeft} className=\"text-2xl text-center\">\n                        Speed up Development Time using the Pieces Copilot\n                    \u003C\u002Fli>\n                \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    );\n};\n\nexport default Pieces;\n",[767,1098,1096],{"__ignoreMap":794},[682,1100,1101],{},"And there! We have our animations.ConclusionIn this tutorial, you have learned about GSAP, why you should use GSAP for animations, how to install GSAP, how to use GSAP in React, the working principle of GSAP, and how to implement basic animations using GSAP.",[682,1103,1104],{},"It doesn’t end there, there are tons of animation sequences and properties to try out. Visit the GSAP docs to explore!",[682,1106,1107],{},"Happy animating!",[682,1109,1110],{},"P.S Not Sold on GSAP?",[682,1112,1113,1114,727],{},"Framer Motion is another React animation library to try out. You can check it out by ",[686,1115,1118],{"href":1116,"rel":1117},"https:\u002F\u002Fcode.pieces.app\u002Fblog\u002Fintroduction-to-framer-motion",[690],"following our guide here",{"title":794,"searchDepth":1120,"depth":1120,"links":1121},2,[1122,1123,1127],{"id":714,"depth":1120,"text":715},{"id":730,"depth":1120,"text":731,"children":1124},[1125],{"id":757,"depth":1126,"text":758},3,{"id":913,"depth":1120,"text":914,"children":1128},[1129,1130,1131,1132],{"id":920,"depth":1126,"text":921},{"id":942,"depth":1126,"text":943},{"id":964,"depth":1126,"text":965},{"id":985,"depth":1126,"text":986},"Software Development","2023-12-26T00:00:00.000Z","Master animations in React with GSAP: This tutorial teaches how to integrate GSAP, a powerful JavaScript animation library, for dynamic web animations.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fadd-animations-to-react-app-using-gsap\u002Fhero.jpeg",{},"\u002Fblog\u002Fadd-animations-to-react-app-using-gsap",{"title":673,"description":1135},"blog\u002Fadd-animations-to-react-app-using-gsap","T7_yfThEA42jXeo7odpFxpWl6hF4ciiFG45DVyjuVQY",{"id":1145,"title":674,"body":1146,"description":1150,"draft":1136,"extension":1137,"meta":1153,"navigation":32,"path":1154,"photo":1155,"photoAlt":676,"seo":1156,"stem":1157,"__hash__":1158},"authors\u002Fauthors\u002Fjames-amoo.md",{"type":679,"value":1147,"toc":1151},[1148],[682,1149,1150],{},"James Amoo is a Software Engineer and a Technical Writer. He excels in creating scalable software solutions and crafting clear and concise documentation. Having graduated with a First Class Honours degree in Computer Science, he is fundamentally well-versed in the in-depth concepts of programming.",{"title":794,"searchDepth":1120,"depth":1120,"links":1152},[],{},"\u002Fauthors\u002Fjames-amoo","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fjames-amoo.jpeg",{"title":674,"description":1150},"authors\u002Fjames-amoo","cHsg7jg2RaRueV_cvOOD8JHsrLPQxt-lYAgFPEDW_A8",{"left":1160,"top":1160,"width":1161,"height":1161,"rotate":1160,"vFlip":1136,"hFlip":1136,"body":1162},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]