[{"data":1,"prerenderedAt":592},["ShallowReactive",2],{"navigation_docs":3,"i-nanime:logo":163,"-getting-started-accessibility":170,"-getting-started-accessibility-surround":587},[4,35,95,115,129,153],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25,30],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-ph-info",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-ph-download-simple",{"title":21,"path":22,"stem":23,"icon":24},"Configuration","\u002Fgetting-started\u002Fconfiguration","1.getting-started\u002F3.configuration","i-ph-sliders-horizontal",{"title":26,"path":27,"stem":28,"icon":29},"Performance","\u002Fgetting-started\u002Fperformance","1.getting-started\u002F4.performance","i-ph-gauge",{"title":31,"path":32,"stem":33,"icon":34},"Accessibility","\u002Fgetting-started\u002Faccessibility","1.getting-started\u002F5.accessibility","i-ph-person-simple-circle",{"title":36,"icon":6,"path":37,"stem":38,"children":39,"page":6},"Composables","\u002Fcomposables","2.composables",[40,44,49,54,59,64,69,74,79,84,90],{"title":11,"path":41,"stem":42,"icon":43},"\u002Fcomposables\u002Fintroduction","2.composables\u002F0.introduction","i-ph-stack",{"title":45,"path":46,"stem":47,"icon":48},"useAnimate","\u002Fcomposables\u002Fuse-animate","2.composables\u002F1.use-animate","i-ph-play-circle",{"title":50,"path":51,"stem":52,"icon":53},"useWaapiAnimate","\u002Fcomposables\u002Fuse-waapi-animate","2.composables\u002F2.use-waapi-animate","i-ph-lightning",{"title":55,"path":56,"stem":57,"icon":58},"useAnimatable","\u002Fcomposables\u002Fuse-animatable","2.composables\u002F3.use-animatable","i-ph-cube",{"title":60,"path":61,"stem":62,"icon":63},"useSplitText","\u002Fcomposables\u002Fuse-split-text","2.composables\u002F4.use-split-text","i-ph-text-t",{"title":65,"path":66,"stem":67,"icon":68},"useScrambleText","\u002Fcomposables\u002Fuse-scramble-text","2.composables\u002F5.use-scramble-text","i-ph-shuffle",{"title":70,"path":71,"stem":72,"icon":73},"useDraggable","\u002Fcomposables\u002Fuse-draggable","2.composables\u002F6.use-draggable","i-ph-hand-grabbing",{"title":75,"path":76,"stem":77,"icon":78},"useAnimeTimeline","\u002Fcomposables\u002Fuse-anime-timeline","2.composables\u002F7.use-anime-timeline","i-ph-list-numbers",{"title":80,"path":81,"stem":82,"icon":83},"useAnimeScroll","\u002Fcomposables\u002Fuse-anime-scroll","2.composables\u002F8.use-anime-scroll","i-ph-mouse-scroll",{"title":85,"path":86,"stem":87,"icon":88,"badge":89},"useAnimeLayout","\u002Fcomposables\u002Fuse-anime-layout","2.composables\u002F9.use-anime-layout","i-ph-layout","New",{"title":91,"path":92,"stem":93,"icon":94},"Utilities","\u002Fcomposables\u002Futilities","2.composables\u002F99.utilities","i-ph-puzzle-piece",{"title":96,"icon":6,"path":97,"stem":98,"children":99,"page":6},"Components","\u002Fcomponents","3.components",[100,105,110],{"title":101,"path":102,"stem":103,"icon":104,"badge":89},"Transitions","\u002Fcomponents\u002Ftransitions","3.components\u002F1.transitions","i-ph-arrows-left-right",{"title":106,"path":107,"stem":108,"icon":109,"badge":89},"Transition styles","\u002Fcomponents\u002Ftransition-styles","3.components\u002F2.transition-styles","i-ph-palette",{"title":111,"path":112,"stem":113,"icon":114,"badge":89},"Layout group","\u002Fcomponents\u002Flayout-group","3.components\u002F3.layout-group","i-ph-frame-corners",{"title":116,"icon":6,"path":117,"stem":118,"children":119,"page":6},"Comparisons","\u002Fcomparisons","4.comparisons",[120,125],{"title":121,"path":122,"stem":123,"icon":124,"badge":89},"Compared with Nuxt modules","\u002Fcomparisons\u002Fvs-nuxt-modules","4.comparisons\u002F1.vs-nuxt-modules","i-ph-scales",{"title":126,"path":127,"stem":128,"icon":124,"badge":89},"Compared with Vue packages","\u002Fcomparisons\u002Fvs-vue-packages","4.comparisons\u002F2.vs-vue-packages",{"title":130,"icon":6,"path":131,"stem":132,"children":133,"page":6},"Examples","\u002Fexamples","5.examples",[134,138,143,148],{"title":11,"path":135,"stem":136,"icon":137},"\u002Fexamples\u002Fintroduction","5.examples\u002F0.introduction","i-ph-shapes",{"title":139,"path":140,"stem":141,"icon":142},"Drive","\u002Fexamples\u002Fdrive","5.examples\u002F1.drive","i-ph-hard-drives",{"title":144,"path":145,"stem":146,"icon":147},"Road trip","\u002Fexamples\u002Froad-trip","5.examples\u002F2.road-trip","i-ph-car-profile",{"title":149,"path":150,"stem":151,"icon":152},"Player","\u002Fexamples\u002Fplayer","5.examples\u002F3.player","i-ph-music-notes",{"title":154,"icon":6,"path":155,"stem":156,"children":157,"page":6},"Updates","\u002Fchanges","6.changes",[158],{"title":159,"path":160,"stem":161,"icon":162},"Changelog","\u002Fchanges\u002Fchangelog","6.changes\u002F1.changelog","i-ph-clock-counter-clockwise",{"left":164,"top":165,"width":166,"height":167,"rotate":168,"vFlip":6,"hFlip":6,"body":169},84,74,344,367,0,"\u003Cpath d=\"M124 401 V230 C124 144 186 114 256 114 C326 114 388 144 388 230 V304\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"80\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\u002F>\n  \u003Crect x=\"348\" y=\"358\" width=\"80\" height=\"80\" rx=\"12\" fill=\"#ff4b4b\"\u002F>",{"id":171,"title":31,"body":172,"description":578,"extension":579,"links":580,"meta":581,"navigation":582,"path":32,"seo":583,"stem":33,"__hash__":586},"docs\u002F1.getting-started\u002F5.accessibility.md",{"type":173,"value":174,"toc":574},"minimark",[175,184,189,204,307,371,374,408,418,425,429,441,567,570],[176,177,178,179,183],"p",{},"Make ",[180,181,182],"code",{},"nanime"," animations jump to their end state for visitors who turn on\nreduced motion.",[185,186,188],"h2",{"id":187},"follow-the-reduced-motion-setting","Follow the reduced motion setting",[176,190,191,192,195,196,199,200,203],{},"Set ",[180,193,194],{},"reducedMotion"," to ",[180,197,198],{},"'system'"," in ",[180,201,202],{},"nuxt.config.ts",":",[205,206,211],"pre",{"className":207,"code":208,"filename":202,"language":209,"meta":210,"style":210},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['nanime'],\n  nanime: {\n    reducedMotion: 'system',\n  },\n})\n","ts","",[180,212,213,237,263,274,292,298],{"__ignoreMap":210},[214,215,218,222,225,229,233],"span",{"class":216,"line":217},"line",1,[214,219,221],{"class":220},"s7zQu","export",[214,223,224],{"class":220}," default",[214,226,228],{"class":227},"s2Zo4"," defineNuxtConfig",[214,230,232],{"class":231},"sTEyZ","(",[214,234,236],{"class":235},"sMK4o","{\n",[214,238,240,244,246,249,252,255,257,260],{"class":216,"line":239},2,[214,241,243],{"class":242},"swJcz","  modules",[214,245,203],{"class":235},[214,247,248],{"class":231}," [",[214,250,251],{"class":235},"'",[214,253,182],{"class":254},"sfazB",[214,256,251],{"class":235},[214,258,259],{"class":231},"]",[214,261,262],{"class":235},",\n",[214,264,266,269,271],{"class":216,"line":265},3,[214,267,268],{"class":242},"  nanime",[214,270,203],{"class":235},[214,272,273],{"class":235}," {\n",[214,275,277,280,282,285,288,290],{"class":216,"line":276},4,[214,278,279],{"class":242},"    reducedMotion",[214,281,203],{"class":235},[214,283,284],{"class":235}," '",[214,286,287],{"class":254},"system",[214,289,251],{"class":235},[214,291,262],{"class":235},[214,293,295],{"class":216,"line":294},5,[214,296,297],{"class":235},"  },\n",[214,299,301,304],{"class":216,"line":300},6,[214,302,303],{"class":235},"}",[214,305,306],{"class":231},")\n",[308,309,310,324],"table",{},[311,312,313],"thead",{},[314,315,316,321],"tr",{},[317,318,320],"th",{"align":319},"left","Value",[317,322,323],{"align":319},"Reduces motion",[325,326,327,338,361],"tbody",{},[314,328,329,335],{},[330,331,332],"td",{"align":319},[180,333,334],{},"'never'",[330,336,337],{"align":319},"Never. This is the default.",[314,339,340,344],{},[330,341,342],{"align":319},[180,343,198],{},[330,345,346,347,357,358],{"align":319},"When the visitor's ",[348,349,354],"a",{"href":350,"rel":351,"target":353},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002F@media\u002Fprefers-reduced-motion",[352],"nofollow","_blank",[180,355,356],{},"prefers-reduced-motion"," setting is ",[180,359,360],{},"reduce",[314,362,363,368],{},[330,364,365],{"align":319},[180,366,367],{},"'always'",[330,369,370],{"align":319},"Always",[176,372,373],{},"When a visitor turns on reduced motion in their system settings, each\nanimation jumps to its end state instead of playing. This applies to:",[375,376,377,392,401],"ul",{},[378,379,380,382,383,382,385,382,387,389,390],"li",{},[180,381,45],{},", ",[180,384,50],{},[180,386,75],{},[180,388,55],{}," and\n",[180,391,65],{},[378,393,394,397,398],{},[180,395,396],{},"\u003CAnimeTransition>"," and ",[180,399,400],{},"\u003CAnimeTransitionGroup>",[378,402,403,397,406],{},[180,404,405],{},"\u003CAnimeLayoutGroup>",[180,407,85],{},[176,409,410,412,413,397,415,417],{},[180,411,400],{}," also skips moves, so it measures nothing.\n",[180,414,405],{},[180,416,85],{}," measure once on mount and not\nafter.",[176,419,420,397,422,424],{},[180,421,70],{},[180,423,80],{}," are not affected. They follow the\npointer and the scroll position, which the visitor controls.",[185,426,428],{"id":427},"let-visitors-choose-in-your-app","Let visitors choose in your app",[176,430,191,431,433,434,436,437,440],{},[180,432,194],{}," in the app config to override ",[180,435,202],{},". Call\n",[180,438,439],{},"updateAppConfig()"," to change it at runtime, for example from a settings\ntoggle:",[205,442,447],{"className":443,"code":444,"filename":445,"language":446,"meta":210,"style":210},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nfunction setReducedMotion(reduce: boolean) {\n  updateAppConfig({ nanime: { reducedMotion: reduce ? 'always' : 'system' } })\n}\n\u003C\u002Fscript>\n","MotionSetting.vue","vue",[180,448,449,477,501,553,558],{"__ignoreMap":210},[214,450,451,454,457,461,464,467,470,472,474],{"class":216,"line":217},[214,452,453],{"class":235},"\u003C",[214,455,456],{"class":242},"script",[214,458,460],{"class":459},"spNyl"," setup",[214,462,463],{"class":459}," lang",[214,465,466],{"class":235},"=",[214,468,469],{"class":235},"\"",[214,471,209],{"class":254},[214,473,469],{"class":235},[214,475,476],{"class":235},">\n",[214,478,479,482,485,487,490,492,496,499],{"class":216,"line":239},[214,480,481],{"class":459},"function",[214,483,484],{"class":227}," setReducedMotion",[214,486,232],{"class":235},[214,488,360],{"class":489},"sHdIc",[214,491,203],{"class":235},[214,493,495],{"class":494},"sBMFI"," boolean",[214,497,498],{"class":235},")",[214,500,273],{"class":235},[214,502,503,506,508,511,514,516,519,522,524,527,530,532,535,537,540,542,544,546,549,551],{"class":216,"line":265},[214,504,505],{"class":227},"  updateAppConfig",[214,507,232],{"class":242},[214,509,510],{"class":235},"{",[214,512,513],{"class":242}," nanime",[214,515,203],{"class":235},[214,517,518],{"class":235}," {",[214,520,521],{"class":242}," reducedMotion",[214,523,203],{"class":235},[214,525,526],{"class":231}," reduce",[214,528,529],{"class":235}," ?",[214,531,284],{"class":235},[214,533,534],{"class":254},"always",[214,536,251],{"class":235},[214,538,539],{"class":235}," :",[214,541,284],{"class":235},[214,543,287],{"class":254},[214,545,251],{"class":235},[214,547,548],{"class":235}," }",[214,550,548],{"class":235},[214,552,306],{"class":242},[214,554,555],{"class":216,"line":276},[214,556,557],{"class":235},"}\n",[214,559,560,563,565],{"class":216,"line":294},[214,561,562],{"class":235},"\u003C\u002F",[214,564,456],{"class":242},[214,566,476],{"class":235},[176,568,569],{},"Transitions and groups use the new setting on their next run. An animation\nfrom a composable keeps its timing until it rebuilds.",[571,572,573],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":210,"searchDepth":239,"depth":239,"links":575},[576,577],{"id":187,"depth":239,"text":188},{"id":427,"depth":239,"text":428},"Make nanime animations jump to their end state for visitors who ask for less motion.","md",null,{},{"icon":34},{"title":584,"description":585},"Reduced motion in Nuxt with Anime.js","Respect prefers-reduced-motion with nanime: one option makes nanime animations, transitions and layout groups jump to their end state for visitors who ask for less motion.","2Gbpj9-bfkvgIMRK1RGgVf1QerdnKlQZC6JczMwEsAA",[588,590],{"title":26,"path":27,"stem":28,"description":589,"icon":29,"children":-1},"Make nanime do less work, starting with the changes that save the most.",{"title":11,"path":41,"stem":42,"description":591,"icon":43,"children":-1},"Every nanime composable, and how they pick reactive or instant mode.",1792591718742]