[{"data":1,"prerenderedAt":1672},["ShallowReactive",2],{"navigation":3,"/cookbook/model-animation":211,"/cookbook/model-animation-surround":1667},[4,29,62,149,177,187,191,195,199,203,207],{"title":5,"path":6,"stem":7,"children":8,"icon":27,"titleTemplate":28},"Getting Started","/getting-started","1.getting-started/1.index",[9,12,17,22],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-lucide-house",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",{"title":18,"path":19,"stem":20,"icon":21},"Your First Scene","/getting-started/your-first-scene","1.getting-started/3.your-first-scene","i-lucide-donut",{"title":23,"path":24,"stem":25,"icon":26},"Upgrade Guide","/getting-started/upgrade-guide","1.getting-started/4.upgrade-guide","i-lucide-circle-arrow-up","i-lucide-rocket","%s · Get Started with TresJS",{"title":30,"path":31,"stem":32,"children":33},"Essentials","/essentials","2.essentials",[34,36,48],{"title":30,"path":31,"stem":35},"2.essentials/index",{"title":37,"icon":38,"open":39,"path":40,"stem":41,"children":42,"page":47},"Core Architecture","i-lucide-cpu",true,"/essentials/core-architecture","2.essentials/1.core-architecture",[43],{"title":44,"path":45,"stem":46},"Custom Vue Renderer","/essentials/core-architecture/custom-vue-renderer","2.essentials/1.core-architecture/2.custom-vue-renderer",false,{"title":49,"icon":50,"open":39,"path":51,"stem":52,"children":53,"page":47},"Key Concepts","i-lucide-medal","/essentials/concepts","2.essentials/2.concepts",[54,58],{"title":55,"path":56,"stem":57},"Declarative vs Imperative","/essentials/concepts/declarative-vs-imperative","2.essentials/2.concepts/1.declarative-vs-imperative",{"title":59,"path":60,"stem":61},"Reactivity","/essentials/concepts/reactivity","2.essentials/2.concepts/2.reactivity",{"title":63,"path":64,"stem":65,"children":66},"API","/api","3.api",[67,70,84,111,121,131],{"title":68,"path":64,"stem":69},"TresJS API Reference","3.api/1.index",{"title":71,"icon":72,"open":39,"path":73,"stem":74,"children":75,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[76,80],{"title":77,"path":78,"stem":79},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":81,"path":82,"stem":83},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":85,"titleTemplate":86,"icon":87,"path":88,"stem":89,"children":90,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[91,95,99,103,107],{"title":92,"path":93,"stem":94},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":96,"path":97,"stem":98},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":100,"path":101,"stem":102},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":104,"path":105,"stem":106},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":108,"path":109,"stem":110},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":112,"icon":113,"path":114,"stem":115,"children":116,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[117],{"title":118,"path":119,"stem":120},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":122,"icon":123,"path":124,"stem":125,"children":126,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[127],{"title":128,"path":129,"stem":130},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[137,141,145],{"title":138,"path":139,"stem":140},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":142,"path":143,"stem":144},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":146,"path":147,"stem":148},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":150,"path":151,"stem":152,"children":153},"Cookbook","/cookbook","4.cookbook",[154,157,161,165,169,173],{"title":155,"path":151,"stem":156},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":158,"path":159,"stem":160},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":162,"path":163,"stem":164},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":166,"path":167,"stem":168},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":170,"path":171,"stem":172},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":174,"path":175,"stem":176},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":178,"path":179,"stem":180,"children":181},"Community","/community","5.community/1.index",[182,183],{"title":178,"path":179,"stem":180},{"title":184,"path":185,"stem":186},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":188,"path":189,"stem":190},"German Translation","/de","de",{"title":192,"path":193,"stem":194},"Spanish Translation","/es","es",{"title":196,"path":197,"stem":198},"French Translation","/fr","fr",{"title":200,"path":201,"stem":202},"Italian Translation","/it","it",{"title":204,"path":205,"stem":206},"Japanese Translation","/jp","jp",{"title":208,"path":209,"stem":210},"Chinese Translation","/zh","zh",{"id":212,"title":166,"body":213,"description":1660,"extension":1661,"links":1662,"meta":1663,"navigation":39,"path":167,"seo":1665,"stem":168,"__hash__":1666},"docs/4.cookbook/3.model-animation.md",{"type":214,"value":215,"toc":1655},"minimark",[216,219,223,228,231,261,278,285,289,692,696,1651],[217,218],"examples-model-animation",{},[220,221,222],"p",{},"Let's bring your 3D models to life with animations in TresJS. This guide covers loading animated models and controlling their playback.",[224,225,227],"h2",{"id":226},"where-to-find-models","Where to find models?",[220,229,230],{},"You can find quality 3D models for your projects in various online repositories. Here are some hand picked sources from the TresJS community:",[232,233,234,245,253],"ul",{},[235,236,237,244],"li",{},[238,239,243],"a",{"href":240,"rel":241},"https://poly.pizza/",[242],"nofollow","poly.pizza"," - A collection of free 3D models.",[235,246,247,252],{},[238,248,251],{"href":249,"rel":250},"https://market.pmnd.rs/",[242],"Pmndrs Marketplace"," - A marketplace for 3D assets. All free",[235,254,255,260],{},[238,256,259],{"href":257,"rel":258},"https://kaylousberg.itch.io/",[242],"KayKit Character Packs"," - Free and paid character packs. Animated, all CC0, a personal favorite of ours.",[220,262,263,264,268,269,277],{},"For this tutorial we will use a simplified version of the ",[265,266,267],"strong",{},"KayKit Knight character",", you can download it directly from ",[270,271,276],"u-button",{"variant":272,"icon":273,"download":39,"external":274,":to":275},"ghost","i-lucide-arrow-down","","/models/knight/Knight.glb","here",".",[220,279,280],{},[281,282],"img",{"alt":283,"src":284},"Knight model","/recipes/model-n-animations/kaykit-simplified-knight.png",[224,286,288],{"id":287},"loading-animated-models","Loading Animated Models",[290,291,292,297,305,329,333,346,474,484,488,491,497],"steps",{},[293,294,296],"h3",{"id":295},"install-cientos","Install cientos",[220,298,299,300,304],{},"If you haven't already, install the ",[301,302,303],"code",{},"@tresjs/cientos"," package, which provides components for loading 3D models.",[306,307,311],"pre",{"className":308,"code":309,"language":310,"meta":274,"style":274},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @tresjs/cientos\n","bash",[301,312,313],{"__ignoreMap":274},[314,315,318,322,326],"span",{"class":316,"line":317},"line",1,[314,319,321],{"class":320},"sBMFI","npm",[314,323,325],{"class":324},"sfazB"," install",[314,327,328],{"class":324}," @tresjs/cientos\n",[293,330,332],{"id":331},"load-the-model","Load the Model",[220,334,335,336,339,340,342,343,277],{},"Use the ",[301,337,338],{},"useGLTF"," composable from ",[301,341,303],{}," to load your animated model. Add the downloaded GLB file to your public directory in a subfolder like ",[301,344,345],{},"/models/knight/",[306,347,352],{"className":348,"code":349,"filename":350,"language":351,"meta":274,"style":274},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\n\u003C/script>\n","Knight.vue","vue",[301,353,354,385,413,419,464],{"__ignoreMap":274},[314,355,356,360,364,368,371,374,377,380,382],{"class":316,"line":317},[314,357,359],{"class":358},"sMK4o","\u003C",[314,361,363],{"class":362},"swJcz","script",[314,365,367],{"class":366},"spNyl"," setup",[314,369,370],{"class":366}," lang",[314,372,373],{"class":358},"=",[314,375,376],{"class":358},"\"",[314,378,379],{"class":324},"ts",[314,381,376],{"class":358},[314,383,384],{"class":358},">\n",[314,386,388,392,395,399,402,405,408,410],{"class":316,"line":387},2,[314,389,391],{"class":390},"s7zQu","import",[314,393,394],{"class":358}," {",[314,396,398],{"class":397},"sTEyZ"," useGLTF",[314,400,401],{"class":358}," }",[314,403,404],{"class":390}," from",[314,406,407],{"class":358}," '",[314,409,303],{"class":324},[314,411,412],{"class":358},"'\n",[314,414,416],{"class":316,"line":415},3,[314,417,418],{"emptyLinePlaceholder":39},"\n",[314,420,422,425,427,430,433,436,439,442,445,448,451,454,457,459,461],{"class":316,"line":421},4,[314,423,424],{"class":366},"const",[314,426,394],{"class":358},[314,428,429],{"class":362}," state",[314,431,432],{"class":358},":",[314,434,435],{"class":397}," model",[314,437,438],{"class":358},",",[314,440,441],{"class":397}," nodes ",[314,443,444],{"class":358},"}",[314,446,447],{"class":358}," =",[314,449,398],{"class":450},"s2Zo4",[314,452,453],{"class":397},"(",[314,455,456],{"class":358},"'",[314,458,275],{"class":324},[314,460,456],{"class":358},[314,462,463],{"class":397},")\n",[314,465,467,470,472],{"class":316,"line":466},5,[314,468,469],{"class":358},"\u003C/",[314,471,363],{"class":362},[314,473,384],{"class":358},[475,476,478],"read-more",{"to":477},"https://cientos.tresjs.org/guide/loaders/use-gltf.html",[220,479,480,481,483],{},"Learn more about the ",[301,482,338],{}," composable.",[293,485,487],{"id":486},"add-rig-to-the-scene","Add Rig to the Scene",[220,489,490],{},"The Rig is the root object that contains the entire model and its animations. You can access it from the individual nodes.",[492,493,494],"tip",{},[220,495,496],{},"The Rig might be named differently depending on the model. Check the model's structure to find the correct root object.",[306,498,500],{"className":348,"code":499,"filename":350,"language":351,"meta":274,"style":274},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF } from '@tresjs/cientos'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\n\n// We access the rig from the individual nodes\nconst rig = computed(() => nodes.value.Rig)\n\u003C/script>\n\n\u003Ctemplate>\n   \u003Cprimitive v-if=\"rig\" :object=\"rig\" />\n\u003C/template>\n",[301,501,502,522,540,544,576,580,587,621,630,635,645,683],{"__ignoreMap":274},[314,503,504,506,508,510,512,514,516,518,520],{"class":316,"line":317},[314,505,359],{"class":358},[314,507,363],{"class":362},[314,509,367],{"class":366},[314,511,370],{"class":366},[314,513,373],{"class":358},[314,515,376],{"class":358},[314,517,379],{"class":324},[314,519,376],{"class":358},[314,521,384],{"class":358},[314,523,524,526,528,530,532,534,536,538],{"class":316,"line":387},[314,525,391],{"class":390},[314,527,394],{"class":358},[314,529,398],{"class":397},[314,531,401],{"class":358},[314,533,404],{"class":390},[314,535,407],{"class":358},[314,537,303],{"class":324},[314,539,412],{"class":358},[314,541,542],{"class":316,"line":415},[314,543,418],{"emptyLinePlaceholder":39},[314,545,546,548,550,552,554,556,558,560,562,564,566,568,570,572,574],{"class":316,"line":421},[314,547,424],{"class":366},[314,549,394],{"class":358},[314,551,429],{"class":362},[314,553,432],{"class":358},[314,555,435],{"class":397},[314,557,438],{"class":358},[314,559,441],{"class":397},[314,561,444],{"class":358},[314,563,447],{"class":358},[314,565,398],{"class":450},[314,567,453],{"class":397},[314,569,456],{"class":358},[314,571,275],{"class":324},[314,573,456],{"class":358},[314,575,463],{"class":397},[314,577,578],{"class":316,"line":466},[314,579,418],{"emptyLinePlaceholder":39},[314,581,583],{"class":316,"line":582},6,[314,584,586],{"class":585},"sHwdD","// We access the rig from the individual nodes\n",[314,588,590,592,595,597,600,602,605,608,611,613,616,618],{"class":316,"line":589},7,[314,591,424],{"class":366},[314,593,594],{"class":397}," rig ",[314,596,373],{"class":358},[314,598,599],{"class":450}," computed",[314,601,453],{"class":397},[314,603,604],{"class":358},"()",[314,606,607],{"class":366}," =>",[314,609,610],{"class":397}," nodes",[314,612,277],{"class":358},[314,614,615],{"class":397},"value",[314,617,277],{"class":358},[314,619,620],{"class":397},"Rig)\n",[314,622,624,626,628],{"class":316,"line":623},8,[314,625,469],{"class":358},[314,627,363],{"class":362},[314,629,384],{"class":358},[314,631,633],{"class":316,"line":632},9,[314,634,418],{"emptyLinePlaceholder":39},[314,636,638,640,643],{"class":316,"line":637},10,[314,639,359],{"class":358},[314,641,642],{"class":362},"template",[314,644,384],{"class":358},[314,646,648,651,654,657,659,661,664,666,669,672,674,676,678,680],{"class":316,"line":647},11,[314,649,650],{"class":358},"   \u003C",[314,652,653],{"class":362},"primitive",[314,655,656],{"class":390}," v-if",[314,658,373],{"class":358},[314,660,376],{"class":358},[314,662,663],{"class":397},"rig",[314,665,376],{"class":358},[314,667,668],{"class":358}," :",[314,670,671],{"class":366},"object",[314,673,373],{"class":358},[314,675,376],{"class":358},[314,677,663],{"class":397},[314,679,376],{"class":358},[314,681,682],{"class":358}," />\n",[314,684,686,688,690],{"class":316,"line":685},12,[314,687,469],{"class":358},[314,689,642],{"class":362},[314,691,384],{"class":358},[224,693,695],{"id":694},"animation-control","Animation Control",[290,697,698,705,715,899,906,910,917,968,972,979,1033,1037,1048,1617,1622],{},[293,699,335,701,704],{"id":700},"use-the-useanimations-composable",[301,702,703],{},"useAnimations"," Composable",[220,706,707,708,710,711,714],{},"The ",[301,709,703],{}," composable helps manage and play animations from your model. It takes the animations array and the rig as parameters and returns the ",[301,712,713],{},"AnimationClips"," (actions).",[306,716,718],{"className":348,"code":717,"filename":350,"language":351,"meta":274,"style":274},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useAnimations } from '@tresjs/cientos'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\n\nconst animations = computed(() => model.value?.animations || [])\nconst rig = computed(() => nodes.value.Rig)\n\nconst { actions } = useAnimations(animations, rig)\n\u003C/script>\n",[301,719,720,740,763,767,799,803,838,864,868,891],{"__ignoreMap":274},[314,721,722,724,726,728,730,732,734,736,738],{"class":316,"line":317},[314,723,359],{"class":358},[314,725,363],{"class":362},[314,727,367],{"class":366},[314,729,370],{"class":366},[314,731,373],{"class":358},[314,733,376],{"class":358},[314,735,379],{"class":324},[314,737,376],{"class":358},[314,739,384],{"class":358},[314,741,742,744,746,748,750,753,755,757,759,761],{"class":316,"line":387},[314,743,391],{"class":390},[314,745,394],{"class":358},[314,747,398],{"class":397},[314,749,438],{"class":358},[314,751,752],{"class":397}," useAnimations",[314,754,401],{"class":358},[314,756,404],{"class":390},[314,758,407],{"class":358},[314,760,303],{"class":324},[314,762,412],{"class":358},[314,764,765],{"class":316,"line":415},[314,766,418],{"emptyLinePlaceholder":39},[314,768,769,771,773,775,777,779,781,783,785,787,789,791,793,795,797],{"class":316,"line":421},[314,770,424],{"class":366},[314,772,394],{"class":358},[314,774,429],{"class":362},[314,776,432],{"class":358},[314,778,435],{"class":397},[314,780,438],{"class":358},[314,782,441],{"class":397},[314,784,444],{"class":358},[314,786,447],{"class":358},[314,788,398],{"class":450},[314,790,453],{"class":397},[314,792,456],{"class":358},[314,794,275],{"class":324},[314,796,456],{"class":358},[314,798,463],{"class":397},[314,800,801],{"class":316,"line":466},[314,802,418],{"emptyLinePlaceholder":39},[314,804,805,807,810,812,814,816,818,820,822,824,826,829,832,835],{"class":316,"line":582},[314,806,424],{"class":366},[314,808,809],{"class":397}," animations ",[314,811,373],{"class":358},[314,813,599],{"class":450},[314,815,453],{"class":397},[314,817,604],{"class":358},[314,819,607],{"class":366},[314,821,435],{"class":397},[314,823,277],{"class":358},[314,825,615],{"class":397},[314,827,828],{"class":358},"?.",[314,830,831],{"class":397},"animations ",[314,833,834],{"class":358},"||",[314,836,837],{"class":397}," [])\n",[314,839,840,842,844,846,848,850,852,854,856,858,860,862],{"class":316,"line":589},[314,841,424],{"class":366},[314,843,594],{"class":397},[314,845,373],{"class":358},[314,847,599],{"class":450},[314,849,453],{"class":397},[314,851,604],{"class":358},[314,853,607],{"class":366},[314,855,610],{"class":397},[314,857,277],{"class":358},[314,859,615],{"class":397},[314,861,277],{"class":358},[314,863,620],{"class":397},[314,865,866],{"class":316,"line":623},[314,867,418],{"emptyLinePlaceholder":39},[314,869,870,872,874,877,879,881,883,886,888],{"class":316,"line":632},[314,871,424],{"class":366},[314,873,394],{"class":358},[314,875,876],{"class":397}," actions ",[314,878,444],{"class":358},[314,880,447],{"class":358},[314,882,752],{"class":450},[314,884,885],{"class":397},"(animations",[314,887,438],{"class":358},[314,889,890],{"class":397}," rig)\n",[314,892,893,895,897],{"class":316,"line":637},[314,894,469],{"class":358},[314,896,363],{"class":362},[314,898,384],{"class":358},[475,900,902],{"to":901},"https://cientos.tresjs.org/guide/abstractions/use-animations.html",[220,903,480,904,483],{},[301,905,703],{},[293,907,909],{"id":908},"play-an-animation","Play an Animation",[220,911,912,913,916],{},"You can play an animation by calling the ",[301,914,915],{},"play"," method on the desired action. For example, to play the \"Cheer\" animation:",[306,918,921],{"className":919,"code":920,"language":379,"meta":274,"style":274},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const { actions } = useAnimations(animations, rig)\n\nactions.value.Cheer?.play()\n",[301,922,923,943,947],{"__ignoreMap":274},[314,924,925,927,929,931,933,935,937,939,941],{"class":316,"line":317},[314,926,424],{"class":366},[314,928,394],{"class":358},[314,930,876],{"class":397},[314,932,444],{"class":358},[314,934,447],{"class":358},[314,936,752],{"class":450},[314,938,885],{"class":397},[314,940,438],{"class":358},[314,942,890],{"class":397},[314,944,945],{"class":316,"line":387},[314,946,418],{"emptyLinePlaceholder":39},[314,948,949,952,954,956,958,961,963,965],{"class":316,"line":415},[314,950,951],{"class":397},"actions",[314,953,277],{"class":358},[314,955,615],{"class":397},[314,957,277],{"class":358},[314,959,960],{"class":397},"Cheer",[314,962,828],{"class":358},[314,964,915],{"class":450},[314,966,967],{"class":397},"()\n",[293,969,971],{"id":970},"set-animation-loop","Set animation loop",[220,973,974,975,978],{},"You can set the loop mode of an animation using the ",[301,976,977],{},"setLoop"," method. For example, to make the \"Cheer\" animation loop indefinitely:",[306,980,982],{"className":919,"code":981,"language":379,"meta":274,"style":274},"actions.value.Cheer?.setLoop(THREE.LoopRepeat, Infinity)\nactions.value.Cheer?.play()\n",[301,983,984,1015],{"__ignoreMap":274},[314,985,986,988,990,992,994,996,998,1000,1003,1005,1008,1010,1013],{"class":316,"line":317},[314,987,951],{"class":397},[314,989,277],{"class":358},[314,991,615],{"class":397},[314,993,277],{"class":358},[314,995,960],{"class":397},[314,997,828],{"class":358},[314,999,977],{"class":450},[314,1001,1002],{"class":397},"(THREE",[314,1004,277],{"class":358},[314,1006,1007],{"class":397},"LoopRepeat",[314,1009,438],{"class":358},[314,1011,1012],{"class":358}," Infinity",[314,1014,463],{"class":397},[314,1016,1017,1019,1021,1023,1025,1027,1029,1031],{"class":316,"line":387},[314,1018,951],{"class":397},[314,1020,277],{"class":358},[314,1022,615],{"class":397},[314,1024,277],{"class":358},[314,1026,960],{"class":397},[314,1028,828],{"class":358},[314,1030,915],{"class":450},[314,1032,967],{"class":397},[293,1034,1036],{"id":1035},"smooth-animation-transitions","Smooth Animation Transitions",[220,1038,1039,1040,1043,1044,1047],{},"To create smooth transitions between animations, use the ",[301,1041,1042],{},"fadeIn"," and ",[301,1045,1046],{},"fadeOut"," methods. This prevents abrupt changes and creates more natural character movement:",[306,1049,1051],{"className":348,"code":1050,"filename":350,"language":351,"meta":274,"style":274},"\u003Cscript setup lang=\"ts\">\nimport { useGLTF, useAnimations } from '@tresjs/cientos'\nimport type { AnimationAction } from 'three'\n\nconst { state: model, nodes } = useGLTF('/models/knight/Knight.glb')\nconst animations = computed(() => model.value?.animations || [])\nconst rig = computed(() => nodes.value.Rig)\nconst { actions } = useAnimations(animations, rig)\n\nlet currentAction = ref\u003CAnimationAction | null>(null)\n\nconst transitionToAnimation = (animationName: string, duration = 0.5) => {\n  const nextAction = actions.value[animationName]\n  if (!nextAction) return\n\n  // Fade out current animation\n  if (currentAction.value) {\n    currentAction.value.fadeOut(duration)\n  }\n\n  // Fade in new animation\n  nextAction.reset()\n  nextAction.setEffectiveWeight(1)\n  nextAction.play()\n  nextAction.fadeIn(duration)\n\n  currentAction.value = nextAction\n}\n\n// Example: Transition from Idle to Cheer\nconst playCheerAnimation = () => {\n  transitionToAnimation('Cheer', 0.3)\n}\n\nconst playIdleAnimation = () => {\n  transitionToAnimation('Idle', 0.3)\n}\n\u003C/script>\n",[301,1052,1053,1073,1095,1118,1122,1154,1184,1210,1230,1234,1268,1272,1312,1338,1358,1363,1369,1388,1409,1415,1420,1426,1439,1456,1467,1482,1487,1502,1508,1513,1519,1536,1557,1562,1567,1583,1603,1608],{"__ignoreMap":274},[314,1054,1055,1057,1059,1061,1063,1065,1067,1069,1071],{"class":316,"line":317},[314,1056,359],{"class":358},[314,1058,363],{"class":362},[314,1060,367],{"class":366},[314,1062,370],{"class":366},[314,1064,373],{"class":358},[314,1066,376],{"class":358},[314,1068,379],{"class":324},[314,1070,376],{"class":358},[314,1072,384],{"class":358},[314,1074,1075,1077,1079,1081,1083,1085,1087,1089,1091,1093],{"class":316,"line":387},[314,1076,391],{"class":390},[314,1078,394],{"class":358},[314,1080,398],{"class":397},[314,1082,438],{"class":358},[314,1084,752],{"class":397},[314,1086,401],{"class":358},[314,1088,404],{"class":390},[314,1090,407],{"class":358},[314,1092,303],{"class":324},[314,1094,412],{"class":358},[314,1096,1097,1099,1102,1104,1107,1109,1111,1113,1116],{"class":316,"line":415},[314,1098,391],{"class":390},[314,1100,1101],{"class":390}," type",[314,1103,394],{"class":358},[314,1105,1106],{"class":397}," AnimationAction",[314,1108,401],{"class":358},[314,1110,404],{"class":390},[314,1112,407],{"class":358},[314,1114,1115],{"class":324},"three",[314,1117,412],{"class":358},[314,1119,1120],{"class":316,"line":421},[314,1121,418],{"emptyLinePlaceholder":39},[314,1123,1124,1126,1128,1130,1132,1134,1136,1138,1140,1142,1144,1146,1148,1150,1152],{"class":316,"line":466},[314,1125,424],{"class":366},[314,1127,394],{"class":358},[314,1129,429],{"class":362},[314,1131,432],{"class":358},[314,1133,435],{"class":397},[314,1135,438],{"class":358},[314,1137,441],{"class":397},[314,1139,444],{"class":358},[314,1141,447],{"class":358},[314,1143,398],{"class":450},[314,1145,453],{"class":397},[314,1147,456],{"class":358},[314,1149,275],{"class":324},[314,1151,456],{"class":358},[314,1153,463],{"class":397},[314,1155,1156,1158,1160,1162,1164,1166,1168,1170,1172,1174,1176,1178,1180,1182],{"class":316,"line":582},[314,1157,424],{"class":366},[314,1159,809],{"class":397},[314,1161,373],{"class":358},[314,1163,599],{"class":450},[314,1165,453],{"class":397},[314,1167,604],{"class":358},[314,1169,607],{"class":366},[314,1171,435],{"class":397},[314,1173,277],{"class":358},[314,1175,615],{"class":397},[314,1177,828],{"class":358},[314,1179,831],{"class":397},[314,1181,834],{"class":358},[314,1183,837],{"class":397},[314,1185,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208],{"class":316,"line":589},[314,1187,424],{"class":366},[314,1189,594],{"class":397},[314,1191,373],{"class":358},[314,1193,599],{"class":450},[314,1195,453],{"class":397},[314,1197,604],{"class":358},[314,1199,607],{"class":366},[314,1201,610],{"class":397},[314,1203,277],{"class":358},[314,1205,615],{"class":397},[314,1207,277],{"class":358},[314,1209,620],{"class":397},[314,1211,1212,1214,1216,1218,1220,1222,1224,1226,1228],{"class":316,"line":623},[314,1213,424],{"class":366},[314,1215,394],{"class":358},[314,1217,876],{"class":397},[314,1219,444],{"class":358},[314,1221,447],{"class":358},[314,1223,752],{"class":450},[314,1225,885],{"class":397},[314,1227,438],{"class":358},[314,1229,890],{"class":397},[314,1231,1232],{"class":316,"line":632},[314,1233,418],{"emptyLinePlaceholder":39},[314,1235,1236,1239,1242,1244,1247,1249,1252,1255,1258,1261,1263,1266],{"class":316,"line":637},[314,1237,1238],{"class":366},"let",[314,1240,1241],{"class":397}," currentAction ",[314,1243,373],{"class":358},[314,1245,1246],{"class":450}," ref",[314,1248,359],{"class":358},[314,1250,1251],{"class":320},"AnimationAction",[314,1253,1254],{"class":358}," |",[314,1256,1257],{"class":320}," null",[314,1259,1260],{"class":358},">",[314,1262,453],{"class":397},[314,1264,1265],{"class":358},"null",[314,1267,463],{"class":397},[314,1269,1270],{"class":316,"line":647},[314,1271,418],{"emptyLinePlaceholder":39},[314,1273,1274,1276,1279,1281,1284,1288,1290,1293,1295,1298,1300,1304,1307,1309],{"class":316,"line":685},[314,1275,424],{"class":366},[314,1277,1278],{"class":397}," transitionToAnimation ",[314,1280,373],{"class":358},[314,1282,1283],{"class":358}," (",[314,1285,1287],{"class":1286},"sHdIc","animationName",[314,1289,432],{"class":358},[314,1291,1292],{"class":320}," string",[314,1294,438],{"class":358},[314,1296,1297],{"class":1286}," duration",[314,1299,447],{"class":358},[314,1301,1303],{"class":1302},"sbssI"," 0.5",[314,1305,1306],{"class":358},")",[314,1308,607],{"class":366},[314,1310,1311],{"class":358}," {\n",[314,1313,1315,1318,1321,1323,1326,1328,1330,1333,1335],{"class":316,"line":1314},13,[314,1316,1317],{"class":366},"  const",[314,1319,1320],{"class":397}," nextAction",[314,1322,447],{"class":358},[314,1324,1325],{"class":397}," actions",[314,1327,277],{"class":358},[314,1329,615],{"class":397},[314,1331,1332],{"class":362},"[",[314,1334,1287],{"class":397},[314,1336,1337],{"class":362},"]\n",[314,1339,1341,1344,1346,1349,1352,1355],{"class":316,"line":1340},14,[314,1342,1343],{"class":390},"  if",[314,1345,1283],{"class":362},[314,1347,1348],{"class":358},"!",[314,1350,1351],{"class":397},"nextAction",[314,1353,1354],{"class":362},") ",[314,1356,1357],{"class":390},"return\n",[314,1359,1361],{"class":316,"line":1360},15,[314,1362,418],{"emptyLinePlaceholder":39},[314,1364,1366],{"class":316,"line":1365},16,[314,1367,1368],{"class":585},"  // Fade out current animation\n",[314,1370,1372,1374,1376,1379,1381,1383,1385],{"class":316,"line":1371},17,[314,1373,1343],{"class":390},[314,1375,1283],{"class":362},[314,1377,1378],{"class":397},"currentAction",[314,1380,277],{"class":358},[314,1382,615],{"class":397},[314,1384,1354],{"class":362},[314,1386,1387],{"class":358},"{\n",[314,1389,1391,1394,1396,1398,1400,1402,1404,1407],{"class":316,"line":1390},18,[314,1392,1393],{"class":397},"    currentAction",[314,1395,277],{"class":358},[314,1397,615],{"class":397},[314,1399,277],{"class":358},[314,1401,1046],{"class":450},[314,1403,453],{"class":362},[314,1405,1406],{"class":397},"duration",[314,1408,463],{"class":362},[314,1410,1412],{"class":316,"line":1411},19,[314,1413,1414],{"class":358},"  }\n",[314,1416,1418],{"class":316,"line":1417},20,[314,1419,418],{"emptyLinePlaceholder":39},[314,1421,1423],{"class":316,"line":1422},21,[314,1424,1425],{"class":585},"  // Fade in new animation\n",[314,1427,1429,1432,1434,1437],{"class":316,"line":1428},22,[314,1430,1431],{"class":397},"  nextAction",[314,1433,277],{"class":358},[314,1435,1436],{"class":450},"reset",[314,1438,967],{"class":362},[314,1440,1442,1444,1446,1449,1451,1454],{"class":316,"line":1441},23,[314,1443,1431],{"class":397},[314,1445,277],{"class":358},[314,1447,1448],{"class":450},"setEffectiveWeight",[314,1450,453],{"class":362},[314,1452,1453],{"class":1302},"1",[314,1455,463],{"class":362},[314,1457,1459,1461,1463,1465],{"class":316,"line":1458},24,[314,1460,1431],{"class":397},[314,1462,277],{"class":358},[314,1464,915],{"class":450},[314,1466,967],{"class":362},[314,1468,1470,1472,1474,1476,1478,1480],{"class":316,"line":1469},25,[314,1471,1431],{"class":397},[314,1473,277],{"class":358},[314,1475,1042],{"class":450},[314,1477,453],{"class":362},[314,1479,1406],{"class":397},[314,1481,463],{"class":362},[314,1483,1485],{"class":316,"line":1484},26,[314,1486,418],{"emptyLinePlaceholder":39},[314,1488,1490,1493,1495,1497,1499],{"class":316,"line":1489},27,[314,1491,1492],{"class":397},"  currentAction",[314,1494,277],{"class":358},[314,1496,615],{"class":397},[314,1498,447],{"class":358},[314,1500,1501],{"class":397}," nextAction\n",[314,1503,1505],{"class":316,"line":1504},28,[314,1506,1507],{"class":358},"}\n",[314,1509,1511],{"class":316,"line":1510},29,[314,1512,418],{"emptyLinePlaceholder":39},[314,1514,1516],{"class":316,"line":1515},30,[314,1517,1518],{"class":585},"// Example: Transition from Idle to Cheer\n",[314,1520,1522,1524,1527,1529,1532,1534],{"class":316,"line":1521},31,[314,1523,424],{"class":366},[314,1525,1526],{"class":397}," playCheerAnimation ",[314,1528,373],{"class":358},[314,1530,1531],{"class":358}," ()",[314,1533,607],{"class":366},[314,1535,1311],{"class":358},[314,1537,1539,1542,1544,1546,1548,1550,1552,1555],{"class":316,"line":1538},32,[314,1540,1541],{"class":450},"  transitionToAnimation",[314,1543,453],{"class":362},[314,1545,456],{"class":358},[314,1547,960],{"class":324},[314,1549,456],{"class":358},[314,1551,438],{"class":358},[314,1553,1554],{"class":1302}," 0.3",[314,1556,463],{"class":362},[314,1558,1560],{"class":316,"line":1559},33,[314,1561,1507],{"class":358},[314,1563,1565],{"class":316,"line":1564},34,[314,1566,418],{"emptyLinePlaceholder":39},[314,1568,1570,1572,1575,1577,1579,1581],{"class":316,"line":1569},35,[314,1571,424],{"class":366},[314,1573,1574],{"class":397}," playIdleAnimation ",[314,1576,373],{"class":358},[314,1578,1531],{"class":358},[314,1580,607],{"class":366},[314,1582,1311],{"class":358},[314,1584,1586,1588,1590,1592,1595,1597,1599,1601],{"class":316,"line":1585},36,[314,1587,1541],{"class":450},[314,1589,453],{"class":362},[314,1591,456],{"class":358},[314,1593,1594],{"class":324},"Idle",[314,1596,456],{"class":358},[314,1598,438],{"class":358},[314,1600,1554],{"class":1302},[314,1602,463],{"class":362},[314,1604,1606],{"class":316,"line":1605},37,[314,1607,1507],{"class":358},[314,1609,1611,1613,1615],{"class":316,"line":1610},38,[314,1612,469],{"class":358},[314,1614,363],{"class":362},[314,1616,384],{"class":358},[220,1618,1619],{},[265,1620,1621],{},"Key points about animation transitions:",[232,1623,1624,1630,1636,1642,1648],{},[235,1625,1626,1629],{},[301,1627,1628],{},"fadeOut(duration)"," gradually reduces the animation's influence over the specified duration",[235,1631,1632,1635],{},[301,1633,1634],{},"fadeIn(duration)"," gradually increases the animation's influence over the specified duration",[235,1637,1638,1641],{},[301,1639,1640],{},"reset()"," resets the animation to its starting frame",[235,1643,1644,1647],{},[301,1645,1646],{},"setEffectiveWeight(1)"," ensures the animation has full influence when active",[235,1649,1650],{},"Shorter durations (0.1-0.3s) work well for quick actions, longer ones (0.5-1s) for smoother character transitions",[1652,1653,1654],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":274,"searchDepth":317,"depth":387,"links":1656},[1657,1658,1659],{"id":226,"depth":387,"text":227},{"id":287,"depth":387,"text":288},{"id":694,"depth":387,"text":695},"Learn how to animate 3D models in TresJS","md",null,{"thumbnail":1664},"/recipes/model-n-animations/model-n-animations.png",{"title":166,"description":1660},"9LY81_yj9Oj0-4efXdxQ4xWaLUr90OGt7MyprunrPPs",[1668,1670],{"title":162,"path":163,"stem":164,"description":1669,"children":-1},"Learn how to create basic animations in TresJS",{"title":170,"path":171,"stem":172,"description":1671,"children":-1},"Learn how to create complex animations using GSAP with TresJS",1768600249456]