[{"data":1,"prerenderedAt":1549},["ShallowReactive",2],{"navigation_docs":3,"i-nanime:logo":163,"-composables-use-anime-layout":170,"-composables-use-anime-layout-surround":983,"preview-examples\u002Fcomposables\u002FAnimeLayoutResizeDemo.vue-true":988,"mdc-npwj35-key":988},[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":85,"body":172,"description":975,"extension":184,"links":976,"meta":977,"navigation":978,"path":86,"seo":979,"stem":87,"__hash__":982},"docs\u002F2.composables\u002F9.use-anime-layout.md",{"type":173,"value":174,"toc":962},"minimark",[175,186,202,212,217,220,224,228,313,317,340,344,362,492,504,508,520,608,630,634,736,752,756,925,929,958],[176,177,179],"nuxt-link",{"to":178},"\u002Fcomposables\u002Fintroduction#buffered",[180,181],"badge",{"icon":182,"label":183,"size":184,"variant":185},"ph:stack","Buffered","md","soft",[187,188,189,192,193,201],"p",{},[190,191,85],"code",{}," wraps the ",[194,195,200],"a",{"href":196,"rel":197,"target":199},"https:\u002F\u002Fanimejs.com\u002Fdocumentation\u002Flayout",[198],"nofollow","_blank","createLayout","\nfunction from AnimeJS. It records the position and size of every element\ninside a container. After a change, it animates each element from the\nrecorded state to the new one.",[187,203,204,207,208,211],{},[190,205,206],{},"nanime"," creates the layout once the container mounts and reverts it on\nunmount. It rebuilds the layout only when the container element changes or\nthe parameters change in value. Callbacks such as ",[190,209,210],{},"onComplete"," are left out\nof that comparison.",[213,214,216],"h2",{"id":215},"usage","Usage",[187,218,219],{},"Size animates together with position. Here one box grows at a time and the\nothers move aside:",[221,222],"render-code-block-preview",{"src":223},"examples\u002Fcomposables\u002FAnimeLayoutResizeDemo.vue",[213,225,227],{"id":226},"signature","Signature",[229,230,235],"pre",{"className":231,"code":232,"language":233,"meta":234,"style":234},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","function useAnimeLayout(\n  target: MaybeRef\u003CAnimeLayoutTargets>,\n  parameters?: MaybeRefOrGetter\u003CAutoLayoutParams>\n): BufferedProxyReturns\u003CNanimeLayout>\n","ts","",[190,236,237,254,277,297],{"__ignoreMap":234},[238,239,242,246,250],"span",{"class":240,"line":241},"line",1,[238,243,245],{"class":244},"spNyl","function",[238,247,249],{"class":248},"s2Zo4"," useAnimeLayout",[238,251,253],{"class":252},"sMK4o","(\n",[238,255,257,261,264,268,271,274],{"class":240,"line":256},2,[238,258,260],{"class":259},"sHdIc","  target",[238,262,263],{"class":252},":",[238,265,267],{"class":266},"sBMFI"," MaybeRef",[238,269,270],{"class":252},"\u003C",[238,272,273],{"class":266},"AnimeLayoutTargets",[238,275,276],{"class":252},">,\n",[238,278,280,283,286,289,291,294],{"class":240,"line":279},3,[238,281,282],{"class":259},"  parameters",[238,284,285],{"class":252},"?:",[238,287,288],{"class":266}," MaybeRefOrGetter",[238,290,270],{"class":252},[238,292,293],{"class":266},"AutoLayoutParams",[238,295,296],{"class":252},">\n",[238,298,300,303,306,308,311],{"class":240,"line":299},4,[238,301,302],{"class":252},"):",[238,304,305],{"class":266}," BufferedProxyReturns",[238,307,270],{"class":252},[238,309,310],{"class":266},"NanimeLayout",[238,312,296],{"class":252},[213,314,316],{"id":315},"parameters","Parameters",[318,319,320,327],"field-group",{},[321,322,326],"field",{"name":323,"type":324,":required":325},"target","MaybeRef\u003CAnimeLayoutTargets>","true","The container whose children are animated. Accepts a CSS selector, a DOM\nelement, a template ref or a component ref.",[321,328,330,331,334,335,339],{"name":315,"type":329},"MaybeRefOrGetter\u003CAutoLayoutParams>","Accepts a plain object, a ",[190,332,333],{},"ref"," or a getter. The layout rebuilds when a\nvalue changes. See the\n",[194,336,338],{"href":196,"rel":337,"target":199},[198],"AnimeJS layout documentation","\nfor the options.",[213,341,343],{"id":342},"returns","Returns",[187,345,346,347,354,355,358,359,361],{},"Returns a buffered proxy around the AnimeJS ",[190,348,351],{"className":349,"language":350,"style":234},"language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts-type",[238,352,353],{"class":266},"AutoLayout",".\nIts methods and properties are in the\n",[194,356,338],{"href":196,"rel":357,"target":199},[198],".\nThe members ",[190,360,206],{}," adds or changes:",[363,364,365,382],"table",{},[366,367,368],"thead",{},[369,370,371,376,379],"tr",{},[372,373,375],"th",{"align":374},"left","Member",[372,377,378],{"align":374},"Type",[372,380,381],{"align":374},"Notes",[383,384,385,467],"tbody",{},[369,386,387,393,441],{},[388,389,390],"td",{"align":374},[190,391,392],{},"patch(callback, params?)",[388,394,395],{"align":374},[190,396,397,400,403,405,408,411,414,417,420,422,425,428,430,433,435,438],{"className":349,"language":350,"style":234},[238,398,399],{"class":252},"(",[238,401,402],{"class":248},"callback",[238,404,263],{"class":252},[238,406,407],{"class":252}," ()",[238,409,410],{"class":244}," =>",[238,412,413],{"class":266}," unknown",[238,415,416],{"class":252},",",[238,418,419],{"class":259}," params",[238,421,285],{"class":252},[238,423,424],{"class":266}," LayoutAnimationParams",[238,426,427],{"class":252},")",[238,429,410],{"class":244},[238,431,432],{"class":266}," Promise",[238,434,270],{"class":252},[238,436,437],{"class":266},"void",[238,439,440],{"class":252},">",[388,442,443,444,446,447,451,452,455,456,458,459,462,463,466],{"align":374},"Added by ",[190,445,206],{},", and ",[194,448,450],{"href":449},"#use-patch-not-update-for-vue-state","the one to use for Vue state",". It calls ",[190,453,454],{},"record()",", awaits ",[190,457,402],{},", waits for Vue's ",[190,460,461],{},"nextTick()",", then calls ",[190,464,465],{},"animate(params)",". The promise resolves when the animation finishes.",[369,468,469,473,485],{},[388,470,471],{"align":374},[190,472,454],{},[388,474,475],{"align":374},[190,476,477,480,482],{"className":349,"language":350,"style":234},[238,478,479],{"class":252},"()",[238,481,410],{"class":244},[238,483,484],{"class":266}," this",[388,486,487,488,491],{"align":374},"Can be called straight from ",[190,489,490],{},"setup()",", and runs once the layout is created.",[187,493,494,495,498,499,503],{},"The layout is created when the container mounts. Call ",[190,496,497],{},"patch()"," and read\nother members ",[194,500,502],{"href":501},"#read-properties-after-mount","after mount",".",[213,505,507],{"id":506},"caveats","Caveats",[509,510,512,513,515,516,519],"h3",{"id":511},"use-patch-not-update-for-vue-state","Use ",[190,514,497],{},", not ",[190,517,518],{},"update()",", for Vue state",[229,521,523],{"className":231,"code":522,"language":233,"meta":234,"style":234},"\u002F\u002F wrong: animate() runs before Vue has patched the DOM\nlayout.update(() => items.value.reverse())\n\n\u002F\u002F right: patch() waits for nextTick() before animating\nawait layout.patch(() => items.value.reverse())\n",[190,524,525,531,564,570,575],{"__ignoreMap":234},[238,526,527],{"class":240,"line":241},[238,528,530],{"class":529},"sHwdD","\u002F\u002F wrong: animate() runs before Vue has patched the DOM\n",[238,532,533,537,539,542,544,546,548,551,553,556,558,561],{"class":240,"line":256},[238,534,536],{"class":535},"sTEyZ","layout",[238,538,503],{"class":252},[238,540,541],{"class":248},"update",[238,543,399],{"class":535},[238,545,479],{"class":252},[238,547,410],{"class":244},[238,549,550],{"class":535}," items",[238,552,503],{"class":252},[238,554,555],{"class":535},"value",[238,557,503],{"class":252},[238,559,560],{"class":248},"reverse",[238,562,563],{"class":535},"())\n",[238,565,566],{"class":240,"line":279},[238,567,569],{"emptyLinePlaceholder":568},true,"\n",[238,571,572],{"class":240,"line":299},[238,573,574],{"class":529},"\u002F\u002F right: patch() waits for nextTick() before animating\n",[238,576,578,582,585,587,590,592,594,596,598,600,602,604,606],{"class":240,"line":577},5,[238,579,581],{"class":580},"s7zQu","await",[238,583,584],{"class":535}," layout",[238,586,503],{"class":252},[238,588,589],{"class":248},"patch",[238,591,399],{"class":535},[238,593,479],{"class":252},[238,595,410],{"class":244},[238,597,550],{"class":535},[238,599,503],{"class":252},[238,601,555],{"class":535},[238,603,503],{"class":252},[238,605,560],{"class":248},[238,607,563],{"class":535},[187,609,610,611,613,614,617,618,620,621,623,624,626,627,503],{},"AnimeJS ",[190,612,518],{}," records, runs the callback and animates in one\nsynchronous call. Vue applies state changes to the DOM on the next tick, so\n",[190,615,616],{},"animate()"," compares the old DOM with itself and nothing moves. ",[190,619,497],{},"\nawaits ",[190,622,461],{}," between the two steps. ",[190,625,518],{}," still works for\ndirect DOM changes, such as ",[190,628,629],{},"appendChild",[509,631,633],{"id":632},"read-properties-after-mount","Read properties after mount",[229,635,637],{"className":231,"code":636,"language":233,"meta":234,"style":234},"\u002F\u002F wrong: timeline is undefined before mount\nconst layout = useAnimeLayout(grid)\nconsole.log(layout.timeline) \u002F\u002F undefined\n\n\u002F\u002F right: read it after mount\nonMounted(() => {\n  console.log(layout.timeline)\n})\n",[190,638,639,644,660,681,685,690,705,728],{"__ignoreMap":234},[238,640,641],{"class":240,"line":241},[238,642,643],{"class":529},"\u002F\u002F wrong: timeline is undefined before mount\n",[238,645,646,649,652,655,657],{"class":240,"line":256},[238,647,648],{"class":244},"const",[238,650,651],{"class":535}," layout ",[238,653,654],{"class":252},"=",[238,656,249],{"class":248},[238,658,659],{"class":535},"(grid)\n",[238,661,662,665,667,670,673,675,678],{"class":240,"line":279},[238,663,664],{"class":535},"console",[238,666,503],{"class":252},[238,668,669],{"class":248},"log",[238,671,672],{"class":535},"(layout",[238,674,503],{"class":252},[238,676,677],{"class":535},"timeline) ",[238,679,680],{"class":529},"\u002F\u002F undefined\n",[238,682,683],{"class":240,"line":299},[238,684,569],{"emptyLinePlaceholder":568},[238,686,687],{"class":240,"line":577},[238,688,689],{"class":529},"\u002F\u002F right: read it after mount\n",[238,691,693,696,698,700,702],{"class":240,"line":692},6,[238,694,695],{"class":248},"onMounted",[238,697,399],{"class":535},[238,699,479],{"class":252},[238,701,410],{"class":244},[238,703,704],{"class":252}," {\n",[238,706,708,711,713,715,718,720,722,725],{"class":240,"line":707},7,[238,709,710],{"class":535},"  console",[238,712,503],{"class":252},[238,714,669],{"class":248},[238,716,399],{"class":717},"swJcz",[238,719,536],{"class":535},[238,721,503],{"class":252},[238,723,724],{"class":535},"timeline",[238,726,727],{"class":717},")\n",[238,729,731,734],{"class":240,"line":730},8,[238,732,733],{"class":252},"}",[238,735,727],{"class":535},[187,737,738,739,741,742,744,745,748,749,751],{},"The layout is created after the container mounts. ",[190,740,454],{}," is queued\nuntil then, but other members, ",[190,743,497],{}," included, return ",[190,746,747],{},"undefined",".\nCall ",[190,750,497],{}," from an event handler or after mount.",[213,753,755],{"id":754},"type-reference","Type reference",[757,758,760],"collapsible",{"name":759},"Types",[229,761,763],{"className":231,"code":762,"language":233,"meta":234,"style":234},"type AnimeLayoutTargets = DOMTargetSelector | MaybeElementRef\u003CHTMLElement | SVGElement | VueInstance | null> | null | undefined\n\ntype NanimeLayout = AutoLayout & {\n  patch: (callback: () => unknown, params?: LayoutAnimationParams) => Promise\u003Cvoid>\n}\n\ntype BufferedProxyReturns\u003CT> = Exclude\u003CUnwrapNestedRefs\u003CT>, null | undefined>\n",[190,764,765,816,820,837,877,882,886],{"__ignoreMap":234},[238,766,767,770,773,776,779,782,785,787,790,792,795,797,800,802,805,807,809,811,813],{"class":240,"line":241},[238,768,769],{"class":244},"type",[238,771,772],{"class":266}," AnimeLayoutTargets",[238,774,775],{"class":252}," =",[238,777,778],{"class":266}," DOMTargetSelector",[238,780,781],{"class":252}," |",[238,783,784],{"class":266}," MaybeElementRef",[238,786,270],{"class":252},[238,788,789],{"class":266},"HTMLElement",[238,791,781],{"class":252},[238,793,794],{"class":266}," SVGElement",[238,796,781],{"class":252},[238,798,799],{"class":266}," VueInstance",[238,801,781],{"class":252},[238,803,804],{"class":266}," null",[238,806,440],{"class":252},[238,808,781],{"class":252},[238,810,804],{"class":266},[238,812,781],{"class":252},[238,814,815],{"class":266}," undefined\n",[238,817,818],{"class":240,"line":256},[238,819,569],{"emptyLinePlaceholder":568},[238,821,822,824,827,829,832,835],{"class":240,"line":279},[238,823,769],{"class":244},[238,825,826],{"class":266}," NanimeLayout",[238,828,775],{"class":252},[238,830,831],{"class":266}," AutoLayout",[238,833,834],{"class":252}," &",[238,836,704],{"class":252},[238,838,839,842,844,847,849,851,853,855,857,859,861,863,865,867,869,871,873,875],{"class":240,"line":299},[238,840,841],{"class":717},"  patch",[238,843,263],{"class":252},[238,845,846],{"class":252}," (",[238,848,402],{"class":717},[238,850,263],{"class":252},[238,852,407],{"class":252},[238,854,410],{"class":244},[238,856,413],{"class":266},[238,858,416],{"class":252},[238,860,419],{"class":259},[238,862,285],{"class":252},[238,864,424],{"class":266},[238,866,427],{"class":252},[238,868,410],{"class":244},[238,870,432],{"class":266},[238,872,270],{"class":252},[238,874,437],{"class":266},[238,876,296],{"class":252},[238,878,879],{"class":240,"line":577},[238,880,881],{"class":252},"}\n",[238,883,884],{"class":240,"line":692},[238,885,569],{"emptyLinePlaceholder":568},[238,887,888,890,892,894,897,899,901,904,906,909,911,913,916,918,920,923],{"class":240,"line":707},[238,889,769],{"class":244},[238,891,305],{"class":266},[238,893,270],{"class":252},[238,895,896],{"class":266},"T",[238,898,440],{"class":252},[238,900,775],{"class":252},[238,902,903],{"class":266}," Exclude",[238,905,270],{"class":252},[238,907,908],{"class":266},"UnwrapNestedRefs",[238,910,270],{"class":252},[238,912,896],{"class":266},[238,914,915],{"class":252},">,",[238,917,804],{"class":266},[238,919,781],{"class":252},[238,921,922],{"class":266}," undefined",[238,924,296],{"class":252},[213,926,928],{"id":927},"see-also","See also",[930,931,932,949],"ul",{},[933,934,935,941,942,945,946,948],"li",{},[194,936,938],{"href":937},"\u002Fcomponents\u002Ftransitions#lists",[190,939,940],{},"\u003CAnimeTransitionGroup>",": animates ",[190,943,944],{},"v-for"," lists on every change, with no ",[190,947,497],{}," calls",[933,950,951,954,955],{},[194,952,338],{"href":196,"rel":953,"target":199},[198],": upstream layout options such as ",[190,956,957],{},"swapAt",[959,960,961],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":234,"searchDepth":256,"depth":256,"links":963},[964,965,966,967,968,973,974],{"id":215,"depth":256,"text":216},{"id":226,"depth":256,"text":227},{"id":315,"depth":256,"text":316},{"id":342,"depth":256,"text":343},{"id":506,"depth":256,"text":507,"children":969},[970,972],{"id":511,"depth":279,"text":971},"Use patch(), not update(), for Vue state",{"id":632,"depth":279,"text":633},{"id":754,"depth":256,"text":755},{"id":927,"depth":256,"text":928},"Animate layout changes in position and size with AnimeJS createLayout().",null,{},{"icon":88,"badge":89},{"title":980,"description":981},"useAnimeLayout: animate layout changes in Nuxt","Animate reorders, resizes and grid changes with Anime.js createLayout() in a Vue composable. patch() records, waits for Vue to update the DOM, then animates.","R1knSn5SR07A1U2NBIAcq9jIoXWbFNR8hkPmHuE1tA4",[984,986],{"title":80,"path":81,"stem":82,"description":985,"icon":83,"children":-1},"Drive animations from scroll position with AnimeJS onScroll().",{"title":91,"path":92,"stem":93,"description":987,"icon":94,"children":-1},"AnimeJS helpers re-exported by nanime: easings, utilities, and text and SVG proxies.",{"data":989,"body":990,"toc":1547},{"title":234,"description":234},{"type":991,"children":992},"root",[993,998,1529,1542],{"type":994,"tag":995,"props":996,"children":997},"element","anime-layout-resize-demo",{},[],{"type":994,"tag":999,"props":1000,"children":1001},"code-group",{},[1002,1287],{"type":994,"tag":229,"props":1003,"children":1006},{"className":231,"code":1004,"filename":1005,"language":233,"meta":234,"style":234},"const row = useTemplateRef('row')\nconst expanded = ref(1)\n\nconst layout = useAnimeLayout(row, { duration: 500 })\n\nfunction expandNext() {\n  layout.patch(() => (expanded.value = (expanded.value % 5) + 1))\n}\n","Script",[1007],{"type":994,"tag":190,"props":1008,"children":1009},{"__ignoreMap":234},[1010,1059,1094,1101,1158,1165,1185,1280],{"type":994,"tag":238,"props":1011,"children":1012},{"class":240,"line":241},[1013,1019,1025,1030,1036,1040,1045,1051,1055],{"type":994,"tag":238,"props":1014,"children":1016},{"style":1015},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1017],{"type":1018,"value":648},"text",{"type":994,"tag":238,"props":1020,"children":1022},{"style":1021},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[1023],{"type":1018,"value":1024}," row ",{"type":994,"tag":238,"props":1026,"children":1028},{"style":1027},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[1029],{"type":1018,"value":654},{"type":994,"tag":238,"props":1031,"children":1033},{"style":1032},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[1034],{"type":1018,"value":1035}," useTemplateRef",{"type":994,"tag":238,"props":1037,"children":1038},{"style":1021},[1039],{"type":1018,"value":399},{"type":994,"tag":238,"props":1041,"children":1042},{"style":1027},[1043],{"type":1018,"value":1044},"'",{"type":994,"tag":238,"props":1046,"children":1048},{"style":1047},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[1049],{"type":1018,"value":1050},"row",{"type":994,"tag":238,"props":1052,"children":1053},{"style":1027},[1054],{"type":1018,"value":1044},{"type":994,"tag":238,"props":1056,"children":1057},{"style":1021},[1058],{"type":1018,"value":727},{"type":994,"tag":238,"props":1060,"children":1061},{"class":240,"line":256},[1062,1066,1071,1075,1080,1084,1090],{"type":994,"tag":238,"props":1063,"children":1064},{"style":1015},[1065],{"type":1018,"value":648},{"type":994,"tag":238,"props":1067,"children":1068},{"style":1021},[1069],{"type":1018,"value":1070}," expanded ",{"type":994,"tag":238,"props":1072,"children":1073},{"style":1027},[1074],{"type":1018,"value":654},{"type":994,"tag":238,"props":1076,"children":1077},{"style":1032},[1078],{"type":1018,"value":1079}," ref",{"type":994,"tag":238,"props":1081,"children":1082},{"style":1021},[1083],{"type":1018,"value":399},{"type":994,"tag":238,"props":1085,"children":1087},{"style":1086},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1088],{"type":1018,"value":1089},"1",{"type":994,"tag":238,"props":1091,"children":1092},{"style":1021},[1093],{"type":1018,"value":727},{"type":994,"tag":238,"props":1095,"children":1096},{"class":240,"line":279},[1097],{"type":994,"tag":238,"props":1098,"children":1099},{"emptyLinePlaceholder":568},[1100],{"type":1018,"value":569},{"type":994,"tag":238,"props":1102,"children":1103},{"class":240,"line":299},[1104,1108,1112,1116,1120,1125,1129,1134,1140,1144,1149,1154],{"type":994,"tag":238,"props":1105,"children":1106},{"style":1015},[1107],{"type":1018,"value":648},{"type":994,"tag":238,"props":1109,"children":1110},{"style":1021},[1111],{"type":1018,"value":651},{"type":994,"tag":238,"props":1113,"children":1114},{"style":1027},[1115],{"type":1018,"value":654},{"type":994,"tag":238,"props":1117,"children":1118},{"style":1032},[1119],{"type":1018,"value":249},{"type":994,"tag":238,"props":1121,"children":1122},{"style":1021},[1123],{"type":1018,"value":1124},"(row",{"type":994,"tag":238,"props":1126,"children":1127},{"style":1027},[1128],{"type":1018,"value":416},{"type":994,"tag":238,"props":1130,"children":1131},{"style":1027},[1132],{"type":1018,"value":1133}," {",{"type":994,"tag":238,"props":1135,"children":1137},{"style":1136},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[1138],{"type":1018,"value":1139}," duration",{"type":994,"tag":238,"props":1141,"children":1142},{"style":1027},[1143],{"type":1018,"value":263},{"type":994,"tag":238,"props":1145,"children":1146},{"style":1086},[1147],{"type":1018,"value":1148}," 500",{"type":994,"tag":238,"props":1150,"children":1151},{"style":1027},[1152],{"type":1018,"value":1153}," }",{"type":994,"tag":238,"props":1155,"children":1156},{"style":1021},[1157],{"type":1018,"value":727},{"type":994,"tag":238,"props":1159,"children":1160},{"class":240,"line":577},[1161],{"type":994,"tag":238,"props":1162,"children":1163},{"emptyLinePlaceholder":568},[1164],{"type":1018,"value":569},{"type":994,"tag":238,"props":1166,"children":1167},{"class":240,"line":692},[1168,1172,1177,1181],{"type":994,"tag":238,"props":1169,"children":1170},{"style":1015},[1171],{"type":1018,"value":245},{"type":994,"tag":238,"props":1173,"children":1174},{"style":1032},[1175],{"type":1018,"value":1176}," expandNext",{"type":994,"tag":238,"props":1178,"children":1179},{"style":1027},[1180],{"type":1018,"value":479},{"type":994,"tag":238,"props":1182,"children":1183},{"style":1027},[1184],{"type":1018,"value":704},{"type":994,"tag":238,"props":1186,"children":1187},{"class":240,"line":707},[1188,1193,1197,1201,1205,1209,1213,1217,1222,1226,1230,1234,1238,1242,1246,1250,1255,1260,1265,1270,1275],{"type":994,"tag":238,"props":1189,"children":1190},{"style":1021},[1191],{"type":1018,"value":1192},"  layout",{"type":994,"tag":238,"props":1194,"children":1195},{"style":1027},[1196],{"type":1018,"value":503},{"type":994,"tag":238,"props":1198,"children":1199},{"style":1032},[1200],{"type":1018,"value":589},{"type":994,"tag":238,"props":1202,"children":1203},{"style":1136},[1204],{"type":1018,"value":399},{"type":994,"tag":238,"props":1206,"children":1207},{"style":1027},[1208],{"type":1018,"value":479},{"type":994,"tag":238,"props":1210,"children":1211},{"style":1015},[1212],{"type":1018,"value":410},{"type":994,"tag":238,"props":1214,"children":1215},{"style":1136},[1216],{"type":1018,"value":846},{"type":994,"tag":238,"props":1218,"children":1219},{"style":1021},[1220],{"type":1018,"value":1221},"expanded",{"type":994,"tag":238,"props":1223,"children":1224},{"style":1027},[1225],{"type":1018,"value":503},{"type":994,"tag":238,"props":1227,"children":1228},{"style":1021},[1229],{"type":1018,"value":555},{"type":994,"tag":238,"props":1231,"children":1232},{"style":1027},[1233],{"type":1018,"value":775},{"type":994,"tag":238,"props":1235,"children":1236},{"style":1136},[1237],{"type":1018,"value":846},{"type":994,"tag":238,"props":1239,"children":1240},{"style":1021},[1241],{"type":1018,"value":1221},{"type":994,"tag":238,"props":1243,"children":1244},{"style":1027},[1245],{"type":1018,"value":503},{"type":994,"tag":238,"props":1247,"children":1248},{"style":1021},[1249],{"type":1018,"value":555},{"type":994,"tag":238,"props":1251,"children":1252},{"style":1027},[1253],{"type":1018,"value":1254}," %",{"type":994,"tag":238,"props":1256,"children":1257},{"style":1086},[1258],{"type":1018,"value":1259}," 5",{"type":994,"tag":238,"props":1261,"children":1262},{"style":1136},[1263],{"type":1018,"value":1264},") ",{"type":994,"tag":238,"props":1266,"children":1267},{"style":1027},[1268],{"type":1018,"value":1269},"+",{"type":994,"tag":238,"props":1271,"children":1272},{"style":1086},[1273],{"type":1018,"value":1274}," 1",{"type":994,"tag":238,"props":1276,"children":1277},{"style":1136},[1278],{"type":1018,"value":1279},"))\n",{"type":994,"tag":238,"props":1281,"children":1282},{"class":240,"line":730},[1283],{"type":994,"tag":238,"props":1284,"children":1285},{"style":1027},[1286],{"type":1018,"value":881},{"type":994,"tag":229,"props":1288,"children":1293},{"className":1289,"code":1290,"filename":1291,"language":1292,"meta":234,"style":234},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv ref=\"row\" class=\"flex flex-wrap items-start gap-2\">\n    \u003Cdiv\n      v-for=\"n in 5\"\n      :key=\"n\"\n      class=\"rounded-lg bg-primary\"\n      :class=\"expanded === n ? 'h-20 w-32' : 'size-10'\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","Template","vue",[1294],{"type":994,"tag":190,"props":1295,"children":1296},{"__ignoreMap":234},[1297,1313,1373,1386,1412,1437,1462,1487,1495,1512],{"type":994,"tag":238,"props":1298,"children":1299},{"class":240,"line":241},[1300,1304,1309],{"type":994,"tag":238,"props":1301,"children":1302},{"style":1027},[1303],{"type":1018,"value":270},{"type":994,"tag":238,"props":1305,"children":1306},{"style":1136},[1307],{"type":1018,"value":1308},"template",{"type":994,"tag":238,"props":1310,"children":1311},{"style":1027},[1312],{"type":1018,"value":296},{"type":994,"tag":238,"props":1314,"children":1315},{"class":240,"line":256},[1316,1321,1326,1330,1334,1339,1343,1347,1352,1356,1360,1365,1369],{"type":994,"tag":238,"props":1317,"children":1318},{"style":1027},[1319],{"type":1018,"value":1320},"  \u003C",{"type":994,"tag":238,"props":1322,"children":1323},{"style":1136},[1324],{"type":1018,"value":1325},"div",{"type":994,"tag":238,"props":1327,"children":1328},{"style":1015},[1329],{"type":1018,"value":1079},{"type":994,"tag":238,"props":1331,"children":1332},{"style":1027},[1333],{"type":1018,"value":654},{"type":994,"tag":238,"props":1335,"children":1336},{"style":1027},[1337],{"type":1018,"value":1338},"\"",{"type":994,"tag":238,"props":1340,"children":1341},{"style":1047},[1342],{"type":1018,"value":1050},{"type":994,"tag":238,"props":1344,"children":1345},{"style":1027},[1346],{"type":1018,"value":1338},{"type":994,"tag":238,"props":1348,"children":1349},{"style":1015},[1350],{"type":1018,"value":1351}," class",{"type":994,"tag":238,"props":1353,"children":1354},{"style":1027},[1355],{"type":1018,"value":654},{"type":994,"tag":238,"props":1357,"children":1358},{"style":1027},[1359],{"type":1018,"value":1338},{"type":994,"tag":238,"props":1361,"children":1362},{"style":1047},[1363],{"type":1018,"value":1364},"flex flex-wrap items-start gap-2",{"type":994,"tag":238,"props":1366,"children":1367},{"style":1027},[1368],{"type":1018,"value":1338},{"type":994,"tag":238,"props":1370,"children":1371},{"style":1027},[1372],{"type":1018,"value":296},{"type":994,"tag":238,"props":1374,"children":1375},{"class":240,"line":279},[1376,1381],{"type":994,"tag":238,"props":1377,"children":1378},{"style":1027},[1379],{"type":1018,"value":1380},"    \u003C",{"type":994,"tag":238,"props":1382,"children":1383},{"style":1136},[1384],{"type":1018,"value":1385},"div\n",{"type":994,"tag":238,"props":1387,"children":1388},{"class":240,"line":299},[1389,1394,1398,1402,1407],{"type":994,"tag":238,"props":1390,"children":1391},{"style":1015},[1392],{"type":1018,"value":1393},"      v-for",{"type":994,"tag":238,"props":1395,"children":1396},{"style":1027},[1397],{"type":1018,"value":654},{"type":994,"tag":238,"props":1399,"children":1400},{"style":1027},[1401],{"type":1018,"value":1338},{"type":994,"tag":238,"props":1403,"children":1404},{"style":1047},[1405],{"type":1018,"value":1406},"n in 5",{"type":994,"tag":238,"props":1408,"children":1409},{"style":1027},[1410],{"type":1018,"value":1411},"\"\n",{"type":994,"tag":238,"props":1413,"children":1414},{"class":240,"line":577},[1415,1420,1424,1428,1433],{"type":994,"tag":238,"props":1416,"children":1417},{"style":1015},[1418],{"type":1018,"value":1419},"      :key",{"type":994,"tag":238,"props":1421,"children":1422},{"style":1027},[1423],{"type":1018,"value":654},{"type":994,"tag":238,"props":1425,"children":1426},{"style":1027},[1427],{"type":1018,"value":1338},{"type":994,"tag":238,"props":1429,"children":1430},{"style":1047},[1431],{"type":1018,"value":1432},"n",{"type":994,"tag":238,"props":1434,"children":1435},{"style":1027},[1436],{"type":1018,"value":1411},{"type":994,"tag":238,"props":1438,"children":1439},{"class":240,"line":692},[1440,1445,1449,1453,1458],{"type":994,"tag":238,"props":1441,"children":1442},{"style":1015},[1443],{"type":1018,"value":1444},"      class",{"type":994,"tag":238,"props":1446,"children":1447},{"style":1027},[1448],{"type":1018,"value":654},{"type":994,"tag":238,"props":1450,"children":1451},{"style":1027},[1452],{"type":1018,"value":1338},{"type":994,"tag":238,"props":1454,"children":1455},{"style":1047},[1456],{"type":1018,"value":1457},"rounded-lg bg-primary",{"type":994,"tag":238,"props":1459,"children":1460},{"style":1027},[1461],{"type":1018,"value":1411},{"type":994,"tag":238,"props":1463,"children":1464},{"class":240,"line":707},[1465,1470,1474,1478,1483],{"type":994,"tag":238,"props":1466,"children":1467},{"style":1015},[1468],{"type":1018,"value":1469},"      :class",{"type":994,"tag":238,"props":1471,"children":1472},{"style":1027},[1473],{"type":1018,"value":654},{"type":994,"tag":238,"props":1475,"children":1476},{"style":1027},[1477],{"type":1018,"value":1338},{"type":994,"tag":238,"props":1479,"children":1480},{"style":1047},[1481],{"type":1018,"value":1482},"expanded === n ? 'h-20 w-32' : 'size-10'",{"type":994,"tag":238,"props":1484,"children":1485},{"style":1027},[1486],{"type":1018,"value":1411},{"type":994,"tag":238,"props":1488,"children":1489},{"class":240,"line":730},[1490],{"type":994,"tag":238,"props":1491,"children":1492},{"style":1027},[1493],{"type":1018,"value":1494},"    \u002F>\n",{"type":994,"tag":238,"props":1496,"children":1498},{"class":240,"line":1497},9,[1499,1504,1508],{"type":994,"tag":238,"props":1500,"children":1501},{"style":1027},[1502],{"type":1018,"value":1503},"  \u003C\u002F",{"type":994,"tag":238,"props":1505,"children":1506},{"style":1136},[1507],{"type":1018,"value":1325},{"type":994,"tag":238,"props":1509,"children":1510},{"style":1027},[1511],{"type":1018,"value":296},{"type":994,"tag":238,"props":1513,"children":1515},{"class":240,"line":1514},10,[1516,1521,1525],{"type":994,"tag":238,"props":1517,"children":1518},{"style":1027},[1519],{"type":1018,"value":1520},"\u003C\u002F",{"type":994,"tag":238,"props":1522,"children":1523},{"style":1136},[1524],{"type":1018,"value":1308},{"type":994,"tag":238,"props":1526,"children":1527},{"style":1027},[1528],{"type":1018,"value":296},{"type":994,"tag":1530,"props":1531,"children":1539},"u-button",{"className":1532,"color":1535,"icon":1536,"target":199,"to":1537,"variant":1538},[1533,1534],"mt-2.5","pl-0.5","neutral","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002Fastraldev\u002Fnanime\u002Fblob\u002Fmain\u002Fdocs\u002Fapp\u002Fcomponents\u002Fcontent\u002Fexamples\u002Fcomposables\u002FAnimeLayoutResizeDemo.vue","link",[1540],{"type":1018,"value":1541},"View on GitHub",{"type":994,"tag":959,"props":1543,"children":1544},{},[1545],{"type":1018,"value":1546},"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);}",{"title":234,"searchDepth":256,"depth":256,"links":1548},[],1792591719974]