[{"data":1,"prerenderedAt":688},["ShallowReactive",2],{"navigation_docs":3,"i-nanime:logo":163,"-composables-utilities":170,"-composables-utilities-surround":683},[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":91,"body":172,"description":674,"extension":675,"links":676,"meta":677,"navigation":678,"path":92,"seo":679,"stem":93,"__hash__":682},"docs\u002F2.composables\u002F99.utilities.md",{"type":173,"value":174,"toc":671},"minimark",[175,187,337,500,505,511,653,667],[176,177,178,182,183,186],"p",{},[179,180,181],"code",{},"nanime"," re-exports the AnimeJS helpers that go inside composable\nparameters, so a Nuxt app never imports from ",[179,184,185],{},"animejs"," directly. AnimeJS\ndocuments each one.",[188,189,190,207],"table",{},[191,192,193],"thead",{},[194,195,196,201,204],"tr",{},[197,198,200],"th",{"align":199},"left","Import path",[197,202,203],{"align":199},"Exports",[197,205,206],{"align":199},"AnimeJS docs",[208,209,210,244,274,293,318],"tbody",{},[194,211,212,218,234],{},[213,214,215],"td",{"align":199},[179,216,217],{},"#nanime\u002Feasings",[213,219,220,223,224,223,227,223,230,233],{"align":199},[179,221,222],{},"eases",", ",[179,225,226],{},"cubicBezier",[179,228,229],{},"steps",[179,231,232],{},"spring",", …",[213,235,236],{"align":199},[237,238,243],"a",{"href":239,"rel":240,"target":242},"https:\u002F\u002Fanimejs.com\u002Fdocumentation\u002Feasings",[241],"nofollow","_blank","Easings",[194,245,246,251,268],{},[213,247,248],{"align":199},[179,249,250],{},"#nanime\u002Futils",[213,252,253,223,256,223,259,223,262,223,265,233],{"align":199},[179,254,255],{},"stagger",[179,257,258],{},"snap",[179,260,261],{},"random",[179,263,264],{},"shuffle",[179,266,267],{},"animate",[213,269,270],{"align":199},[237,271,91],{"href":272,"rel":273,"target":242},"https:\u002F\u002Fanimejs.com\u002Fdocumentation\u002Futilities",[241],[194,275,276,281,286],{},[213,277,278],{"align":199},[179,279,280],{},"#nanime\u002Fproxies\u002Ftext",[213,282,283],{"align":199},[179,284,285],{},"scrambleText",[213,287,288],{"align":199},[237,289,292],{"href":290,"rel":291,"target":242},"https:\u002F\u002Fanimejs.com\u002Fdocumentation\u002Ftext",[241],"Text",[194,294,295,300,311],{},[213,296,297],{"align":199},[179,298,299],{},"#nanime\u002Fproxies\u002Fsvg",[213,301,302,223,305,223,308],{"align":199},[179,303,304],{},"morphTo",[179,306,307],{},"createMotionPath",[179,309,310],{},"createDrawable",[213,312,313],{"align":199},[237,314,317],{"href":315,"rel":316,"target":242},"https:\u002F\u002Fanimejs.com\u002Fdocumentation\u002Fsvg",[241],"SVG",[194,319,320,325,335],{},[213,321,322],{"align":199},[179,323,324],{},"#nanime\u002Fproxies",[213,326,327,328,331,332],{"align":199},"Everything in ",[179,329,330],{},"\u002Ftext"," and ",[179,333,334],{},"\u002Fsvg",[213,336],{"align":199},[338,339,344],"pre",{"className":340,"code":341,"language":342,"meta":343,"style":343},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { stagger } from '#nanime\u002Futils'\nimport { morphTo } from '#nanime\u002Fproxies\u002Fsvg'\n\nuseAnimate(dots, { y: [16, 0], delay: stagger(80) })\nuseAnimate(path, { d: morphTo('#target-path') })\n","ts","",[179,345,346,378,398,405,465],{"__ignoreMap":343},[347,348,351,355,359,363,366,369,372,375],"span",{"class":349,"line":350},"line",1,[347,352,354],{"class":353},"s7zQu","import",[347,356,358],{"class":357},"sMK4o"," {",[347,360,362],{"class":361},"sTEyZ"," stagger",[347,364,365],{"class":357}," }",[347,367,368],{"class":353}," from",[347,370,371],{"class":357}," '",[347,373,250],{"class":374},"sfazB",[347,376,377],{"class":357},"'\n",[347,379,381,383,385,388,390,392,394,396],{"class":349,"line":380},2,[347,382,354],{"class":353},[347,384,358],{"class":357},[347,386,387],{"class":361}," morphTo",[347,389,365],{"class":357},[347,391,368],{"class":353},[347,393,371],{"class":357},[347,395,299],{"class":374},[347,397,377],{"class":357},[347,399,401],{"class":349,"line":400},3,[347,402,404],{"emptyLinePlaceholder":403},true,"\n",[347,406,408,411,414,417,419,423,426,429,433,435,438,441,443,446,448,450,453,456,459,462],{"class":349,"line":407},4,[347,409,45],{"class":410},"s2Zo4",[347,412,413],{"class":361},"(dots",[347,415,416],{"class":357},",",[347,418,358],{"class":357},[347,420,422],{"class":421},"swJcz"," y",[347,424,425],{"class":357},":",[347,427,428],{"class":361}," [",[347,430,432],{"class":431},"sbssI","16",[347,434,416],{"class":357},[347,436,437],{"class":431}," 0",[347,439,440],{"class":361},"]",[347,442,416],{"class":357},[347,444,445],{"class":421}," delay",[347,447,425],{"class":357},[347,449,362],{"class":410},[347,451,452],{"class":361},"(",[347,454,455],{"class":431},"80",[347,457,458],{"class":361},") ",[347,460,461],{"class":357},"}",[347,463,464],{"class":361},")\n",[347,466,468,470,473,475,477,480,482,484,486,489,492,494,496,498],{"class":349,"line":467},5,[347,469,45],{"class":410},[347,471,472],{"class":361},"(path",[347,474,416],{"class":357},[347,476,358],{"class":357},[347,478,479],{"class":421}," d",[347,481,425],{"class":357},[347,483,387],{"class":410},[347,485,452],{"class":361},[347,487,488],{"class":357},"'",[347,490,491],{"class":374},"#target-path",[347,493,488],{"class":357},[347,495,458],{"class":361},[347,497,461],{"class":357},[347,499,464],{"class":361},[501,502,504],"h2",{"id":503},"proxies","Proxies",[176,506,507,508,510],{},"A proxy is a value for an animated property, not a function that animates\nanything by itself. Pass it as the value of a property in ",[179,509,45],{}," or\na timeline step:",[338,512,514],{"className":340,"code":513,"language":342,"meta":343,"style":343},"import { scrambleText } from '#nanime\u002Fproxies\u002Ftext'\n\nconst tl = useAnimeTimeline()\n\ntl.add(title, { innerHTML: scrambleText({ text: 'nanime' }) })\n  .add(title, { innerHTML: scrambleText({ text: 'nuxt' }) })\n",[179,515,516,535,539,557,561,610],{"__ignoreMap":343},[347,517,518,520,522,525,527,529,531,533],{"class":349,"line":350},[347,519,354],{"class":353},[347,521,358],{"class":357},[347,523,524],{"class":361}," scrambleText",[347,526,365],{"class":357},[347,528,368],{"class":353},[347,530,371],{"class":357},[347,532,280],{"class":374},[347,534,377],{"class":357},[347,536,537],{"class":349,"line":380},[347,538,404],{"emptyLinePlaceholder":403},[347,540,541,545,548,551,554],{"class":349,"line":400},[347,542,544],{"class":543},"spNyl","const",[347,546,547],{"class":361}," tl ",[347,549,550],{"class":357},"=",[347,552,553],{"class":410}," useAnimeTimeline",[347,555,556],{"class":361},"()\n",[347,558,559],{"class":349,"line":407},[347,560,404],{"emptyLinePlaceholder":403},[347,562,563,566,569,572,575,577,579,582,584,586,588,591,594,596,598,600,602,604,606,608],{"class":349,"line":467},[347,564,565],{"class":361},"tl",[347,567,568],{"class":357},".",[347,570,571],{"class":410},"add",[347,573,574],{"class":361},"(title",[347,576,416],{"class":357},[347,578,358],{"class":357},[347,580,581],{"class":421}," innerHTML",[347,583,425],{"class":357},[347,585,524],{"class":410},[347,587,452],{"class":361},[347,589,590],{"class":357},"{",[347,592,593],{"class":421}," text",[347,595,425],{"class":357},[347,597,371],{"class":357},[347,599,181],{"class":374},[347,601,488],{"class":357},[347,603,365],{"class":357},[347,605,458],{"class":361},[347,607,461],{"class":357},[347,609,464],{"class":361},[347,611,613,616,618,620,622,624,626,628,630,632,634,636,638,640,643,645,647,649,651],{"class":349,"line":612},6,[347,614,615],{"class":357},"  .",[347,617,571],{"class":410},[347,619,574],{"class":361},[347,621,416],{"class":357},[347,623,358],{"class":357},[347,625,581],{"class":421},[347,627,425],{"class":357},[347,629,524],{"class":410},[347,631,452],{"class":361},[347,633,590],{"class":357},[347,635,593],{"class":421},[347,637,425],{"class":357},[347,639,371],{"class":357},[347,641,642],{"class":374},"nuxt",[347,644,488],{"class":357},[347,646,365],{"class":357},[347,648,458],{"class":361},[347,650,461],{"class":357},[347,652,464],{"class":361},[176,654,655,656,658,659,662,663,568],{},"Use ",[179,657,285],{}," when the scramble is one step in a sequence.\nTo scramble an element whenever a text ",[179,660,661],{},"ref"," changes, use\n",[237,664,665],{"href":66},[179,666,65],{},[668,669,670],"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"title":343,"searchDepth":380,"depth":380,"links":672},[673],{"id":503,"depth":380,"text":504},"AnimeJS helpers re-exported by nanime: easings, utilities, and text and SVG proxies.","md",null,{},{"icon":94},{"title":680,"description":681},"Anime.js easings, utils and proxies for Nuxt","The Anime.js helpers nanime re-exports: easings from #nanime\u002Feasings, stagger and snap from #nanime\u002Futils, and text and SVG proxies from #nanime\u002Fproxies.","PxqcfPwIhFy9QzvSr_QfHu0AqOskDhHkwsKLYRD8ACA",[684,686],{"title":85,"path":86,"stem":87,"description":685,"icon":88,"badge":89,"children":-1},"Animate layout changes in position and size with AnimeJS createLayout().",{"title":101,"path":102,"stem":103,"description":687,"icon":104,"badge":89,"children":-1},"Vue's \u003CTransition> and \u003CTransitionGroup> with AnimeJS enter, leave and move animations.",1792591720719]