You can change the draw order of your graphics at design time by moving items up and down the Hierarchy– but what if you want to change the draw order during an animation? Or what if you want to change the draw order without breaking the current hierarchical structure? Rive allows you to accomplish this with Draw Order Rules.
To animate the draw order of a group or shape, start by selecting it. Use the Draw Order section of the Inspector to create Draw Order Rules.The Normal rule is the default order (based on Hierarchy order). When the radio button next to this rule is active, the shape appears at its default draw order.Draw Order Rules allow you to select a target (note that this must be a drawable item, not a group) and whether to draw above or below the target.
The target must be a drawable item, like a shape. It cannot be a group.
In Animate mode, use the radio button next to the Draw Order Rules to set a key. Note that these are Hold keys as Draw Order cannot be interpolated.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Rive","colors":{"primary":"#ffa41c","light":"#ffa41c","dark":"#ffa41c"},"logo":{"light":"https://mintcdn.com/rive/tBktbqSaEr9ZwywZ/logo/rive_top_logo_black.svg?fit=max\u0026auto=format\u0026n=tBktbqSaEr9ZwywZ\u0026q=85\u0026s=e09b8659935986a837947ae7c3b104e0","dark":"https://mintcdn.com/rive/tBktbqSaEr9ZwywZ/logo/rive_top_logo_white.svg?fit=max\u0026auto=format\u0026n=tBktbqSaEr9ZwywZ\u0026q=85\u0026s=d2ccc2c4dec459d584f578475de89248","href":"https://rive.app?utm_source=docs\u0026utm_medium=header_nav"},"favicon":"https://mintcdn.com/rive/IGEy4oJSivuQmjey/favicon_black.png?fit=max\u0026auto=format\u0026n=IGEy4oJSivuQmjey\u0026q=85\u0026s=986c81e5b82e1138420d773296030a3a","appearance":{"default":"dark"},"background":{"decoration":"grid"},"navbar":{"links":[{"href":"/tutorials/learn-rive","label":"Learn"},{"href":"/community/support","label":"Support"}],"primary":{"type":"button","label":"Get Rive","href":"https://rive.app/downloads?utm_source=docs\u0026utm_medium=header_nav"}},"footer":{"socials":{"youtube":"https://www.youtube.com/channel/UCPal2R1FxwRTPylhP_7ofEg","x":"https://twitter.com/rive_app","instagram":"https://www.instagram.com/rive.app","github":"https://github.com/rive-app","discord":"https://discord.gg/rive-app"},"links":[{"header":"Resources","items":[{"label":"Community","href":"https://community.rive.app?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Blog","href":"https://rive.app/blog?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Case Studies","href":"https://rive.app/blog/case-studies?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Marketplace","href":"https://rive.app/marketplace?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Feature Requests","href":"https://community.rive.app/c/feature-requests"}]},{"header":"Company","items":[{"label":"Careers","href":"https://rive.app/careers?utm_source=docs\u0026utm_medium=footer_nav"},{"label":"Terms of Service","href":"/docs/legal/terms-of-service"},{"label":"Acceptable Use Policy","href":"/docs/legal/acceptable-use-policy"},{"label":"Privacy Policy","href":"/docs/legal/privacy-policy"}]}]},"fonts":{"heading":{"family":"Tomorrow Placeholder","weight":500,"source":"https://framerusercontent.com/assets/nCpxWS6DaPlPe0lHzStXAPCo3lw.woff2","format":"woff2"}},"integrations":{"amplitude":{"apiKey":"38803036884a752b104ee4bf501e0945"}},"contextual":{"options":["copy","view","chatgpt","claude"],"display":"header"},"variables":{"runtimeCurrentNameApple":"New Runtime","runtimeLegacyNameApple":"Legacy Runtime","monthlyCreditsVoyager":"$20","monthlyCreditsEnterprise":"$40","pricingCadetMonthly":"$17","pricingCadetYearly":"$108","pricingVoyagerMonthly":"$49","pricingVoyagerYearly":"$384","pricingEnterpriseYearly":"$1,440","versionWeb":"2.40.1","versionReact":"4.33.0","versionApple":"6.24.0","versionAndroid":"11.9.2","versionReactNative":"0.5.5","versionFlutter":"0.14.11","versionDevFlutter":"0.15.0-dev.4","versionUnity":"0.4.5","versionUnreal":"0.4.25","supportForm":"https://forms.rive.app/support?utm_medium=support_page","supportFormEducational":"https://forms.rive.app/education?utm_medium=support_page"},"styling":{"latex":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"rive","hasAudioNarration":false,"actualSubdomain":"rive","customDomains":["rive.app"],"gitSource":{"type":"github","owner":"rive-app","repo":"rive-docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ae3760ff10d961089bb0a87","collectionId":"f2683a5d-94ce-4fa0-adf6-db85e19b4e9e","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ae3760ff10d961089bb0a87"},"feedback":{"edits":true,"issues":true,"thumbs":true},"entitlements":{"AI_CHAT":{"status":"ENABLED"},"REMOVE_BRANDING":{"status":"ENABLED"},"WEB_MCP":{"status":"ENABLED"},"NARRATION":{"status":"ENABLED"}},"buildId":"6ae3760ff10d961089bb0a87","clientVersion":"0.0.4021","searchFilterCounts":[{"language":"default","tag":"Runtimes","count":279},{"language":"default","tag":"Scripting","count":187},{"language":"default","tag":"Scripting API","count":167},{"language":"default","tag":"Editor","count":100},{"language":"default","tag":"Fundamentals","count":64},{"language":"default","tag":"GPU","count":45},{"language":"default","tag":"Design","count":32},{"language":"default","tag":"Artboards","count":25},{"language":"default","tag":"Interfaces","count":24},{"language":"default","tag":"Advanced Topics","count":22}]},"assistantConfig":{},"basePath":"/docs","hasChatPermissions":false,"hasWebMcpPermissions":true,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"pause-universal-search-reconcile","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"per-site-search-delta","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-private-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[{"filePath":"custom.css","content":"ol li,p,ul li{font-size:14px}.signature .code-block{border:0}.signature .code-block [data-floating-buttons=true]{display:none}.signature .code-block [data-component-part=code-block-root]{background:0 0;padding:0}.dark .card{background-color:var(--background-dark)!important;border-color:rgb(255 255 255/.1)!important}.dark .card:hover{border-color:var(--primary-light)!important}"}],"page":{"pagePath":"editor/animate-mode/animating-draw-order","slug":"/editor/animate-mode/animating-draw-order","pageMetadata":{"title":"Animating Draw Order","sidebarTitle":"Custom Draw Order","description":null,"href":"/editor/animate-mode/animating-draw-order"},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];const Marketplace=({href,children})=>{const{Card}=_provideComponents()||{};if(!Card)_missingMdxReference(`Card`,true);const hrefWithTracking=`${href}?utm_source=docs\u0026utm_medium=docs_link_card\u0026utm_campaign=docs_to_marketplace_links`;return _jsx(Card,{title:`Learn by remixing`,icon:`external-link`,href:hrefWithTracking,arrow:`true`,horizontal:true,children:children?children:`Open this file on Marketplace, then click Remix to experiment in the Rive Editor.`})};const YouTube=({id,timestamp})=>{const videoSrc=timestamp?`https://www.youtube.com/embed/${id}?start=${timestamp}`:`https://www.youtube.com/embed/${id}`;return _jsx(`iframe`,{width:`100%`,height:`400`,src:videoSrc,title:`YouTube video player`,frameBorder:`0`,allow:`accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share`,referrerPolicy:`strict-origin-when-cross-origin`,allowFullScreen:true})};function _createMdxContent(props){const _components={a:`a`,img:`img`,p:`p`,..._provideComponents(),...props.components},{Heading,Note,OptimizedImage,_MdxComponentBoundary}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!Note)_missingMdxReference(`Note`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!_MdxComponentBoundary)_missingMdxReference(`_MdxComponentBoundary`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`You can change the draw order of your graphics at design time by moving items up and down the `,_jsx(_components.a,{href:`/editor/interface-overview/hierarchy`,children:`Hierarchy`}),`– but what if you want to change the draw order during an animation? Or what if you want to change the draw order without breaking the current hierarchical structure? Rive allows you to accomplish this with Draw Order Rules.`]}),`\n`,_jsx(_MdxComponentBoundary,{name:`YouTube`,children:_jsx(YouTube,{id:`6J3JIwgUwe0`})}),`\n`,_jsx(Heading,{level:`2`,id:`draw-order-rules`,children:`Draw Order rules`}),`\n`,_jsx(_components.p,{children:`To animate the draw order of a group or shape, start by selecting it. Use the Draw Order section of the Inspector to create Draw Order Rules.`}),`\n`,_jsx(_MdxComponentBoundary,{name:`Marketplace`,children:_jsx(Marketplace,{href:`https://rive.app/community/files/26116-animating-draw-order`})}),`\n`,_jsx(OptimizedImage,{src:`https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/426adab7-b1d3-47bc-bc42-c5cc397fa9d6.webp?fit=max\u0026auto=format\u0026n=LTt3dbNyEAMvuJ4M\u0026q=85\u0026s=c00eb06083812410bb31e2db382eaed9`,alt:`Image`,\"data-og-width\":`1340`,width:`1340`,\"data-og-height\":`1020`,height:`1020`,\"data-path\":`images/editor/animate-mode/426adab7-b1d3-47bc-bc42-c5cc397fa9d6.webp`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/426adab7-b1d3-47bc-bc42-c5cc397fa9d6.webp?w=280\u0026fit=max\u0026auto=format\u0026n=LTt3dbNyEAMvuJ4M\u0026q=85\u0026s=f2ab13791622cd2dcd32385b117b8c1b 280w, https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/426adab7-b1d3-47bc-bc42-c5cc397fa9d6.webp?w=560\u0026fit=max\u0026auto=format\u0026n=LTt3dbNyEAMvuJ4M\u0026q=85\u0026s=4d70e01db6fd04bc200ef5e2b091081b 560w, https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/426adab7-b1d3-47bc-bc42-c5cc397fa9d6.webp?w=840\u0026fit=max\u0026auto=format\u0026n=LTt3dbNyEAMvuJ4M\u0026q=85\u0026s=d8a4a1e13566e605c352088f0bb58261 840w, https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/426adab7-b1d3-47bc-bc42-c5cc397fa9d6.webp?w=1100\u0026fit=max\u0026auto=format\u0026n=LTt3dbNyEAMvuJ4M\u0026q=85\u0026s=c745faf84fce89c84632cb998e77a69c 1100w, https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/426adab7-b1d3-47bc-bc42-c5cc397fa9d6.webp?w=1650\u0026fit=max\u0026auto=format\u0026n=LTt3dbNyEAMvuJ4M\u0026q=85\u0026s=7b6424a75683805ddfd5c27634dbdc10 1650w, https://mintcdn.com/rive/LTt3dbNyEAMvuJ4M/images/editor/animate-mode/426adab7-b1d3-47bc-bc42-c5cc397fa9d6.webp?w=2500\u0026fit=max\u0026auto=format\u0026n=LTt3dbNyEAMvuJ4M\u0026q=85\u0026s=a6c66c28492a6e40b7f58d6cefbc90cf 2500w`}),`\n`,_jsxs(_components.p,{children:[`The Normal rule is the default order (based on `,_jsx(_components.a,{href:`/editor/interface-overview/hierarchy`,children:`Hierarchy`}),` order). When the radio button next to this rule is active, the shape appears at its default draw order.`]}),`\n`,_jsx(_components.p,{children:`Draw Order Rules allow you to select a target (note that this must be a drawable item, not a group) and whether to draw above or below the target.`}),`\n`,_jsx(Note,{children:`The target must be a drawable item, like a shape. It cannot be a group.`}),`\n`,_jsxs(_components.p,{children:[`In Animate mode, use the radio button next to the Draw Order Rules to set a key. Note that these are `,_jsx(_components.a,{href:`/editor/animate-mode/interpolation-easing#hold`,children:`Hold keys`}),` as Draw Order cannot be interpolated.`]}),`\n`,_jsx(_components.p,{children:_jsx(_components.img,{src:`https://ucarecdn.com/32925768-cbcf-461c-9fe1-b745bf90a34d/`,alt:`Image`})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{Marketplace,YouTube,default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Animating Draw Order","sidebarTitle":"Custom Draw Order","description":null,"href":"/editor/animate-mode/animating-draw-order"}}},"mdxSourceWithNoJs":null,"noJsSplices":[[147,1039,")=>null;const YouTube=()=>null;function "]]},"mdxExtracts":{"tableOfContents":[{"title":"Draw Order rules","slug":"draw-order-rules","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":["/docs/_mintlify/custom/rive/6157a238f0df2356/rive-init.js"],"subdomain":"rive","siteName":"Rive","title":"Animating Draw Order - Rive","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-29T16:37:39.202Z","originalFileLocation":"editor/animate-mode/animating-draw-order.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"dark\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"application-name\" content=\"Rive\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Animating Draw Order - Rive\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Rive\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://rive.app/docs/editor/animate-mode/animating-draw-order\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://rive.mintlify.app/_mintlify/api/og/v2?division=Hierarchical+Relationships\u0026amp;title=Animating+Draw+Order\u0026amp;theme=9d194ea41709afb0505e42e9\u0026amp;signature=8621fd195f2cfe4d4feb5d12080484416da802e816129355f51d008fb6a3863c\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Animating Draw Order - Rive\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://rive.mintlify.app/_mintlify/api/og/v2?division=Hierarchical+Relationships\u0026amp;title=Animating+Draw+Order\u0026amp;theme=9d194ea41709afb0505e42e9\u0026amp;signature=8621fd195f2cfe4d4feb5d12080484416da802e816129355f51d008fb6a3863c\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/docs/mintlify-assets/_mintlify/favicons/rive/QOppeg00QlFTw5Bu/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Rive\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#ffa41c\">\u003clink data-mint-head rel=\"canonical\" href=\"https://rive.app/docs/editor/animate-mode/animating-draw-order\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/docs/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/editor/animate-mode/animating-draw-order.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://rive.app/#organization\",\"name\":\"Rive\",\"url\":\"https://rive.app\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/rive/tBktbqSaEr9ZwywZ/logo/rive_top_logo_black.svg?fit=max\u0026auto=format\u0026n=tBktbqSaEr9ZwywZ\u0026q=85\u0026s=e09b8659935986a837947ae7c3b104e0\"}},{\"@type\":\"WebSite\",\"@id\":\"https://rive.app/docs#website\",\"name\":\"Rive\",\"url\":\"https://rive.app/docs\",\"publisher\":{\"@id\":\"https://rive.app/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://rive.app/docs/editor/animate-mode/animating-draw-order#webpage\",\"url\":\"https://rive.app/docs/editor/animate-mode/animating-draw-order\",\"name\":\"Animating Draw Order\",\"dateModified\":\"2026-10-29T16:37:39.202Z\",\"isPartOf\":{\"@id\":\"https://rive.app/docs#website\"},\"breadcrumb\":{\"@id\":\"https://rive.app/docs/editor/animate-mode/animating-draw-order#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://rive.app/docs/editor/animate-mode/animating-draw-order#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Fundamentals\",\"item\":\"https://rive.app/docs/editor/fundamentals/artboards\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design\",\"item\":\"https://rive.app/docs/editor/fundamentals/artboards\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Hierarchical Relationships\",\"item\":\"https://rive.app/docs/editor/interface-overview/hierarchy\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Animating Draw Order\",\"item\":\"https://rive.app/docs/editor/animate-mode/animating-draw-order\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://rive.app/docs/editor/animate-mode/animating-draw-order#article\",\"headline\":\"Animating Draw Order\",\"name\":\"Animating Draw Order\",\"url\":\"https://rive.app/docs/editor/animate-mode/animating-draw-order\",\"mainEntityOfPage\":{\"@id\":\"https://rive.app/docs/editor/animate-mode/animating-draw-order#webpage\"},\"dateModified\":\"2026-10-29T16:37:39.202Z\",\"publisher\":{\"@id\":\"https://rive.app/#organization\"},\"isPartOf\":{\"@id\":\"https://rive.app/docs#website\"}}]}\u003c/script>","siteName":"Rive","nav":{"global":null,"tabs":[{"tab":"Home","pages":[{"title":"Home","href":"/getting-started/introduction"}]},{"tab":"Editor","groups":[{"group":" ","pages":[{"title":"Using the Rive Editor","sidebarTitle":"Get Rive","href":"/editor/get-rive"},{"group":"Editor Interface","pages":[{"title":"Interface Overview","sidebarTitle":"Overview","href":"/editor/interface-overview/overview"},{"title":"File Browser","href":"/editor/interface-overview/file-browser"},{"title":"Viewport","href":"/editor/interface-overview/stage"},{"title":"Toolbar","href":"/editor/interface-overview/toolbar"},{"title":"Sidebar","href":"/editor/interface-overview/sidebar"},{"title":"Inspector","href":"/editor/interface-overview/inspector"},{"title":"Debug Panel","href":"/editor/interface-overview/debug-panel"}]},{"group":"Workflows","pages":[{"title":"Selection and Navigation","href":"/editor/interface-overview/selection-and-navigation"},{"title":"Keyboard Shortcuts","href":"/editor/keyboard-shortcuts"},{"title":"Dependencies Graph","href":"/editor/workflows/dependency-graph"},{"title":"Tagging","href":"/editor/tagging"},{"title":"Revision History","href":"/editor/fundamentals/revision-history"},{"title":"Best Practices","href":"/getting-started/best-practices"}]}]},{"group":"Fundamentals","pages":[{"group":"Design","pages":[{"title":"Artboards","href":"/editor/fundamentals/artboards"},{"title":"Components","href":"/editor/fundamentals/components"},{"group":"Drawing","pages":[{"title":"Shapes and Paths Overview","href":"/editor/fundamentals/shapes-and-paths-overview"},{"title":"Shape Tools","href":"/editor/fundamentals/procedural-shapes"},{"title":"Shape Builder","href":"/editor/design/shape-builder"},{"title":"Pen Tool Overview","href":"/editor/fundamentals/pen-tool-overview"},{"title":"Freehand Drawing with Pencil, Brush, and Eraser","sidebarTitle":"Freehand Drawing","href":"/editor/design/freehand-drawing"},{"title":"Fill and Stroke","href":"/editor/fundamentals/fill-and-stroke"},{"title":"Edit Vertices","href":"/editor/fundamentals/edit-vertices"},{"title":"Bucket Tool","sidebarTitle":"Bucket","href":"/editor/design/bucket-tool"},{"title":"Shape Bend Tool","href":"/editor/design/shape-bend-tool"},{"title":"Trim Path","href":"/editor/manipulating-shapes/trim-path"},{"title":"Clipping","href":"/editor/manipulating-shapes/clipping"}]},{"title":"Align and Distribute","href":"/editor/fundamentals/align-and-distribute"},{"group":"Text","pages":[{"title":"Text","sidebarTitle":"Overview","href":"/editor/text/text-overview"},{"title":"Text Runs","href":"/editor/text/text-runs"},{"title":"Text Styles","href":"/editor/text/text-styles"},{"title":"Text Modifiers","href":"/editor/text/text-modifiers"},{"title":"Text Input","href":"/editor/text/text-input"}]},{"group":"Hierarchical Relationships","pages":[{"title":"Hierarchy","href":"/editor/interface-overview/hierarchy"},{"title":"Groups","href":"/editor/fundamentals/groups"},{"title":"Solos","href":"/editor/manipulating-shapes/solos"},{"title":"Transform Spaces","href":"/editor/fundamentals/transform-spaces"},{"title":"Freeze and Origin","description":null,"href":"/editor/fundamentals/freeze-and-origin"},{"title":"Animating Draw Order","sidebarTitle":"Custom Draw Order","href":"/editor/animate-mode/animating-draw-order"}]},{"group":"Responsive Design","pages":[{"title":"Overview","sidebarTitle":"Layouts Overview","description":"Layouts allow you to build responsive UI components in Rive. Make your designs fit, fill, or reflow content based on the space available.","href":"/editor/layouts/layouts-overview"},{"title":"Tools","sidebarTitle":"Tools","href":"/editor/layouts/layout-tools"},{"title":"Parameters","href":"/editor/layouts/layout-parameters"},{"title":"Component Sizing","href":"/editor/layouts/component-sizing"},{"title":"Layout Animation","href":"/editor/layouts/layout-animation"},{"title":"N-Slicing","href":"/editor/layouts/n-slicing"}]},{"title":"Rulers \u0026 Guides","href":"/editor/design/rulers-and-guides"}]},{"group":"Assets","pages":[{"title":"Assets","sidebarTitle":"Overview","href":"/editor/fundamentals/assets-overview"},{"title":"SVG \u0026 Vector Assets","href":"/editor/assets/svg"},{"title":"Photoshop Files","href":"/editor/assets/psd"},{"title":"Font Assets","href":"/editor/text/fonts"},{"title":"Audio Assets","href":"/editor/assets/audio"},{"title":"Libraries","sidebarTitle":"Libraries","href":"/editor/libraries"}]},{"group":"Animation","pages":[{"title":"Animate Mode Overview","sidebarTitle":"Overview","href":"/editor/animate-mode/animate-mode-overview"},{"title":"Timeline","href":"/editor/animate-mode/timeline"},{"title":"Keys","href":"/editor/animate-mode/keys"},{"title":"Interpolation (Easing)","href":"/editor/animate-mode/interpolation-easing"}]},{"group":"Interaction","pages":[{"group":"State Machines","pages":[{"title":"State Machine Overview","sidebarTitle":"Overview","href":"/editor/state-machine/state-machine"},{"title":"States","href":"/editor/state-machine/states"},{"title":"Transitions","href":"/editor/state-machine/transitions"},{"title":"Layers","href":"/editor/state-machine/layers"}]},{"title":"Listeners","href":"/editor/state-machine/listeners"},{"group":"Events","pages":[{"title":"Events Overview","sidebarTitle":"Overview","href":"/editor/events/overview"},{"title":"Open URL Events","href":"/editor/events/open-url-events"},{"title":"Audio Events","href":"/editor/events/audio-events"}]}]},{"group":"Data","pages":[{"title":"Data Binding Overview","href":"/editor/data-binding/overview"},{"title":"View Models \u0026 Instances","href":"/editor/data-binding/view-models"},{"title":"View Model Properties","href":"/editor/data-binding/property-types"},{"title":"Binding Data","href":"/editor/data-binding/binding-data"},{"title":"Controlling Data","href":"/editor/data-binding/controlling-data"},{"group":"Advanced Data Binding","pages":[{"title":"Enums","href":"/editor/data-binding/enums"},{"title":"Lists","href":"/editor/data-binding/lists"},{"title":"Converters","href":"/editor/data-binding/converters"},{"title":"Stateful Components","href":"/editor/data-binding/stateful-components"},{"title":"Property Groups","href":"/editor/data-binding/property-groups"},{"title":"Migration Guide","href":"/editor/data-binding/migration-guide"}]}]},{"group":"Publishing","pages":[{"title":"Exporting for Runtime","href":"/editor/exporting/exporting-for-runtime"},{"title":"Sharing \u0026 Embedding","href":"/editor/embed-urls/overview"},{"title":"Exporting Videos \u0026 Images","href":"/editor/exporting/exporting-for-video-and-static-design"},{"title":"Exporting for Backup","href":"/editor/exporting/exporting-for-backup"}]}]},{"group":"Advanced Topics","pages":[{"group":"AI","pages":[{"title":"AI Agent","href":"/editor/ai-agent/ai-agent"},{"title":"Rive MCP Integration","sidebarTitle":"MCP Integration","href":"/editor/ai/mcp"}]},{"group":"Rigging \u0026 Control","pages":[{"title":"Manipulating Shapes Overview","sidebarTitle":"Overview","href":"/editor/manipulating-shapes/manipulating-shapes"},{"title":"Meshes","href":"/editor/manipulating-shapes/meshes"},{"title":"Bones","href":"/editor/manipulating-shapes/bones"},{"title":"Joysticks","href":"/editor/manipulating-shapes/joysticks"},{"group":"Constraints","pages":[{"title":"Constraints Overview","sidebarTitle":"Overview","href":"/editor/constraints/constraints-overview"},{"title":"IK Constraint","href":"/editor/constraints/ik-constraint"},{"title":"Distance Constraint","href":"/editor/constraints/distance-constraint"},{"title":"Scale Constraint","href":"/editor/constraints/scale-constraint"},{"title":"Rotation Constraint","href":"/editor/constraints/rotation-constraint"},{"title":"Transform Constraint","href":"/editor/constraints/transform-constraint"},{"title":"Translation Constraint","href":"/editor/constraints/translation-constraint"},{"title":"Follow Path Constraint","href":"/editor/constraints/follow-path-constraint"},{"title":"Scroll Constraints","href":"/editor/constraints/scroll-constraint"}]}]},{"group":"Accessibility","pages":[{"title":"Semantics","href":"/editor/accessibility/semantics"},{"title":"Focus","href":"/editor/accessibility/focus"},{"title":"Reduced Motion","href":"/editor/accessibility/reduced-motion"}]},{"group":"Admin \u0026 Workspaces","pages":[{"group":"Workspaces","pages":[{"title":"Workspaces","sidebarTitle":"Overview","href":"/account-admin/workspaces/workspaces-overview"},{"title":"Managing Workspaces","href":"/account-admin/workspaces/managing-workspaces"},{"title":"Managing Workspace Members","sidebarTitle":"Workspace Members","href":"/account-admin/workspaces/managing-workspace-members"}]},{"title":"Bring Your Own S3 Bucket","href":"/account-admin/bring-your-own-bucket"}]},{"group":"Legacy Features","pages":[{"title":"Inputs","href":"/editor/state-machine/inputs"},{"title":"Events at Runtime","href":"/editor/events/general-events"}]}]}]},{"tab":"Scripting","pages":[{"title":"Scripting","href":"/scripting/getting-started"}]},{"tab":"Runtimes","pages":[{"title":"Runtimes","href":"/runtimes/getting-started"}]},{"tab":"CLI","pages":[{"title":"CLI","href":"/cli/overview"}]},{"tab":" ","pages":[{"title":" ","href":"/tutorials/learn-rive"}]},{"tab":" ","pages":[{"title":" ","href":"/community/support"}]}]},"title":"Animating Draw Order - Rive","buildId":"dpl_DGmhKsAzJdVqypJzon18vViniWRY","deploymentId":"dpl_DGmhKsAzJdVqypJzon18vViniWRY","dynamics":["a74be98ba7"],"chunks":["zoom-image-lightbox-B_gjFIjh.js","lightbox-handle-r17bVUz3.js"]}