[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fsvelte-transition-and-animation":671,"blog-author-\u002Fblog\u002Fsvelte-transition-and-animation":1148,"i-material-symbols:arrow-back-rounded":1163},{"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":1135,"buttonUrl":1135,"category":1136,"date":1137,"description":1138,"draft":1139,"editorsPick":1139,"extension":1140,"featured":1139,"image":1141,"imageAlt":1142,"meta":1143,"navigation":32,"ogImage":1135,"ogImageAlt":1135,"path":1144,"seo":1145,"stem":1146,"tags":1135,"__hash__":1147},"blog\u002Fblog\u002Fsvelte-transition-and-animation.md","Svelte Transition and Animation","James Amoo","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Ftailwind-theming-create-light-and-dark-modes\u002Fauthor.jpeg","James Amoo headshot.","james-amoo",{"type":679,"value":680,"toc":1126},"minimark",[681,685,688,693,696,724,728,736,746,749,753,756,762,772,778,781,787,790,796,803,809,823,826,832,835,842,845,851,857,860,866,869,875,898,910,916,927,933,936,940,947,967,973,976,982,989,995,998,1001,1007,1014,1020,1027,1033,1036,1042,1045,1049,1052,1055,1058,1064,1078,1084,1087,1093,1105,1109,1112],[682,683,684],"p",{},"We can all agree that adding animation and transition to web pages improves user experience. Frankly, no one really wants an ancient-looking static webpage these days. As one of the most popular JavaScript libraries, you can easily implement Svelte transition and animation without importing an external animation library. This makes animation easier and improves the performance of your application.",[682,686,687],{},"In this article, you will learn about Svelte animation, Svelte transition, and how to implement them in your Svelte.js application.",[689,690,692],"h2",{"id":691},"prerequisites","Prerequisites",[682,694,695],{},"Before we dive into implementing Svelte animations, you should be familiar with the following:",[697,698,699,709,716],"ul",{},[700,701,702],"li",{},[703,704,708],"a",{"href":705,"rel":706},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FJavaScript",[707],"nofollow","JavaScript",[700,710,711],{},[703,712,715],{"href":713,"rel":714},"https:\u002F\u002Fsvelte.dev\u002F",[707],"Svelte",[700,717,718,723],{},[703,719,722],{"href":720,"rel":721},"https:\u002F\u002Fnodejs.org\u002Fen",[707],"Node.js"," installed on your machine",[689,725,727],{"id":726},"getting-started-with-svelte-transition-and-animation","Getting Started with Svelte Transition and Animation",[682,729,730,731,735],{},"Let’s start by creating a new ",[732,733,734],"code",{},"svelte.js"," project. You can do that by running this command in your terminal:",[737,738,743],"pre",{"className":739,"code":741,"language":742},[740],"language-text","npx degit sveltejs\u002Ftemplate animation-app\n","text",[732,744,741],{"__ignoreMap":745},"",[682,747,748],{},"This should create a Svelte.js project and install the necessary dependencies.",[689,750,752],{"id":751},"implementing-a-svelte-transition","Implementing a Svelte Transition",[682,754,755],{},"In this section, we will learn to implement a transition in JS with Svelte. You can use transitions by importing them from the svelte\u002Ftransition module. Let’s start by creating some static content to implement transitions:",[737,757,760],{"className":758,"code":759,"language":742},[740],"\u003Cscript>\n\n\u003C\u002Fscript>\n\n\u003Cdiv>\n   \u003Ch1>Pieces for Developers\u003C\u002Fh1>\n   \u003Ch1>Your Workflow Copilot\u003C\u002Fh1>\n   \u003Ch1>Speed up Development Time using the Pieces Copilot\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n",[732,761,759],{"__ignoreMap":745},[682,763,764,765,768,769,771],{},"Here, we have some static content. Now we want to apply a ",[732,766,767],{},"fade"," transition to it. First, we have to import the ",[732,770,767],{}," transition in our script tag:",[737,773,776],{"className":774,"code":775,"language":742},[740],"\u003Cscript>\nimport { fade } from 'svelte\u002Ftransition';\n\u003C\u002Fscript>\n",[732,777,775],{"__ignoreMap":745},[682,779,780],{},"The next thing we want to do is create a button to trigger our transition. A Svelte transition can be triggered through a page load, button, or when some content arrives in the viewport. In this tutorial, our Svelte transitions will be triggered by a button. We want a button that toggles the visibility of the content. We can update the logic in our script tag:",[737,782,785],{"className":783,"code":784,"language":742},[740],"\u003Cscript>\n import { fade } from 'svelte\u002Ftransition';\n let isVisible = false;\n\n function toggleVisibility() {\n    isVisible = !isVisible;\n  }\n\u003C\u002Fscript>\n",[732,786,784],{"__ignoreMap":745},[682,788,789],{},"Then create our button:",[737,791,794],{"className":792,"code":793,"language":742},[740],"\u003Cbutton on:click={toggleVisibility}>Toggle content\u003C\u002Fbutton>\n",[732,795,793],{"__ignoreMap":745},[682,797,798,799,802],{},"This toggles ‘true’ or ‘false’ when the button is clicked. If the state is true, the content is shown. If the state is false, the content is hidden. The last piece of action is to apply this logic to our static content. We can do that by using the conditional ",[732,800,801],{},"#if"," block in Svelte:",[737,804,807],{"className":805,"code":806,"language":742},[740],"{#if isVisible}\n  \u003Cdiv transition:fade>\n   \u003Ch1>Pieces for Developers\u003C\u002Fh1>\n   \u003Ch1>Your Workflow Copilot\u003C\u002Fh1>\n   \u003Ch1>Speed up Development Time using the Pieces Copilot\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n{\u002Fif}\n",[732,808,806],{"__ignoreMap":745},[682,810,811,812,814,815,818,819,822],{},"The ",[732,813,801],{}," block controls the rendering of content and only shows the content if the state is true. Notice we also added a transition timing function, ",[732,816,817],{},"transition:fade,"," to the ",[732,820,821],{},"div"," tag to apply the fade transition to that particular content.",[682,824,825],{},"Here’s the full code:",[737,827,830],{"className":828,"code":829,"language":742},[740],"\u003Cscript>\n  import { fade } from 'svelte\u002Ftransition';\n  let isVisible = false;\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n  }\n\u003C\u002Fscript>\n\n\u003Cbutton on:click={toggleVisibility}>Toggle content\u003C\u002Fbutton>\n\n{#if isVisible}\n  \u003Cdiv transition:fade>\n   \u003Ch1>Pieces for Developers\u003C\u002Fh1>\n   \u003Ch1>Your Workflow Copilot\u003C\u002Fh1>\n   \u003Ch1>Speed up Development Time using the Pieces Copilot\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n{\u002Fif}\n",[732,831,829],{"__ignoreMap":745},[682,833,834],{},"Here’s the result of the transition:",[682,836,837],{},[838,839],"img",{"alt":840,"src":841},"Toggle Content Button shown in a browser","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fsvelte-transition-and-animation\u002Fimg-001.png",[682,843,844],{},"And there! The content fades in when we click on the button. By default, the fade transition has a duration of 400 milliseconds and a transition delay of 0 milliseconds. However, this can also be manually specified. Let’s see how we would apply a duration of 1200 milliseconds and a delay of 400 milliseconds:",[737,846,849],{"className":847,"code":848,"language":742},[740],"{#if isVisible}\n \u003Cdiv transition:fade={{delay:400, duration:1200}}>\n \u003Ch1>Pieces for Developers\u003C\u002Fh1>\n \u003Ch1>Your Workflow Copilot\u003C\u002Fh1>\n \u003Ch1>Speed up Development Time using the Pieces Copilot\u003C\u002Fh1>\n \u003C\u002Fdiv>\n{\u002Fif}\n",[732,850,848],{"__ignoreMap":745},[682,852,853,854,856],{},"In the ",[732,855,767],{}," attribute, we added custom properties to control the delay and duration of the transition.",[682,858,859],{},"Let’s study the behavior:",[682,861,862],{},[838,863],{"alt":864,"src":865},"Fade attribute in Svelte transition and animation.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fsvelte-transition-and-animation\u002Fimg-002.png",[682,867,868],{},"In the above demo, we see that when the button is clicked, the content delays for a while before it comes onto the viewport. Similarly, when the button is clicked again, the content persists for a while before it leaves the viewport. This is because we manually set the values for the delay and duration. Feel free to toggle the values as you want.",[682,870,871,872,874],{},"Not quite sold on the ",[732,873,767],{}," transition JS? There are seven basic Svelte transition functions:",[876,877,878,880,883,886,889,892,895],"ol",{},[700,879,767],{},[700,881,882],{},"fly",[700,884,885],{},"slide",[700,887,888],{},"blur",[700,890,891],{},"crossfade",[700,893,894],{},"draw",[700,896,897],{},"scale",[682,899,900,901,903,904,906,907,909],{},"Let’s see how the ",[732,902,882],{}," transition function behaves. The ",[732,905,882],{}," transition function takes the x and y axis (position where you want the content to fly from and to) as parameters, as well as the duration, delay, and opacity. We can apply the ",[732,908,882],{}," transition to our static content:",[737,911,914],{"className":912,"code":913,"language":742},[740],"\u003Cscript>\n  import { fly } from 'svelte\u002Ftransition';\n  let isVisible = false;\n\n  function toggleVisibility() {\n    isVisible = !isVisible;\n  }\n\u003C\u002Fscript>\n\n\u003Cbutton on:click={toggleVisibility}>Toggle content\u003C\u002Fbutton>\n\n{#if isVisible}\n  \u003Cdiv transition:fly={{x:200, y:500, delay:400, duration:1200}}>\n   \u003Ch1>Pieces for Developers\u003C\u002Fh1>\n   \u003Ch1>Your Workflow Copilot\u003C\u002Fh1>\n   \u003Ch1>Speed up Development Time using the Pieces Copilot\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n{\u002Fif}\n",[732,915,913],{"__ignoreMap":745},[682,917,918,919,922,923,926],{},"Here, we set the x-axis value to ",[732,920,921],{},"100"," and the y-axis to ",[732,924,925],{},"400"," and then set custom values to control the delay and duration of the Svelte transition. The expected behavior is that the content comes into the viewport from a position 200 pixels away from the original position on the x-axis and a position 500 pixels away from the original position on the y-axis. Here’s how it behaves:",[682,928,929],{},[838,930],{"alt":931,"src":932},"Toggler Content in localhost:8080, showing an updated Svelte transition.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fsvelte-transition-and-animation\u002Fimg-003.png",[682,934,935],{},"Transition completed! There, the transition behaves as expected. Feel free to explore other Svelte transition functions in implementing visually appealing transitions.",[689,937,939],{"id":938},"implementing-svelte-animation","Implementing Svelte Animation",[682,941,942,943,946],{},"Svelte provides a variety of animation in the ",[732,944,945],{},"svelte\u002Fanimate"," module which is more straightforward than the transition functions. It provides a FLIP (First, Last, Invert, Play) animation function that takes in an element's start and end position and animates between them. The flip function accepts three parameters; delay, duration, and easing functions, which we are already familiar with from transitions.",[682,948,949,950,953,954,956,957,959,960,956,963,966],{},"Before we see how this works, let’s have an idea of what we can achieve with the ",[732,951,952],{},"flip"," function. Suppose we have a list of items. We can animate these items such that they “flip” or change position when a button is clicked. We start by importing ",[732,955,952],{}," from the ",[732,958,945],{}," module and ",[732,961,962],{},"writable",[732,964,965],{},"svelte\u002Fstore"," to store our items.",[737,968,971],{"className":969,"code":970,"language":742},[740],"\u003Cscript>\n    import { flip } from 'svelte\u002Fanimate';\n    import { writable } from 'svelte\u002Fstore';\n\u003C\u002Fscript>\n",[732,972,970],{"__ignoreMap":745},[682,974,975],{},"Unlike the implementation of Svelte transitions where we had to use some static content, we will save the list of items in an array so it’s easy to manipulate.",[737,977,980],{"className":978,"code":979,"language":742},[740],"let items = writable([\n        { id: 1, name: 'Pieces for Developers' },\n        { id: 2, name: 'Your Workflow Copilot' },\n        { id: 3, name: 'Speed up Development Time using the Pieces Copilot' }\n    ]);\n",[732,981,979],{"__ignoreMap":745},[682,983,984,985,988],{},"Then we can create a function to handle how the content shuffles. This can be done by using the ",[732,986,987],{},"Math.random()"," JavaScript function, which captures the true intent of a shuffle (not being able to predict its next order of arrangement).",[737,990,993],{"className":991,"code":992,"language":742},[740],"function shuffleItems() {\n        items.update(currentItems => {\n let result = [...currentItems];\n            result.sort(() => Math.random() - 0.5);\n return result;\n        });\n    }\n",[732,994,992],{"__ignoreMap":745},[682,996,997],{},"That’s all on the logic side.",[682,999,1000],{},"Let’s implement some basic styling to make it more visually appealing.",[737,1002,1005],{"className":1003,"code":1004,"language":742},[740],"\u003Cstyle>\n .item {\n padding: 10px;\n margin: 4px;\n background-color: lightblue;\n border: 1px solid blue;\n cursor: pointer;\n    }\n\u003C\u002Fstyle>\n",[732,1006,1004],{"__ignoreMap":745},[682,1008,1009,1010,1013],{},"Then we can create our button and define the ",[732,1011,1012],{},"animate:flip"," property.",[737,1015,1018],{"className":1016,"code":1017,"language":742},[740],"\u003Cbutton on:click={shuffleItems}>Shuffle Items\u003C\u002Fbutton>\n\u003Cul>\n    {#each $items as item (item.id)}\n \u003Cli animate:flip={{ duration: 300 }} class=\"item\">\n {item.name}\n \u003C\u002Fli>\n    {\u002Feach}\n\u003C\u002Ful>\n",[732,1019,1017],{"__ignoreMap":745},[682,1021,1022,1023,1026],{},"We use the ",[732,1024,1025],{},"#each"," block to render and iterate over the items defined in the array. Here’s the full code:",[737,1028,1031],{"className":1029,"code":1030,"language":742},[740],"\u003Cscript>\n import { flip } from 'svelte\u002Fanimate';\n import { writable } from 'svelte\u002Fstore';\n\n let items = writable([\n        { id: 1, name: 'Pieces for Developers' },\n        { id: 2, name: 'Your Workflow Copilot' },\n        { id: 3, name: 'Speed up Development Time using the Pieces Copilot' }\n    ]);\n\n function shuffleItems() {\n        items.update(currentItems => {\n let result = [...currentItems];\n            result.sort(() => Math.random() - 0.5);\n return result;\n        });\n    }\n\u003C\u002Fscript>\n\n\u003Cstyle>\n .item {\n padding: 10px;\n margin: 4px;\n background-color: lightblue;\n border: 1px solid blue;\n cursor: pointer;\n    }\n\u003C\u002Fstyle>\n\n\u003Cbutton on:click={shuffleItems}>Shuffle Items\u003C\u002Fbutton>\n\u003Cul>\n    {#each $items as item (item.id)}\n \u003Cli animate:flip={{ duration: 300 }} class=\"item\">\n            {item.name}\n \u003C\u002Fli>\n    {\u002Feach}\n\u003C\u002Ful>\n",[732,1032,1030],{"__ignoreMap":745},[682,1034,1035],{},"The expected behavior of this block of code is a list of items that flips when a button is clicked. Here’s how it behaves:",[682,1037,1038],{},[838,1039],{"alt":1040,"src":1041},"List that can be shuffled with a button using Svelte animation.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fsvelte-transition-and-animation\u002Fimg-004.png",[682,1043,1044],{},"Lovely! It works exactly how we want it to.",[689,1046,1048],{"id":1047},"svelte-animation-x-svelte-transition-x-pieces","Svelte Animation x Svelte Transition x Pieces",[682,1050,1051],{},"Learning how to implement complex Svelte transitions and animations can be taxing, especially if you’re new to Svelte. There may be massive gaps in what the Svelte docs provide and the type of Svelte animation you’re looking to implement, from an ease in animation to a horizontal fade, but that’s where Pieces comes in.",[682,1053,1054],{},"With Pieces Copilot, which understands the context of your code, you can scale much higher in code complexity with ease while being guided through every bit of it. Let’s see how this works.",[682,1056,1057],{},"From the codebase we used earlier in implementing fade transitions, we can ask Pieces to create more complex transitions from that code.",[682,1059,1060],{},[838,1061],{"alt":1062,"src":1063},"Using the terminal in an IDE.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fsvelte-transition-and-animation\u002Fimg-005.png",[682,1065,1066,1067,1072,1073,1077],{},"In the demo above, I asked the ",[703,1068,1071],{"href":1069,"rel":1070},"https:\u002F\u002Fdocs.pieces.app\u002Ffeatures\u002Fpieces-copilot",[707],"Pieces Copilot"," to “",[1074,1075,1076],"em",{},"Modify this code such that the content comes from the right when the button is clicked","”. Based on the context, Pieces Copilot immediately gives a response to that prompt, which is a code snippet that does just that. Here’s the code generated by the copilot:",[737,1079,1082],{"className":1080,"code":1081,"language":742},[740],"\u003Cscript>\n import { fly } from 'svelte\u002Ftransition';\n let isVisible = false;\n\n function toggleVisibility() {\n    isVisible = !isVisible;\n  }\n\u003C\u002Fscript>\n\n\u003Cbutton on:click={toggleVisibility}>Toggle content\u003C\u002Fbutton>\n\n{#if isVisible}\n \u003Cdiv transition:fly=\"{{x: '100%', duration: 500}}\">\n \u003Ch1>Pieces for Developers\u003C\u002Fh1>\n \u003Ch1>Your Workflow Copilot\u003C\u002Fh1>\n \u003Ch1>Speed up Development Time using the Pieces Copilot\u003C\u002Fh1>\n \u003C\u002Fdiv>\n{\u002Fif}\n",[732,1083,1081],{"__ignoreMap":745},[682,1085,1086],{},"Here’s how it behaves:",[682,1088,1089],{},[838,1090],{"alt":1091,"src":1092},"Showing how the final web app behaves.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fsvelte-transition-and-animation\u002Fimg-006.png",[682,1094,1095,1096,1100,1101,1104],{},"The content flies into the viewport from the right, just as we as specified. You pass in the prompt or how you want the animation to behave, and Pieces handles the code. Do ",[1097,1098,1099],"strong",{},"more"," while typing ",[1097,1102,1103],{},"less",".",[689,1106,1108],{"id":1107},"conclusion","Conclusion",[682,1110,1111],{},"In this article, you have learned about Svelte animation, Svelte transition, and how to implement more complex code with Pieces. Feel free to explore more Svelte animations and let Pieces be your ultimate guide. Good luck in your quest and happy coding!",[682,1113,1114,1115,1120,1121,1104],{},"If you're interested in learning more about Svelte and alternatives, compare ",[703,1116,1119],{"href":1117,"rel":1118},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fsvelte-vs-angular-which-framework-suits-your-project",[707],"Svelte vs Angular"," and ",[703,1122,1125],{"href":1123,"rel":1124},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fsvelte-vs-react",[707],"Svelte vs React",{"title":745,"searchDepth":1127,"depth":1127,"links":1128},2,[1129,1130,1131,1132,1133,1134],{"id":691,"depth":1127,"text":692},{"id":726,"depth":1127,"text":727},{"id":751,"depth":1127,"text":752},{"id":938,"depth":1127,"text":939},{"id":1047,"depth":1127,"text":1048},{"id":1107,"depth":1127,"text":1108},null,"Software Development","2024-08-15T00:00:00.000Z","Adding transitions and animations to your web pages is impressive and better for the user. Let’s discuss how Svelte.js and Pieces make them easy to implement.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fsvelte-transition-and-animation\u002Fhero.jpeg","Code in an IDE.",{},"\u002Fblog\u002Fsvelte-transition-and-animation",{"title":673,"description":1138},"blog\u002Fsvelte-transition-and-animation","Ou_Ip42AsvQ9FI4LopFxnAo0HwQUqcBiNE4D7TYjVhA",{"id":1149,"title":674,"body":1150,"description":1154,"draft":1139,"extension":1140,"meta":1157,"navigation":32,"path":1158,"photo":1159,"photoAlt":1135,"seo":1160,"stem":1161,"__hash__":1162},"authors\u002Fauthors\u002Fjames-amoo.md",{"type":679,"value":1151,"toc":1155},[1152],[682,1153,1154],{},"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":745,"searchDepth":1127,"depth":1127,"links":1156},[],{},"\u002Fauthors\u002Fjames-amoo","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fjames-amoo.jpeg",{"title":674,"description":1154},"authors\u002Fjames-amoo","cHsg7jg2RaRueV_cvOOD8JHsrLPQxt-lYAgFPEDW_A8",{"left":1164,"top":1164,"width":1165,"height":1165,"rotate":1164,"vFlip":1139,"hFlip":1139,"body":1166},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>"]