[{"data":1,"prerenderedAt":1218},["ShallowReactive",2],{"navigation_docs":3,"i-nanime:logo":163,"-comparisons-vs-vue-packages":170,"-comparisons-vs-vue-packages-surround":1187,"preview-examples\u002Fcomparison\u002FTransitionListDemo.vue-false":1192,"mdc-bne332-key":1192},[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":126,"body":172,"description":1178,"extension":1179,"links":1180,"meta":1181,"navigation":1182,"path":127,"seo":1183,"stem":128,"__hash__":1186},"docs\u002F4.comparisons\u002F2.vs-vue-packages.md",{"type":173,"value":174,"toc":1171},"minimark",[175,204,209,418,427,431,458,462,478,483,1053,1076,1080,1101,1135,1139,1167],[176,177,178,179,183,184,187,188,191,192,200,201,203],"p",{},"This page compares ",[180,181,182],"code",{},"nanime"," with ",[180,185,186],{},"vue-animejs"," and ",[180,189,190],{},"v-anime",", as of\nSeptember 2026. If something is out of date,\n",[193,194,199],"a",{"href":195,"rel":196,"target":198},"https:\u002F\u002Fgithub.com\u002Fastraldev\u002Fnanime\u002Fissues",[197],"nofollow","_blank","open an issue",".\nFor Nuxt modules, see\n",[193,202,121],{"href":122},".",[205,206,208],"h2",{"id":207},"how-do-the-vue-packages-compare","How do the Vue packages compare?",[210,211,212,235],"table",{},[213,214,215],"thead",{},[216,217,218,222,226,231],"tr",{},[219,220],"th",{"align":221},"left",[219,223,224],{"align":221},[180,225,182],{},[219,227,228],{"align":221},[180,229,230],{},"@juleshry\u002Fvue-animejs",[219,232,233],{"align":221},[180,234,190],{},[236,237,238,260,273,284,299,313,334,357,373,388,404],"tbody",{},[216,239,240,247,255,258],{},[241,242,243,246],"td",{"align":221},[193,244,245],{"href":17},"Nuxt module"," with auto-imports",[241,248,249],{"align":221},[250,251,254],"span",{"className":252},[253],"comparison-good","Yes",[241,256,257],{"align":221},"No",[241,259,257],{"align":221},[216,261,262,265,268,270],{},[241,263,264],{"align":221},"Latest release",[241,266,267],{"align":221},"Sep 2026",[241,269,267],{"align":221},[241,271,272],{"align":221},"May 2025",[216,274,275,278,280,282],{},[241,276,277],{"align":221},"Safe during SSR, cleans up on unmount",[241,279,254],{"align":221},[241,281,254],{"align":221},[241,283,254],{"align":221},[216,285,286,293,295,297],{},[241,287,288,289,292],{"align":221},"Rebuilds when a ",[180,290,291],{},"ref"," changes",[241,294,254],{"align":221},[241,296,254],{"align":221},[241,298,257],{"align":221},[216,300,301,304,309,311],{},[241,302,303],{"align":221},"Keeps the playhead on rebuild",[241,305,306],{"align":221},[250,307,254],{"className":308},[253],[241,310,257],{"align":221},[241,312,257],{"align":221},[216,314,315,327,329,331],{},[241,316,317,320,321,320,324],{"align":221},[193,318,319],{"href":46},"Animate",", ",[193,322,323],{"href":76},"timeline",[193,325,326],{"href":71},"draggable",[241,328,254],{"align":221},[241,330,254],{"align":221},[241,332,333],{"align":221},"Manual",[216,335,336,351,353,355],{},[241,337,338,320,341,320,344,320,347,350],{"align":221},[193,339,340],{"href":51},"WAAPI",[193,342,343],{"href":61},"split text",[193,345,346],{"href":81},"scroll",[193,348,349],{"href":86},"layout"," and more",[241,352,254],{"align":221},[241,354,254],{"align":221},[241,356,257],{"align":221},[216,358,359,364,369,371],{},[241,360,361],{"align":221},[193,362,363],{"href":66},"Scramble text",[241,365,366],{"align":221},[250,367,254],{"className":368},[253],[241,370,257],{"align":221},[241,372,257],{"align":221},[216,374,375,378,380,385],{},[241,376,377],{"align":221},"Timer and scope composables",[241,379,257],{"align":221},[241,381,382],{"align":221},[250,383,254],{"className":384},[253],[241,386,387],{"align":221},"Scope only",[216,389,390,395,400,402],{},[241,391,392],{"align":221},[193,393,394],{"href":102},"Transition components",[241,396,397],{"align":221},[250,398,254],{"className":399},[253],[241,401,257],{"align":221},[241,403,257],{"align":221},[216,405,406,409,411,416],{},[241,407,408],{"align":221},"Directives",[241,410,257],{"align":221},[241,412,413],{"align":221},[250,414,254],{"className":415},[253],[241,417,257],{"align":221},[419,420,421,422,187,424,426],"tip",{},"Green marks the rows where ",[180,423,182],{},[180,425,186],{}," differ, on the\npackage that has the feature. \"Manual\" means the package leaves that step\nto your own code.",[205,428,430],{"id":429},"which-should-you-pick","Which should you pick?",[432,433,434,440,453],"ul",{},[435,436,437,439],"li",{},[180,438,182],{}," for a Nuxt app, transition components, or rebuilds that keep\nthe playhead.",[435,441,442,444,445,448,449,452],{},[180,443,186],{}," for directives, ",[180,446,447],{},"useTimer"," or ",[180,450,451],{},"useScope",", or a Vue app\nwithout Nuxt.",[435,454,455,457],{},[180,456,190],{}," for a thin wrapper around an AnimeJS scope.",[205,459,461],{"id":460},"how-do-lists-animate-in-and-out","How do lists animate in and out?",[176,463,464,470,471,474,475,477],{},[193,465,467],{"href":466},"\u002Fcomponents\u002Ftransitions#lists",[180,468,469],{},"\u003CAnimeTransitionGroup>"," scales items in\nand out of a ",[180,472,473],{},"v-for"," list. AnimeJS\n",[193,476,349],{"href":86}," slides the other items to their\nnew places:",[479,480],"render-code-block-preview",{":code":481,"src":482},"false","examples\u002Fcomparison\u002FTransitionListDemo.vue",[484,485,486,654],"code-group",{},[487,488,493],"pre",{"className":489,"code":490,"filename":182,"language":491,"meta":492,"style":492},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CAnimeTransitionGroup\n    tag=\"ul\"\n    enter-animation=\"scale\"\n    leave-animation=\"scale\"\n    class=\"relative\"\n  >\n    \u003Cli v-for=\"item in items\" :key=\"item\">{{ item }}\u003C\u002Fli>\n  \u003C\u002FAnimeTransitionGroup>\n\u003C\u002Ftemplate>\n","vue","",[180,494,495,510,519,538,553,567,582,588,634,645],{"__ignoreMap":492},[250,496,499,503,507],{"class":497,"line":498},"line",1,[250,500,502],{"class":501},"sMK4o","\u003C",[250,504,506],{"class":505},"swJcz","template",[250,508,509],{"class":501},">\n",[250,511,513,516],{"class":497,"line":512},2,[250,514,515],{"class":501},"  \u003C",[250,517,518],{"class":505},"AnimeTransitionGroup\n",[250,520,522,526,529,532,535],{"class":497,"line":521},3,[250,523,525],{"class":524},"spNyl","    tag",[250,527,528],{"class":501},"=",[250,530,531],{"class":501},"\"",[250,533,432],{"class":534},"sfazB",[250,536,537],{"class":501},"\"\n",[250,539,541,544,546,548,551],{"class":497,"line":540},4,[250,542,543],{"class":524},"    enter-animation",[250,545,528],{"class":501},[250,547,531],{"class":501},[250,549,550],{"class":534},"scale",[250,552,537],{"class":501},[250,554,556,559,561,563,565],{"class":497,"line":555},5,[250,557,558],{"class":524},"    leave-animation",[250,560,528],{"class":501},[250,562,531],{"class":501},[250,564,550],{"class":534},[250,566,537],{"class":501},[250,568,570,573,575,577,580],{"class":497,"line":569},6,[250,571,572],{"class":524},"    class",[250,574,528],{"class":501},[250,576,531],{"class":501},[250,578,579],{"class":534},"relative",[250,581,537],{"class":501},[250,583,585],{"class":497,"line":584},7,[250,586,587],{"class":501},"  >\n",[250,589,591,594,596,599,601,603,606,608,611,613,615,618,620,623,627,630,632],{"class":497,"line":590},8,[250,592,593],{"class":501},"    \u003C",[250,595,435],{"class":505},[250,597,598],{"class":524}," v-for",[250,600,528],{"class":501},[250,602,531],{"class":501},[250,604,605],{"class":534},"item in items",[250,607,531],{"class":501},[250,609,610],{"class":524}," :key",[250,612,528],{"class":501},[250,614,531],{"class":501},[250,616,617],{"class":534},"item",[250,619,531],{"class":501},[250,621,622],{"class":501},">",[250,624,626],{"class":625},"sTEyZ","{{ item }}",[250,628,629],{"class":501},"\u003C\u002F",[250,631,435],{"class":505},[250,633,509],{"class":501},[250,635,637,640,643],{"class":497,"line":636},9,[250,638,639],{"class":501},"  \u003C\u002F",[250,641,642],{"class":505},"AnimeTransitionGroup",[250,644,509],{"class":501},[250,646,648,650,652],{"class":497,"line":647},10,[250,649,629],{"class":501},[250,651,506],{"class":505},[250,653,509],{"class":501},[487,655,657],{"className":489,"code":656,"filename":186,"language":491,"meta":492,"style":492},"\u003Cscript setup lang=\"ts\">\nimport { useRawAnimate } from '@juleshry\u002Fvue-animejs'\n\nfunction onEnter(el: Element, done: () => void) {\n  useRawAnimate(el, { opacity: [0, 1], scale: [0.85, 1], onComplete: done })\n}\n\nfunction onLeave(el: Element, done: () => void) {\n  useRawAnimate(el, { opacity: 0, scale: 0.85, onComplete: done })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CTransitionGroup tag=\"ul\" :css=\"false\" @enter=\"onEnter\" @leave=\"onLeave\">\n    \u003Cli v-for=\"item in items\" :key=\"item\">{{ item }}\u003C\u002Fli>\n  \u003C\u002FTransitionGroup>\n\u003C\u002Ftemplate>\n",[180,658,659,683,709,715,761,826,831,835,866,906,910,919,924,933,998,1035,1044],{"__ignoreMap":492},[250,660,661,663,666,669,672,674,676,679,681],{"class":497,"line":498},[250,662,502],{"class":501},[250,664,665],{"class":505},"script",[250,667,668],{"class":524}," setup",[250,670,671],{"class":524}," lang",[250,673,528],{"class":501},[250,675,531],{"class":501},[250,677,678],{"class":534},"ts",[250,680,531],{"class":501},[250,682,509],{"class":501},[250,684,685,689,692,695,698,701,704,706],{"class":497,"line":512},[250,686,688],{"class":687},"s7zQu","import",[250,690,691],{"class":501}," {",[250,693,694],{"class":625}," useRawAnimate",[250,696,697],{"class":501}," }",[250,699,700],{"class":687}," from",[250,702,703],{"class":501}," '",[250,705,230],{"class":534},[250,707,708],{"class":501},"'\n",[250,710,711],{"class":497,"line":521},[250,712,714],{"emptyLinePlaceholder":713},true,"\n",[250,716,717,720,724,727,731,734,738,741,744,746,749,752,755,758],{"class":497,"line":540},[250,718,719],{"class":524},"function",[250,721,723],{"class":722},"s2Zo4"," onEnter",[250,725,726],{"class":501},"(",[250,728,730],{"class":729},"sHdIc","el",[250,732,733],{"class":501},":",[250,735,737],{"class":736},"sBMFI"," Element",[250,739,740],{"class":501},",",[250,742,743],{"class":722}," done",[250,745,733],{"class":501},[250,747,748],{"class":501}," ()",[250,750,751],{"class":524}," =>",[250,753,754],{"class":736}," void",[250,756,757],{"class":501},")",[250,759,760],{"class":501}," {\n",[250,762,763,766,768,770,772,774,777,779,782,786,788,791,794,796,799,801,803,806,808,810,812,814,817,819,821,823],{"class":497,"line":555},[250,764,765],{"class":722},"  useRawAnimate",[250,767,726],{"class":505},[250,769,730],{"class":625},[250,771,740],{"class":501},[250,773,691],{"class":501},[250,775,776],{"class":505}," opacity",[250,778,733],{"class":501},[250,780,781],{"class":505}," [",[250,783,785],{"class":784},"sbssI","0",[250,787,740],{"class":501},[250,789,790],{"class":784}," 1",[250,792,793],{"class":505},"]",[250,795,740],{"class":501},[250,797,798],{"class":505}," scale",[250,800,733],{"class":501},[250,802,781],{"class":505},[250,804,805],{"class":784},"0.85",[250,807,740],{"class":501},[250,809,790],{"class":784},[250,811,793],{"class":505},[250,813,740],{"class":501},[250,815,816],{"class":505}," onComplete",[250,818,733],{"class":501},[250,820,743],{"class":625},[250,822,697],{"class":501},[250,824,825],{"class":505},")\n",[250,827,828],{"class":497,"line":569},[250,829,830],{"class":501},"}\n",[250,832,833],{"class":497,"line":584},[250,834,714],{"emptyLinePlaceholder":713},[250,836,837,839,842,844,846,848,850,852,854,856,858,860,862,864],{"class":497,"line":590},[250,838,719],{"class":524},[250,840,841],{"class":722}," onLeave",[250,843,726],{"class":501},[250,845,730],{"class":729},[250,847,733],{"class":501},[250,849,737],{"class":736},[250,851,740],{"class":501},[250,853,743],{"class":722},[250,855,733],{"class":501},[250,857,748],{"class":501},[250,859,751],{"class":524},[250,861,754],{"class":736},[250,863,757],{"class":501},[250,865,760],{"class":501},[250,867,868,870,872,874,876,878,880,882,885,887,889,891,894,896,898,900,902,904],{"class":497,"line":636},[250,869,765],{"class":722},[250,871,726],{"class":505},[250,873,730],{"class":625},[250,875,740],{"class":501},[250,877,691],{"class":501},[250,879,776],{"class":505},[250,881,733],{"class":501},[250,883,884],{"class":784}," 0",[250,886,740],{"class":501},[250,888,798],{"class":505},[250,890,733],{"class":501},[250,892,893],{"class":784}," 0.85",[250,895,740],{"class":501},[250,897,816],{"class":505},[250,899,733],{"class":501},[250,901,743],{"class":625},[250,903,697],{"class":501},[250,905,825],{"class":505},[250,907,908],{"class":497,"line":647},[250,909,830],{"class":501},[250,911,913,915,917],{"class":497,"line":912},11,[250,914,629],{"class":501},[250,916,665],{"class":505},[250,918,509],{"class":501},[250,920,922],{"class":497,"line":921},12,[250,923,714],{"emptyLinePlaceholder":713},[250,925,927,929,931],{"class":497,"line":926},13,[250,928,502],{"class":501},[250,930,506],{"class":505},[250,932,509],{"class":501},[250,934,936,938,941,944,946,948,950,952,955,958,960,962,965,967,970,973,975,977,980,982,984,987,989,991,994,996],{"class":497,"line":935},14,[250,937,515],{"class":501},[250,939,940],{"class":505},"TransitionGroup",[250,942,943],{"class":524}," tag",[250,945,528],{"class":501},[250,947,531],{"class":501},[250,949,432],{"class":534},[250,951,531],{"class":501},[250,953,954],{"class":501}," :",[250,956,957],{"class":524},"css",[250,959,528],{"class":501},[250,961,531],{"class":501},[250,963,481],{"class":964},"sfNiH",[250,966,531],{"class":501},[250,968,969],{"class":501}," @",[250,971,972],{"class":524},"enter",[250,974,528],{"class":501},[250,976,531],{"class":501},[250,978,979],{"class":625},"onEnter",[250,981,531],{"class":501},[250,983,969],{"class":501},[250,985,986],{"class":524},"leave",[250,988,528],{"class":501},[250,990,531],{"class":501},[250,992,993],{"class":625},"onLeave",[250,995,531],{"class":501},[250,997,509],{"class":501},[250,999,1001,1003,1005,1007,1009,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029,1031,1033],{"class":497,"line":1000},15,[250,1002,593],{"class":501},[250,1004,435],{"class":505},[250,1006,598],{"class":524},[250,1008,528],{"class":501},[250,1010,531],{"class":501},[250,1012,605],{"class":534},[250,1014,531],{"class":501},[250,1016,610],{"class":524},[250,1018,528],{"class":501},[250,1020,531],{"class":501},[250,1022,617],{"class":534},[250,1024,531],{"class":501},[250,1026,622],{"class":501},[250,1028,626],{"class":625},[250,1030,629],{"class":501},[250,1032,435],{"class":505},[250,1034,509],{"class":501},[250,1036,1038,1040,1042],{"class":497,"line":1037},16,[250,1039,639],{"class":501},[250,1041,940],{"class":505},[250,1043,509],{"class":501},[250,1045,1047,1049,1051],{"class":497,"line":1046},17,[250,1048,629],{"class":501},[250,1050,506],{"class":505},[250,1052,509],{"class":501},[176,1054,1055,1056,1058,1059,1061,1062,1064,1065,187,1068,1071,1072,1075],{},"Neither ",[180,1057,186],{}," nor ",[180,1060,190],{}," has transition components, so the\n",[180,1063,186],{}," version animates in the ",[180,1066,1067],{},"@enter",[180,1069,1070],{},"@leave"," hooks of Vue's\n",[180,1073,1074],{},"\u003CTransitionGroup>",". Vue animates moves only through a CSS move class, so\nthe other items jump to their new places.",[205,1077,1079],{"id":1078},"how-does-nanime-differ-from-vue-animejs","How does nanime differ from vue-animejs?",[176,1081,1082,1088,1089,1092,1093,187,1095,1097,1098,203],{},[193,1083,1086],{"href":1084,"rel":1085,"target":198},"https:\u002F\u002Fgithub.com\u002Fjuleshry\u002Fvue-animejs",[197],[180,1087,186],{},"\ncovers almost the same AnimeJS v4 APIs. It also has five directives, such\nas ",[180,1090,1091],{},"v-animate",", and the ",[180,1094,447],{},[180,1096,451],{}," composables. It is a Vue\npackage, so in Nuxt each component imports what it uses, or the app\nregisters it in ",[180,1099,1100],{},"imports.presets",[176,1102,1103,1104,448,1106,1109,1110,187,1113,1116,1117,1120,1121,1123,1124,1127,1128,1134],{},"Its composables take reactive options as a ",[180,1105,291],{},[180,1107,1108],{},"computed",". They\nreturn wrapper functions such as ",[180,1111,1112],{},"play",[180,1114,1115],{},"pause",", and keep the AnimeJS\ninstance in an ",[180,1118,1119],{},"animation"," ref. ",[180,1122,182],{}," composables also accept a getter\nand return the AnimeJS instance, so ",[180,1125,1126],{},"animation.play()"," calls AnimeJS\ndirectly. With ",[193,1129,1131],{"href":1130},"\u002Fgetting-started\u002Fconfiguration#keeptime",[180,1132,1133],{},"keepTime",", a\nrebuilt animation continues from where the old one was.",[205,1136,1138],{"id":1137},"how-does-nanime-differ-from-v-anime","How does nanime differ from v-anime?",[176,1140,1141,1147,1148,1151,1152,1155,1156,1159,1160,1162,1163,1166],{},[193,1142,1145],{"href":1143,"rel":1144,"target":198},"https:\u002F\u002Fgithub.com\u002FUpperstrange\u002Fv-anime",[197],[180,1146,190],{}," wraps\nthe AnimeJS v4 ",[180,1149,1150],{},"createScope"," function. Its ",[180,1153,1154],{},"useAnime"," runs your code once\nin ",[180,1157,1158],{},"onMounted",", so changing a ",[180,1161,291],{}," afterwards does not rebuild the\nanimation. The scope reverts on unmount. Install ",[180,1164,1165],{},"animejs"," alongside it,\nsince the package does not list it as a dependency.",[1168,1169,1170],"style",{},"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":492,"searchDepth":512,"depth":512,"links":1172},[1173,1174,1175,1176,1177],{"id":207,"depth":512,"text":208},{"id":429,"depth":512,"text":430},{"id":460,"depth":512,"text":461},{"id":1078,"depth":512,"text":1079},{"id":1137,"depth":512,"text":1138},"How nanime compares with vue-animejs and v-anime, the Vue packages for AnimeJS v4.","md",null,{},{"icon":124,"badge":89},{"title":1184,"description":1185},"nanime vs vue-animejs: Anime.js for Vue and Nuxt","Compare nanime with vue-animejs and v-anime, the Vue packages for Anime.js v4. SSR safety, reactive rebuilds, list transitions, cleanup and API coverage.","3iToo9KsIZYkTR7l6MXGLmzXh9K5YjZMQT6ePaGOgw0",[1188,1190],{"title":121,"path":122,"stem":123,"description":1189,"icon":124,"badge":89,"children":-1},"How nanime compares with AnimeJS on its own in Nuxt, and with nuxt-anime.",{"title":11,"path":135,"stem":136,"description":1191,"icon":137,"children":-1},"Complete sequences built from nanime composables and utilities.",{"data":1193,"body":1194,"toc":1216},{"title":492,"description":492},{"type":1195,"children":1196},"root",[1197,1202],{"type":1198,"tag":1199,"props":1200,"children":1201},"element","transition-list-demo",{},[],{"type":1198,"tag":1203,"props":1204,"children":1212},"u-button",{"className":1205,"color":1208,"icon":1209,"target":198,"to":1210,"variant":1211},[1206,1207],"mt-2.5","pl-0.5","neutral","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002Fastraldev\u002Fnanime\u002Fblob\u002Fmain\u002Fdocs\u002Fapp\u002Fcomponents\u002Fcontent\u002Fexamples\u002Fcomparison\u002FTransitionListDemo.vue","link",[1213],{"type":1214,"value":1215},"text","View on GitHub",{"title":492,"searchDepth":512,"depth":512,"links":1217},[],1792591718550]