[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue":671,"blog-author-\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue":1348,"i-material-symbols:arrow-back-rounded":1360},{"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":1334,"date":1335,"description":1336,"draft":1337,"editorsPick":1337,"extension":1338,"featured":1337,"image":1339,"imageAlt":1340,"meta":1341,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1342,"seo":1343,"stem":1344,"tags":1345,"__hash__":1347},"blog\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue.md","Using Locomotive Scroll in Vue for Smoother UX","Sam Victor","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fgoogle-charts-react-data-visualization\u002Fauthor.png",null,"sam-victor",{"type":679,"value":680,"toc":1311},"minimark",[681,685,690,701,705,714,718,721,732,741,747,752,759,765,783,811,818,825,829,839,845,855,862,868,882,889,896,902,905,909,912,916,919,925,928,934,938,941,947,957,963,967,970,978,981,987,993,999,1005,1011,1017,1023,1027,1030,1036,1055,1061,1065,1074,1079,1092,1098,1102,1105,1111,1119,1125,1127,1131,1134,1140,1154,1160,1164,1173,1179,1185,1191,1194,1200,1215,1221,1227,1239,1245,1251,1264,1270,1278,1284,1290,1294,1302],[682,683,684],"p",{},"Websites, especially those with enormous amounts of material, can use scrolling animations as features to make browsing more enjoyable. With the advent of specialized libraries, scrolling animations are becoming increasingly widespread on the web. Web pages may use a variety of scroll movements, including sticky scroll, smooth scroll, CSS parallax, and more. In this article, we’ll be using Locomotive scroll to create a smoother user experience with scroll effects.",[686,687,689],"h2",{"id":688},"what-is-locomotive-scroll","What is Locomotive Scroll?",[682,691,692,693,700],{},"The Locomotive scroll is a ",[694,695,699],"a",{"href":696,"rel":697},"https:\u002F\u002Fgithub.com\u002Flocomotivemtl\u002Flocomotive-scroll#readme",[698],"nofollow","scrolling library"," that is used to create custom scrollers that support touch, keyboard, and mouse interactions. It comes with a variety of customizable features including Locomotive Smooth scroll, Page overlay scroll, and parallax effects.",[686,702,704],{"id":703},"why-use-locomotive-scroll","Why use Locomotive Scroll?",[682,706,707,708,713],{},"An ",[694,709,712],{"href":710,"rel":711},"https:\u002F\u002Fpieces.app\u002Fblog\u002Fimprove-website-accessibility",[698],"accessible and fully customized website"," is one of a developer’s main priorities for users. With the browser's default scroll, just a few scroll effects are possible. However, we can alter how your website scrolls and behaves when you go from page to page thanks to the Locomotive scroll library. Now, let’s walk through how to use Locomotive scroll.",[686,715,717],{"id":716},"installation","Installation",[682,719,720],{},"Let’s get started with scaffolding our Vue application. Run the command below in the terminal.",[722,723,728],"pre",{"className":724,"code":726,"language":727},[725],"language-text","yarn create vite my-vue-app vue-locomotive-scroll\n","text",[729,730,726],"code",{"__ignoreMap":731},"",[682,733,734,735,740],{},"Once the command above is done installing all of the required files, install the ",[694,736,739],{"href":737,"rel":738},"https:\u002F\u002Fgithub.com\u002Flocomotivemtl\u002Flocomotive-scroll",[698],"locomotive scroll"," library using the command below.",[722,742,745],{"className":743,"code":744,"language":727},[725],"cd vue-locomotive-scroll && yarn add locomotive-scroll\n",[729,746,744],{"__ignoreMap":731},[748,749,751],"h3",{"id":750},"project-setup","Project Setup",[682,753,754,755,758],{},"Let’s create a basic home page that we’ll customize later with some cool locomotive scroll speed effects. To achieve this, replace all of the code in the ",[729,756,757],{},"App.vue"," file with the code below.",[722,760,763],{"className":761,"code":762,"language":727},[725],"\u003Ctemplate>\n    \u003Cmain>\n        \u003Csection class=\"hello\">\n            \u003Ch1>Hello World From Sam\u003C\u002Fh1>\n        \u003C\u002Fsection>\n        \u003Csection id=\"sticky\">\n            \u003Ch1>Sticky Scroll Example\u003C\u002Fh1>\n            \u003Cp>Placeholders Placeholders\u003C\u002Fp>\n            \u003Cp>Placeholders Placeholders\u003C\u002Fp>\n            \u003Cp>Placeholders Placeholders\u003C\u002Fp>\n            \u003Cp>Placeholders Placeholders\u003C\u002Fp>\n        \u003C\u002Fsection>\n        \u003Csection class=\"parallax\">\n            \u003Ch1>Vertical Parallax Scroll\u003C\u002Fh1>\n            \u003Ch1>Horizontal Parallax Scroll\u003C\u002Fh1>\n        \u003C\u002Fsection>\n        \u003Csection class=\"scroll-into-view\">\n            \u003Ch1>Here, we're calling the Animate class when the content scrolls into view\u003C\u002Fh1>\n        \u003C\u002Fsection>\n    \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n    \u002F\u002F You can add JavaScript here for dynamic functionalities if needed\n\u003C\u002Fscript>\n\n\u003Cstyle>\n    section {\n        height: 100vh; \u002F* Full viewport height *\u002F\n        display: flex; \u002F* Flexbox for centering content *\u002F\n        align-items: center; \u002F* Center content vertically *\u002F\n        justify-content: center; \u002F* Center content horizontally *\u002F\n        color: white; \u002F* Text color *\u002F\n        font-size: xx-large; \u002F* Large font size *\u002F\n    }\n\n    .hello {\n        background-color: red; \u002F* Background color *\u002F\n        background-image: url(\".\u002Fbackground.png\"); \u002F* Background image *\u002F\n        color: rgba(0, 0, 0, 0.745); \u002F* Text color with transparency *\u002F\n    }\n\n    .parallax {\n        background-color: greenyellow; \u002F* Background color for parallax section *\u002F\n    }\n\n    #sticky {\n        background-color: rgba(137, 43, 226, 0.469); \u002F* Sticky section background color *\u002F\n        padding: 50px; \u002F* Padding for content *\u002F\n    }\n\n    .scroll-into-view {\n        background-color: black; \u002F* Background color *\u002F\n        color: white; \u002F* Text color *\u002F\n    }\n\u003C\u002Fstyle>\n",[729,764,762],{"__ignoreMap":731},[682,766,767,768,771,772,771,775,778,779,782],{},"In the code above, we’re creating four sections, namely, ",[729,769,770],{},"hello",", ",[729,773,774],{},"sticky",[729,776,777],{},"parallax",", and ",[729,780,781],{},"scroll-into-view",". These will be customized later on in this tutorial.",[682,784,785,789,790,789,792,789,795,789,802,789,805,789,808],{},[786,787,788],"em",{},"For the"," ",[729,791,770],{},[786,793,794],{},"style, we’re adding a background image. Download this",[694,796,799],{"href":797,"rel":798},"https:\u002F\u002Fres.cloudinary.com\u002Fiamvictorsam\u002Fimage\u002Fupload\u002Fv1665509403\u002Fbackground_qtdtz5.png",[698],[786,800,801],{},"image",[786,803,804],{},"and add it to the",[729,806,807],{},"src\u002Fassets",[786,809,810],{},"folder.",[682,812,813,814,817],{},"With the project setup complete, run the code using ",[729,815,816],{},"yarn dev"," to see the results below.",[682,819,820],{},[821,822],"img",{"alt":823,"src":824},"locomotive scrolling between 4 slides","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue\u002Fimg-001.gif",[686,826,828],{"id":827},"configuring-locomotive-scroll","Configuring Locomotive Scroll",[682,830,831,832,835,836,838],{},"Let’s configure the Locomotive Scroll library into our application before looking at its features. Update the ",[729,833,834],{},"\u003Cmain>"," tag in the ",[729,837,757],{}," file.",[722,840,843],{"className":841,"code":842,"language":727},[725],"\u003Ctemplate>\n    \u003Cmain ref=\"container\">\n        \u003C!-- other code blocks here -->\n    \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[729,844,842],{"__ignoreMap":731},[682,846,847,848,850,851,854],{},"In the code block above, we’re giving the ",[729,849,834],{}," tag an identifier, a ",[729,852,853],{},"ref"," value.",[682,856,857,858,861],{},"Next, copy and paste the code below into the ",[729,859,860],{},"\u003Cscript>"," tag.",[722,863,866],{"className":864,"code":865,"language":727},[725],"\u003Cscript>\nimport LocomotiveScroll from \"locomotive-scroll\";\n\nexport default {\n    methods: {\n        setLocomotiveScroll() {\n            new LocomotiveScroll({\n                el: this.$refs.container,\n            });\n        },\n    },\n    mounted() {\n        this.setLocomotiveScroll();\n    },\n};\n\u003C\u002Fscript>\n",[729,867,865],{"__ignoreMap":731},[682,869,870,871,874,875,877,878,881],{},"In the code above, we’re calling the ",[729,872,873],{},"setLocomotiveScroll()"," function whenever the page is initialized on the browser. The ",[729,876,873],{}," function creates a new ",[729,879,880],{},"LocomotiveScroll"," instance that accepts certain properties for its customization.",[682,883,884,885,888],{},"The ",[729,886,887],{},"el"," property initializes its children as a scrollable container.",[682,890,891,892,895],{},"Finally, replace all of the code in the ",[729,893,894],{},"style.css"," file with the code block below.",[722,897,900],{"className":898,"code":899,"language":727},[725],"* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nhtml.has-scroll-smooth {\n    overflow: hidden;\n}\n\nhtml.has-scroll-dragging {\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n.has-scroll-smooth body {\n    overflow: hidden;\n}\n\n.has-scroll-smooth [data-scroll-container] {\n    min-height: 100vh;\n}\n\n[data-scroll-direction=\"horizontal\"] [data-scroll-container] {\n    height: 100vh;\n    display: inline-block;\n    white-space: nowrap;\n}\n\n[data-scroll-direction=\"horizontal\"] [data-scroll-section] {\n    display: inline-block;\n    vertical-align: top;\n    white-space: nowrap;\n    height: 100%;\n}\n\n.c-scrollbar {\n    position: absolute;\n    right: 0;\n    top: 0;\n    width: 11px;\n    height: 100%;\n    transform-origin: center right;\n    transition: transform 0.3s, opacity 0.3s;\n    opacity: 0;\n}\n\n.c-scrollbar:hover {\n    transform: scaleX(1.45);\n}\n\n.c-scrollbar:hover,\n.has-scroll-scrolling .c-scrollbar,\n.has-scroll-dragging .c-scrollbar {\n    opacity: 1;\n}\n\n[data-scroll-direction=\"horizontal\"] .c-scrollbar {\n    width: 100%;\n    height: 10px;\n    top: auto;\n    bottom: 0;\n    transform: scaleY(1);\n}\n\n[data-scroll-direction=\"horizontal\"] .c-scrollbar:hover {\n    transform: scaleY(1.3);\n}\n\n.c-scrollbar_thumb {\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: black;\n    opacity: 0.5;\n    width: 7px;\n    border-radius: 10px;\n    margin: 2px;\n    cursor: -webkit-grab;\n    cursor: grab;\n}\n\n.has-scroll-dragging .c-scrollbar_thumb {\n    cursor: -webkit-grabbing;\n    cursor: grabbing;\n}\n\n[data-scroll-direction=\"horizontal\"] .c-scrollbar_thumb {\n    right: auto;\n    bottom: 0;\n}\n",[729,901,899],{"__ignoreMap":731},[682,903,904],{},"The code block above is the recommended style when using Locomotive Scroll to prevent page distortion.",[686,906,908],{"id":907},"locomotive-scroll-features","Locomotive Scroll Features",[682,910,911],{},"A number of features are included in the Locomotive Scroll package to provide your website with a nice UX and UI. We'll examine some of the Locomotive Scroll package's most practical capabilities in this section.",[748,913,915],{"id":914},"locomotive-smooth-scroll","Locomotive Smooth Scroll",[682,917,918],{},"Locomotive Smooth Scroll is one of the major Locomotive Scroll effects; this gives the page a sleek and fluid scroll experience. Let’s add this to our page.",[722,920,923],{"className":921,"code":922,"language":727},[725],"export default {\n    methods: {\n        setLocomotiveScroll() {\n            new LocomotiveScroll({\n                el: this.$refs.container,\n                smooth: true, \u002F\u002F added this\n            });\n        },\n    },\n    mounted() {\n        this.setLocomotiveScroll();\n    },\n};\n",[729,924,922],{"__ignoreMap":731},[682,926,927],{},"In the code block above, we’re setting the smooth property to true.",[682,929,930],{},[821,931],{"alt":932,"src":933},"locomotive scrolling quickly between 4 slides","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue\u002Fimg-002.gif",[748,935,937],{"id":936},"locomotive-scroll-speed","Locomotive Scroll Speed",[682,939,940],{},"With the Locomotive Scroll library, the scrolling speed of a page can be fully customized. This feature is dependent on the smooth scrolling feature.",[722,942,945],{"className":943,"code":944,"language":727},[725],"export default {\n    methods: {\n        setLocomotiveScroll() {\n            new LocomotiveScroll({\n                el: this.$refs.container,\n                smooth: true,\n                multiplier: 5, \u002F\u002F add this\n            });\n        },\n    },\n    mounted() {\n        this.setLocomotiveScroll();\n    },\n};\n",[729,946,944],{"__ignoreMap":731},[682,948,949,950,953,954,956],{},"In the block above, we’re adding the ",[729,951,952],{},"multiplier"," property to the ",[729,955,880],{}," instance. The multiplier boosts or reduces the scrolling speed of the page based on the value provided.",[682,958,959],{},[821,960],{"alt":961,"src":962},"locomotive scrolling very quickly between 4 slides","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue\u002Fimg-003.gif",[686,964,966],{"id":965},"locomotive-scroll-attributes","Locomotive Scroll Attributes",[682,968,969],{},"Before looking into other Locomotive Scroll features, let’s review Locomotive Scroll attributes.",[971,972,973],"blockquote",{},[682,974,975],{},[786,976,977],{},"Locomotive scroll attributes are custom classes that give children tags special locomotive effects.",[682,979,980],{},"These include:",[682,982,983,986],{},[729,984,985],{},"data-scroll-container",": This is a required attribute used mostly in the top-level tag of the container to define the scroll container of the application.",[682,988,989,992],{},[729,990,991],{},"data-scroll",": This attribute detects if an element is in view, and is necessary when trying to add an effect to any element.",[682,994,995,998],{},[729,996,997],{},"data-scroll-section",": This attribute defines a scrollable section within your section.",[682,1000,1001,1004],{},[729,1002,1003],{},"data-scroll-speed",": This sets the speed of the element it's used on.",[682,1006,1007,1010],{},[729,1008,1009],{},"data-scroll-direction",": This helps in parallax scrolling. It scrolls the element into place from the direction specified.",[682,1012,1013,1016],{},[729,1014,1015],{},"data-scroll-target",": This attribute targets the element’s location when it scrolls into view.",[682,1018,1019,1022],{},[729,1020,1021],{},"data-scroll-repeat",": When set as true, this attribute makes all effects repeat their initial phase, thus causing a continuous effect when scrolling over.",[748,1024,1026],{"id":1025},"section-overlay-scroll","Section Overlay Scroll",[682,1028,1029],{},"Creating a nice visual effect where a section scrolls over the previous section before going out of view can easily be achieved with the Locomotive Scroll library. Let’s add this to our application.",[722,1031,1034],{"className":1032,"code":1033,"language":727},[725],"\u003Ctemplate>\n    \u003Cmain ref=\"container\" data-scroll-container>\n        \u003Csection className=\"hello\" data-scroll data-scroll-speed=\"2\" data-scroll-section>\n            \u003Ch1>Hello World From Sam\u003C\u002Fh1>\n        \u003C\u002Fsection>\n        \u003Csection id=\"sticky\" data-scroll-section>\n            \u003Ch1>Sticky scroll example\u003C\u002Fh1>\n            \u003Cp>Placeholders Placeholders\u003C\u002Fp>\n            \u003Cp>Placeholders Placeholders\u003C\u002Fp>\n            \u003Cp>Placeholders Placeholders\u003C\u002Fp>\n            \u003Cp>Placeholders Placeholders\u003C\u002Fp>\n        \u003C\u002Fsection>\n        \u003Csection className=\"parallax\" data-scroll-section>\n            \u003Ch1>Vertical Parallax scroll\u003C\u002Fh1>\n            \u003Ch1>Horizontal Parallax Scroll\u003C\u002Fh1>\n        \u003C\u002Fsection>\n        \u003Csection className=\"scroll-into-view\" data-scroll-section>\n            \u003Ch1>Here, we're calling the Animate class when the Content scrolls into view\u003C\u002Fh1>\n        \u003C\u002Fsection>\n    \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[729,1035,1033],{"__ignoreMap":731},[682,1037,1038,1039,1041,1042,1044,1045,1047,1048,1050,1051,1054],{},"In the code block above, we’re initializing all of the sections using the ",[729,1040,997],{}," attribute to prevent page distortion among the sections. We’re then making the ",[729,1043,770],{}," section with the ",[729,1046,991],{}," attribute to enable the Locomotive Scroll feature to work on it when its in view. We’re also delaying the scroll-out time of the ",[729,1049,770],{}," sections by setting the speed to 2. This combo gives rise to the ",[729,1052,1053],{},"Scroll-overlay"," animation.",[682,1056,1057],{},[821,1058],{"alt":1059,"src":1060},"locomotive scrolling with an overlay between 4 slides","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue\u002Fimg-004.gif",[748,1062,1064],{"id":1063},"locomotive-scroll-sticky","Locomotive Scroll Sticky",[682,1066,1067,1068,835,1071,1073],{},"Pinning an element in its position when scrolling can also be implemented with the Locomotive Scroll library. Let’s implement this by updating the ",[729,1069,1070],{},"\u003Ch1>",[729,1072,774],{}," section.",[722,1075,1077],{"className":1076,"code":1033,"language":727},[725],[729,1078,1033],{"__ignoreMap":731},[682,1080,1081,1082,1085,1086,1089,1090,1073],{},"In the code block above, we added the ",[729,1083,1084],{},"data-scroll-sticky"," attribute to our ",[729,1087,1088],{},"h1"," tag. We also pinpointed the target section that we want the text to stick to, which is the ",[729,1091,774],{},[682,1093,1094],{},[821,1095],{"alt":1096,"src":1097},"locomotive scrolling with an overlay and sticky text between 4 slides","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue\u002Fimg-005.gif",[748,1099,1101],{"id":1100},"locomotive-scroll-parallax","Locomotive Scroll Parallax",[682,1103,1104],{},"Parallax scrolling means moving elements around a page either horizontally or vertically at different speeds when scrolling. Let’s see how we can achieve this in our Locomotive parallax section.",[722,1106,1109],{"className":1107,"code":1108,"language":727},[725],"\u003Ctemplate>\n    \u003Cmain ref=\"container\">\n        \u003C!-- other code blocks here -->\n        \u003Csection className=\"parallax\" data-scroll-section>\n            \u003Ch1 data-scroll data-scroll-direction=\"vertical\" data-scroll-speed=\"9\">\n                Vertical Parallax scroll\n            \u003C\u002Fh1>\n            \u003Ch1 data-scroll data-scroll-direction=\"horizontal\" data-scroll-speed=\"9\">\n                Horizontal Parallax Scroll\n            \u003C\u002Fh1>\n        \u003C\u002Fsection>\n        \u003C!-- other code blocks here -->\n    \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[729,1110,1108],{"__ignoreMap":731},[682,1112,1081,1113,1115,1116,1118],{},[729,1114,1009],{}," to both ",[729,1117,1088],{}," tags and specified the direction we want them to flow. We also increased the speed to make it move faster when scrolling.",[682,1120,1121],{},[821,1122],{"alt":1123,"src":1124},"locomotive scrolling with an overlay and parallax text scroll between 4 slides","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue\u002Fimg-006.gif",[748,1126],{"id":731},[748,1128,1130],{"id":1129},"scroll-into-view-classes","Scroll-into-view Classes",[682,1132,1133],{},"Sometimes we want to add some style to an element when it is scrolled into view and remove it when it is out of view. The Locomotive Scroll library makes this feature very easy to achieve; this comes in handy when dealing with certain animations.",[722,1135,1138],{"className":1136,"code":1137,"language":727},[725],"\u003Ctemplate>\n    \u003Cmain>\n        \u003C!-- other code blocks here -->\n        \u003Csection className=\"scroll-into-view\" data-scroll-section>\n            \u003Ch1 \n                className=\"hint-text\"\n                data-scroll \n                data-scroll-repeat=\"true\" \n                data-scroll-class=\"animate\" \n                data-scroll-speed=\"5\"\n            >\n                Here, we're calling the Animate class when the Content scrolls into view\n            \u003C\u002Fh1>\n        \u003C\u002Fsection>\n    \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n",[729,1139,1137],{"__ignoreMap":731},[682,1141,1142,1143,1146,1147,1149,1150,1153],{},"In the code block above, we’re adding the ",[729,1144,1145],{},"hint-text"," to the ",[729,1148,1088],{}," tag making the tag invisible on the initials. When it scrolls into view, we’re adding the ",[729,1151,1152],{},"animate"," class, which contains some animations to fade in the tag. We repeat this process every time the user scrolls to this section.",[682,1155,1156],{},[821,1157],{"alt":1158,"src":1159},"locomotive scrolling with an overlay between 4 slides and a fade animation at the end","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue\u002Fimg-007.gif",[686,1161,1163],{"id":1162},"building-a-simple-landing-page-with-locomotive-scroll-features","Building a Simple Landing Page with Locomotive scroll features",[682,1165,1166,1167,1172],{},"Let’s build a Mini project with all of the Locomotive features we’ve discussed. To get started, clone the project starter file from ",[694,1168,1171],{"href":1169,"rel":1170},"https:\u002F\u002Fgithub.com\u002FiamVictorSam\u002Flanding-page-with-locomotive-scroll\u002Ftree\u002Fstarter",[698],"Github",".",[682,1174,1175],{},[821,1176],{"alt":1177,"src":1178},"A full landing page built with these scroll features","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue\u002Fimg-008.gif",[682,1180,1181,1182,1184],{},"First, install and configure the Locomotive Scroll library the same way we did in the “Configuring Locomotive Scroll” section. With that done, your ",[729,1183,757],{}," should look like the code below.",[722,1186,1189],{"className":1187,"code":1188,"language":727},[725],"\u003Ctemplate>\n    \u003Cmain ref=\"container\" data-scroll-container>\n        \u003CIntroduction \u002F>\n        \u003CServices \u002F>\n        \u003CAppreciation \u002F>\n    \u003C\u002Fmain>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport Introduction from \".\u002Fcomponents\u002FIntroduction.vue\";\nimport Services from \".\u002Fcomponents\u002FServices.vue\";\nimport Appreciation from \".\u002Fcomponents\u002FAppreciation.vue\";\nimport LocomotiveScroll from \"locomotive-scroll\";\n\nexport default {\n    components: {\n        Introduction,\n        Services,\n        Appreciation,\n    },\n    methods: {\n        setLocomotiveScroll() {\n            new LocomotiveScroll({\n                el: this.$refs.container,\n            });\n        },\n    },\n    mounted() {\n        this.setLocomotiveScroll();\n    },\n};\n\u003C\u002Fscript>\n",[729,1190,1188],{"__ignoreMap":731},[682,1192,1193],{},"Next, we’ll add smooth Locomotive scrolling and multiplier properties to our Locomotive scroll instance to give it some swift scrolling and speed.",[722,1195,1198],{"className":1196,"code":1197,"language":727},[725],"setLocomotiveScroll() {new LocomotiveScroll({el: this.$refs.container,smooth: true,multiplier: 3,});},\n",[729,1199,1197],{"__ignoreMap":731},[682,1201,1202,1203,1206,1207,1210,1211,1214],{},"Head over to the ",[729,1204,1205],{},"Introduction.vue"," file in the ",[729,1208,1209],{},"src\u002Fcomponents\u002F"," folder and update the ",[729,1212,1213],{},"template"," to the code block below.",[722,1216,1219],{"className":1217,"code":1218,"language":727},[725],"\u003Ctemplate>\u003Csection data-scroll data-scroll-speed=\"2\" data-scroll-section>\u003Ch1 data-scroll-speed=\"2\" data-scroll>Welcome to Jexxi Code\u003Cbr \u002F>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum teneturmagnam natus repellat quod dolorem culpa excepturi doloremque, autem.\u003C\u002Fh1>\u003Cdiv>\u003Cimg src=\"..\u002Fassets\u002Fman-thinking.png\" \u002F>\u003C\u002Fdiv>\u003C\u002Fsection>\u003C\u002Ftemplate>\n",[729,1220,1218],{"__ignoreMap":731},[682,1222,1223,1224,1226],{},"Now we’ve registered our section with the Locomotive library and given the ",[729,1225,1088],{}," text some scroll speed to make it scroll off of the page before it is completely removed.",[682,1228,1229,1230,1206,1233,1210,1236,1238],{},"Next, head over to the ",[729,1231,1232],{},"Services.vue",[729,1234,1235],{},"scr\u002Fcomponents",[729,1237,1213],{}," to the code below.",[722,1240,1243],{"className":1241,"code":1242,"language":727},[725],"\u003Ctemplate>\u003Csection id=\"sticky\" data-scroll-section>\u003Cdiv class=\"service-text\">\u003Ch1data-scrolldata-scroll-stickydata-scroll-target=\"#sticky\"data-scroll-speed=\"9\">Services we Offer\u003C\u002Fh1>\u003C\u002Fdiv>\u003Cdiv>\u003CServiceText \u002F>\u003CServiceText \u002F>\u003CServiceText \u002F>\u003C\u002Fdiv>\u003C\u002Fsection>\u003C\u002Ftemplate>\n",[729,1244,1242],{"__ignoreMap":731},[682,1246,1247,1248,1250],{},"We’ve made our ",[729,1249,1088],{}," text stick to its position on the screen whenever the user scrolls.",[682,1252,1253,1254,1257,1258,1261,1262,1238],{},"Finally, head over to the ",[729,1255,1256],{},"Appreciation.vue"," file also in the ",[729,1259,1260],{},"src\u002Fcomponents"," and update the ",[729,1263,1213],{},[722,1265,1268],{"className":1266,"code":1267,"language":727},[725],"\u003Ctemplate>\u003Csection data-scroll-section>\u003Ch1className=\"appreciation-text\"data-scrolldata-scroll-repeat=\"true\"data-scroll-class=\"animate\"data-scroll-speed=\"5\">Thank You For Using The Locomotive Scroll Library\u003C\u002Fh1>\u003Cbr \u002F>\u003Ch2 data-scroll data-scroll-direction=\"horizontal\" data-scroll-speed=\"9\">- Sam Victor\u003C\u002Fh2>\u003C\u002Fsection>\u003C\u002Ftemplate>\n",[729,1269,1267],{"__ignoreMap":731},[682,1271,1142,1272,1274,1275,1277],{},[729,1273,1152],{}," class whenever the user scrolls this section into view to give our element a fade-in animation. We’re also giving the ",[729,1276,686],{}," tag some parallax scroll effect with speed.",[682,1279,1280,1281,1283],{},"With our achievements so far, run the code using ",[729,1282,816],{}," to get the project running.",[682,1285,1286],{},[821,1287],{"alt":1288,"src":1289},"locomotive scroll being showcased on a web landing page that displays information","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue\u002Fimg-009.gif",[686,1291,1293],{"id":1292},"conclusion","Conclusion",[682,1295,1296,1297,1301],{},"In this article, we’ve practiced some Locomotive scroll examples. We learned how to configure, use and build with the Locomotive library. We’ve also seen how to combine two or more attributes to build some nice effects. Head over to the ",[694,1298,1300],{"href":737,"rel":1299},[698],"official documentation"," to find out more about the library.",[682,1303,1304,1305,1310],{},"Here is the link to the ",[694,1306,1309],{"href":1307,"rel":1308},"https:\u002F\u002Fgithub.com\u002FiamVictorSam\u002Flanding-page-with-locomotive-scroll\u002Ftree\u002Ffinal",[698],"complete source"," code on Github.",{"title":731,"searchDepth":1312,"depth":1312,"links":1313},2,[1314,1315,1316,1320,1321,1325,1332,1333],{"id":688,"depth":1312,"text":689},{"id":703,"depth":1312,"text":704},{"id":716,"depth":1312,"text":717,"children":1317},[1318],{"id":750,"depth":1319,"text":751},3,{"id":827,"depth":1312,"text":828},{"id":907,"depth":1312,"text":908,"children":1322},[1323,1324],{"id":914,"depth":1319,"text":915},{"id":936,"depth":1319,"text":937},{"id":965,"depth":1312,"text":966,"children":1326},[1327,1328,1329,1330,1331],{"id":1025,"depth":1319,"text":1026},{"id":1063,"depth":1319,"text":1064},{"id":1100,"depth":1319,"text":1101},{"id":731,"depth":1319,"text":731},{"id":1129,"depth":1319,"text":1130},{"id":1162,"depth":1312,"text":1163},{"id":1292,"depth":1312,"text":1293},"Software Development","2023-01-13T00:00:00.000Z","Websites use scrolling animations to make browsing more enjoyable. In this article, we’ll use locomotive scroll in Vue to create a smoother user experience.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue\u002Fhero.jpeg","decorative cover image showing a locomotive train",{},"\u002Fblog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue",{"title":673,"description":1336},"blog\u002Fimproving-scroll-effects-with-locomotive-scroll-in-vue",[1346],"vue; scroll","3ehwJUat-zZqFkPEN-OpwnJ89mOUeYFsu0bZwiyQYSU",{"id":1349,"title":674,"body":1350,"description":731,"draft":1337,"extension":1338,"meta":1354,"navigation":32,"path":1355,"photo":1356,"photoAlt":676,"seo":1357,"stem":1358,"__hash__":1359},"authors\u002Fauthors\u002Fsam-victor.md",{"type":679,"value":1351,"toc":1352},[],{"title":731,"searchDepth":1312,"depth":1312,"links":1353},[],{},"\u002Fauthors\u002Fsam-victor","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fplaceholder.svg",{"title":674,"description":731},"authors\u002Fsam-victor","TR4zhV-Y-Z_ORuOINT4XO1pQPvsQVJNxnpSi-gJq6hI",{"left":1361,"top":1361,"width":1362,"height":1362,"rotate":1361,"vFlip":1337,"hFlip":1337,"body":1363},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>"]