[{"data":1,"prerenderedAt":2536},["ShallowReactive",2],{"navigation":3,"/cookbook/advanced-gsap-animations":239,"/cookbook/advanced-gsap-animations-surround":2531},[4,29,78,173,205,215,219,223,227,231,235],{"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,62,66,70,74],{"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},"Constructor Arguments","/essentials/concepts/constructor-arguments","2.essentials/2.concepts/3.constructor-arguments",{"title":67,"path":68,"stem":69},"Declarative Properties","/essentials/concepts/declarative-properties","2.essentials/2.concepts/4.declarative-properties",{"title":71,"path":72,"stem":73},"Extending the Catalogue","/essentials/concepts/extending-catalogue","2.essentials/2.concepts/5.extending-catalogue",{"title":75,"path":76,"stem":77},"Child Attachments","/essentials/concepts/child-attachments","2.essentials/2.concepts/6.child-attachments",{"title":79,"path":80,"stem":81,"children":82},"API","/api","3.api",[83,86,104,131,141,155],{"title":84,"path":80,"stem":85},"TresJS API Reference","3.api/1.index",{"title":87,"icon":88,"open":39,"path":89,"stem":90,"children":91,"page":47},"Components","i-lucide-box","/api/components","3.api/1.components",[92,96,100],{"title":93,"path":94,"stem":95},"\u003CTresCanvas />","/api/components/tres-canvas","3.api/1.components/tres-canvas",{"title":97,"path":98,"stem":99},"\u003CTresCanvasContext />","/api/components/tres-context","3.api/1.components/tres-context",{"title":101,"path":102,"stem":103},"Tres Components","/api/components/tres-objects","3.api/1.components/tres-objects",{"title":105,"titleTemplate":106,"icon":107,"path":108,"stem":109,"children":110,"page":47},"Composables","%s · TresJS Composables","i-lucide-arrow-right-left","/api/composables","3.api/2.composables",[111,115,119,123,127],{"title":112,"path":113,"stem":114},"useTres","/api/composables/use-tres","3.api/2.composables/1.use-tres",{"title":116,"path":117,"stem":118},"useTresContext","/api/composables/use-tres-context","3.api/2.composables/2.use-tres-context",{"title":120,"path":121,"stem":122},"useLoop","/api/composables/use-loop","3.api/2.composables/3.use-loop",{"title":124,"path":125,"stem":126},"useGraph","/api/composables/use-graph","3.api/2.composables/4.use-graph",{"title":128,"path":129,"stem":130},"useLoader","/api/composables/use-loader","3.api/2.composables/5.use-loader",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":47},"Event handling","i-lucide-mouse-pointer-2","/api/events","3.api/3.events",[137],{"title":138,"path":139,"stem":140},"Pointer Events","/api/events/pointer-events","3.api/3.events/1.pointer-events",{"title":142,"icon":143,"path":144,"stem":145,"children":146,"page":47},"Utils","i-lucide-wrench","/api/utils","3.api/4.utils",[147,151],{"title":148,"path":149,"stem":150},"Type Guards","/api/utils/type-guards","3.api/4.utils/1.type-guards",{"title":152,"path":153,"stem":154},"Directives","/api/utils/directives","3.api/4.utils/2.directives",{"title":156,"icon":157,"path":158,"stem":159,"children":160,"page":47},"Advanced","i-lucide-brain-circuit","/api/advanced","3.api/5.advanced",[161,165,169],{"title":162,"path":163,"stem":164},"Scaling Performance 🚀","/api/advanced/performance","3.api/5.advanced/performance",{"title":166,"path":167,"stem":168},"Primitives","/api/advanced/primitives","3.api/5.advanced/primitives",{"title":170,"path":171,"stem":172},"WebGPU","/api/advanced/web-gpu","3.api/5.advanced/web-gpu",{"title":174,"path":175,"stem":176,"children":177},"Cookbook","/cookbook","4.cookbook",[178,181,185,189,193,197,201],{"title":179,"path":175,"stem":180},"Cookbook 🍳🧑‍🍳","4.cookbook/index",{"title":182,"path":183,"stem":184},"OrbitControls","/cookbook/orbit-controls","4.cookbook/1.orbit-controls",{"title":186,"path":187,"stem":188},"Basic Animations","/cookbook/basic-animations","4.cookbook/2.basic-animations",{"title":190,"path":191,"stem":192},"Model Animation","/cookbook/model-animation","4.cookbook/3.model-animation",{"title":194,"path":195,"stem":196},"Advanced GSAP Animations","/cookbook/advanced-gsap-animations","4.cookbook/4.advanced-gsap-animations",{"title":198,"path":199,"stem":200},"Tweakpane","/cookbook/tweakpane","4.cookbook/5.tweakpane",{"title":202,"path":203,"stem":204},"Dynamic components","/cookbook/transition-dynamic","4.cookbook/6.transition-dynamic",{"title":206,"path":207,"stem":208,"children":209},"Community","/community","5.community/1.index",[210,211],{"title":206,"path":207,"stem":208},{"title":212,"path":213,"stem":214},"Awesome Resources","/community/awesome-resources","5.community/awesome-resources",{"title":216,"path":217,"stem":218},"German Translation","/de","de",{"title":220,"path":221,"stem":222},"Spanish Translation","/es","es",{"title":224,"path":225,"stem":226},"French Translation","/fr","fr",{"title":228,"path":229,"stem":230},"Italian Translation","/it","it",{"title":232,"path":233,"stem":234},"Japanese Translation","/jp","jp",{"title":236,"path":237,"stem":238},"Chinese Translation","/zh","zh",{"id":240,"title":194,"body":241,"description":2524,"extension":2525,"links":2526,"meta":2527,"navigation":39,"path":195,"seo":2529,"stem":196,"__hash__":2530},"docs/4.cookbook/4.advanced-gsap-animations.md",{"type":242,"value":243,"toc":2517},"minimark",[244,247,251,1389,1394,1398,1401,1404,2054,2058,2061,2098,2294,2298,2301,2502,2507,2513],[245,246],"examples-advanced-gsap-animations",{},[248,249,250],"p",{},"This recipe demonstrates how to create sophisticated animations using GSAP (GreenSock Animation Platform) with TresJS for smooth, performance-optimized animations with advanced features like staggering and timeline control.",[252,253,254,259,262,320,324,331,412,425,429,432,543,547,550,810,814,821,1242,1246,1253,1382],"steps",{},[255,256,258],"h3",{"id":257},"install-gsap","Install GSAP",[248,260,261],{},"First, install GSAP as a dependency in your project:",[263,264,265,291,306],"code-group",{},[266,267,273],"pre",{"className":268,"code":269,"filename":270,"language":271,"meta":272,"style":272},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install gsap\n","npm","bash","",[274,275,276],"code",{"__ignoreMap":272},[277,278,281,284,288],"span",{"class":279,"line":280},"line",1,[277,282,270],{"class":283},"sBMFI",[277,285,287],{"class":286},"sfazB"," install",[277,289,290],{"class":286}," gsap\n",[266,292,295],{"className":268,"code":293,"filename":294,"language":271,"meta":272,"style":272},"yarn add gsap\n","yarn",[274,296,297],{"__ignoreMap":272},[277,298,299,301,304],{"class":279,"line":280},[277,300,294],{"class":283},[277,302,303],{"class":286}," add",[277,305,290],{"class":286},[266,307,310],{"className":268,"code":308,"filename":309,"language":271,"meta":272,"style":272},"pnpm install gsap\n","pnpm",[274,311,312],{"__ignoreMap":272},[277,313,314,316,318],{"class":279,"line":280},[277,315,309],{"class":283},[277,317,287],{"class":286},[277,319,290],{"class":286},[255,321,323],{"id":322},"import-required-modules","Import required modules",[248,325,326,327,330],{},"Import GSAP and the necessary Vue composables. Use ",[274,328,329],{},"shallowRef"," for better performance with Three.js objects:",[266,332,336],{"className":333,"code":334,"language":335,"meta":272,"style":272},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { shallowRef, watch } from 'vue'\nimport { OrbitControls } from '@tresjs/cientos'\nimport gsap from 'gsap'\n","ts",[274,337,338,373,394],{"__ignoreMap":272},[277,339,340,344,348,352,355,358,361,364,367,370],{"class":279,"line":280},[277,341,343],{"class":342},"s7zQu","import",[277,345,347],{"class":346},"sMK4o"," {",[277,349,351],{"class":350},"sTEyZ"," shallowRef",[277,353,354],{"class":346},",",[277,356,357],{"class":350}," watch",[277,359,360],{"class":346}," }",[277,362,363],{"class":342}," from",[277,365,366],{"class":346}," '",[277,368,369],{"class":286},"vue",[277,371,372],{"class":346},"'\n",[277,374,376,378,380,383,385,387,389,392],{"class":279,"line":375},2,[277,377,343],{"class":342},[277,379,347],{"class":346},[277,381,382],{"class":350}," OrbitControls",[277,384,360],{"class":346},[277,386,363],{"class":342},[277,388,366],{"class":346},[277,390,391],{"class":286},"@tresjs/cientos",[277,393,372],{"class":346},[277,395,397,399,402,405,407,410],{"class":279,"line":396},3,[277,398,343],{"class":342},[277,400,401],{"class":350}," gsap ",[277,403,404],{"class":342},"from",[277,406,366],{"class":346},[277,408,409],{"class":286},"gsap",[277,411,372],{"class":346},[413,414,415],"tip",{},[248,416,417,418,420,421,424],{},"Use ",[274,419,329],{}," instead of ",[274,422,423],{},"ref"," to avoid unnecessary reactivity on Three.js objects, which improves performance.",[255,426,428],{"id":427},"create-multiple-objects-to-animate","Create multiple objects to animate",[248,430,431],{},"Set up an array of positions for multiple boxes that will be animated with stagger effects:",[266,433,435],{"className":333,"code":434,"language":335,"meta":272,"style":272},"const boxesRef = shallowRef()\nconst zs = []\nfor (let z = -4.5; z \u003C= 4.5; z++) {\n  zs.push(z)\n}\n",[274,436,437,455,467,515,537],{"__ignoreMap":272},[277,438,439,443,446,449,452],{"class":279,"line":280},[277,440,442],{"class":441},"spNyl","const",[277,444,445],{"class":350}," boxesRef ",[277,447,448],{"class":346},"=",[277,450,351],{"class":451},"s2Zo4",[277,453,454],{"class":350},"()\n",[277,456,457,459,462,464],{"class":279,"line":375},[277,458,442],{"class":441},[277,460,461],{"class":350}," zs ",[277,463,448],{"class":346},[277,465,466],{"class":350}," []\n",[277,468,469,472,475,478,481,483,486,490,493,495,498,501,503,506,509,512],{"class":279,"line":396},[277,470,471],{"class":342},"for",[277,473,474],{"class":350}," (",[277,476,477],{"class":441},"let",[277,479,480],{"class":350}," z ",[277,482,448],{"class":346},[277,484,485],{"class":346}," -",[277,487,489],{"class":488},"sbssI","4.5",[277,491,492],{"class":346},";",[277,494,480],{"class":350},[277,496,497],{"class":346},"\u003C=",[277,499,500],{"class":488}," 4.5",[277,502,492],{"class":346},[277,504,505],{"class":350}," z",[277,507,508],{"class":346},"++",[277,510,511],{"class":350},") ",[277,513,514],{"class":346},"{\n",[277,516,518,521,524,527,531,534],{"class":279,"line":517},4,[277,519,520],{"class":350},"  zs",[277,522,523],{"class":346},".",[277,525,526],{"class":451},"push",[277,528,530],{"class":529},"swJcz","(",[277,532,533],{"class":350},"z",[277,535,536],{"class":529},")\n",[277,538,540],{"class":279,"line":539},5,[277,541,542],{"class":346},"}\n",[255,544,546],{"id":545},"set-up-the-scene-structure","Set up the scene structure",[248,548,549],{},"Create a group of meshes that will be animated together:",[266,551,554],{"className":552,"code":553,"language":369,"meta":272,"style":272},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CTresPerspectiveCamera :position=\"[-15, 10, 15]\" />\n  \u003COrbitControls />\n  \u003CTresGroup ref=\"boxesRef\">\n    \u003CTresMesh v-for=\"(z, i) of zs\" :key=\"i\" :position=\"[0, 0.5, z]\">\n      \u003CTresBoxGeometry />\n      \u003CTresMeshNormalMaterial />\n    \u003C/TresMesh>\n  \u003C/TresGroup>\n  \u003CTresGridHelper :args=\"[10, 10, 0x444444, 'teal']\" />\n\u003C/template>\n",[274,555,556,567,610,618,639,713,724,734,744,754,800],{"__ignoreMap":272},[277,557,558,561,564],{"class":279,"line":280},[277,559,560],{"class":346},"\u003C",[277,562,563],{"class":529},"template",[277,565,566],{"class":346},">\n",[277,568,569,572,575,578,581,583,586,589,592,595,598,600,602,605,607],{"class":279,"line":375},[277,570,571],{"class":346},"  \u003C",[277,573,574],{"class":529},"TresPerspectiveCamera",[277,576,577],{"class":346}," :",[277,579,580],{"class":441},"position",[277,582,448],{"class":346},[277,584,585],{"class":346},"\"",[277,587,588],{"class":346},"[-",[277,590,591],{"class":488},"15",[277,593,594],{"class":346},", ",[277,596,597],{"class":488},"10",[277,599,594],{"class":346},[277,601,591],{"class":488},[277,603,604],{"class":346},"]",[277,606,585],{"class":346},[277,608,609],{"class":346}," />\n",[277,611,612,614,616],{"class":279,"line":396},[277,613,571],{"class":346},[277,615,182],{"class":529},[277,617,609],{"class":346},[277,619,620,622,625,628,630,632,635,637],{"class":279,"line":517},[277,621,571],{"class":346},[277,623,624],{"class":529},"TresGroup",[277,626,627],{"class":441}," ref",[277,629,448],{"class":346},[277,631,585],{"class":346},[277,633,634],{"class":286},"boxesRef",[277,636,585],{"class":346},[277,638,566],{"class":346},[277,640,641,644,647,650,652,654,656,658,660,663,666,669,671,673,676,678,680,682,684,686,688,690,692,695,698,700,703,705,707,709,711],{"class":279,"line":539},[277,642,643],{"class":346},"    \u003C",[277,645,646],{"class":529},"TresMesh",[277,648,649],{"class":342}," v-for",[277,651,448],{"class":346},[277,653,585],{"class":346},[277,655,530],{"class":346},[277,657,533],{"class":350},[277,659,594],{"class":346},[277,661,662],{"class":350},"i",[277,664,665],{"class":346},") of ",[277,667,668],{"class":350},"zs",[277,670,585],{"class":346},[277,672,577],{"class":346},[277,674,675],{"class":441},"key",[277,677,448],{"class":346},[277,679,585],{"class":346},[277,681,662],{"class":350},[277,683,585],{"class":346},[277,685,577],{"class":346},[277,687,580],{"class":441},[277,689,448],{"class":346},[277,691,585],{"class":346},[277,693,694],{"class":346},"[",[277,696,697],{"class":488},"0",[277,699,594],{"class":346},[277,701,702],{"class":488},"0.5",[277,704,594],{"class":346},[277,706,533],{"class":350},[277,708,604],{"class":346},[277,710,585],{"class":346},[277,712,566],{"class":346},[277,714,716,719,722],{"class":279,"line":715},6,[277,717,718],{"class":346},"      \u003C",[277,720,721],{"class":529},"TresBoxGeometry",[277,723,609],{"class":346},[277,725,727,729,732],{"class":279,"line":726},7,[277,728,718],{"class":346},[277,730,731],{"class":529},"TresMeshNormalMaterial",[277,733,609],{"class":346},[277,735,737,740,742],{"class":279,"line":736},8,[277,738,739],{"class":346},"    \u003C/",[277,741,646],{"class":529},[277,743,566],{"class":346},[277,745,747,750,752],{"class":279,"line":746},9,[277,748,749],{"class":346},"  \u003C/",[277,751,624],{"class":529},[277,753,566],{"class":346},[277,755,757,759,762,764,767,769,771,773,775,777,779,781,784,786,789,792,794,796,798],{"class":279,"line":756},10,[277,758,571],{"class":346},[277,760,761],{"class":529},"TresGridHelper",[277,763,577],{"class":346},[277,765,766],{"class":441},"args",[277,768,448],{"class":346},[277,770,585],{"class":346},[277,772,694],{"class":346},[277,774,597],{"class":488},[277,776,594],{"class":346},[277,778,597],{"class":488},[277,780,594],{"class":346},[277,782,783],{"class":488},"0x444444",[277,785,594],{"class":346},[277,787,788],{"class":346},"'",[277,790,791],{"class":286},"teal",[277,793,788],{"class":346},[277,795,604],{"class":346},[277,797,585],{"class":346},[277,799,609],{"class":346},[277,801,803,806,808],{"class":279,"line":802},11,[277,804,805],{"class":346},"\u003C/",[277,807,563],{"class":529},[277,809,566],{"class":346},[255,811,813],{"id":812},"create-the-gsap-staggered-animation","Create the GSAP staggered animation",[248,815,816,817,820],{},"Use Vue's ",[274,818,819],{},"watch"," to set up the animation when the template ref is available:",[266,822,824],{"className":333,"code":823,"language":335,"meta":272,"style":272},"watch(boxesRef, () => {\n  if (!boxesRef.value) return\n\n  // Get positions and rotations for all boxes\n  const positions = Array.from(boxesRef.value.children).map(\n    (child) => child.position\n  )\n  const rotations = Array.from(boxesRef.value.children).map(\n    (child) => child.rotation\n  )\n\n  const animProperties = {\n    ease: 'power1.inOut',\n    duration: 1,\n    stagger: {\n      each: 0.25,\n      repeat: -1,\n      yoyo: true,\n    },\n  }\n\n  // Animate positions\n  gsap.to(positions, {\n    y: 2.5,\n    ...animProperties,\n  })\n\n  // Animate rotations\n  gsap.to(rotations, {\n    x: 2,\n    ...animProperties,\n  })\n})\n",[274,825,826,844,866,871,877,919,940,945,980,997,1001,1005,1017,1036,1049,1059,1072,1087,1101,1107,1113,1118,1124,1144,1157,1168,1176,1181,1187,1205,1218,1227,1234],{"__ignoreMap":272},[277,827,828,830,833,835,838,841],{"class":279,"line":280},[277,829,819],{"class":451},[277,831,832],{"class":350},"(boxesRef",[277,834,354],{"class":346},[277,836,837],{"class":346}," ()",[277,839,840],{"class":441}," =>",[277,842,843],{"class":346}," {\n",[277,845,846,849,851,854,856,858,861,863],{"class":279,"line":375},[277,847,848],{"class":342},"  if",[277,850,474],{"class":529},[277,852,853],{"class":346},"!",[277,855,634],{"class":350},[277,857,523],{"class":346},[277,859,860],{"class":350},"value",[277,862,511],{"class":529},[277,864,865],{"class":342},"return\n",[277,867,868],{"class":279,"line":396},[277,869,870],{"emptyLinePlaceholder":39},"\n",[277,872,873],{"class":279,"line":517},[277,874,876],{"class":875},"sHwdD","  // Get positions and rotations for all boxes\n",[277,878,879,882,885,888,891,893,895,897,899,901,903,905,908,911,913,916],{"class":279,"line":539},[277,880,881],{"class":441},"  const",[277,883,884],{"class":350}," positions",[277,886,887],{"class":346}," =",[277,889,890],{"class":350}," Array",[277,892,523],{"class":346},[277,894,404],{"class":451},[277,896,530],{"class":529},[277,898,634],{"class":350},[277,900,523],{"class":346},[277,902,860],{"class":350},[277,904,523],{"class":346},[277,906,907],{"class":350},"children",[277,909,910],{"class":529},")",[277,912,523],{"class":346},[277,914,915],{"class":451},"map",[277,917,918],{"class":529},"(\n",[277,920,921,924,928,930,932,935,937],{"class":279,"line":715},[277,922,923],{"class":346},"    (",[277,925,927],{"class":926},"sHdIc","child",[277,929,910],{"class":346},[277,931,840],{"class":441},[277,933,934],{"class":350}," child",[277,936,523],{"class":346},[277,938,939],{"class":350},"position\n",[277,941,942],{"class":279,"line":726},[277,943,944],{"class":529},"  )\n",[277,946,947,949,952,954,956,958,960,962,964,966,968,970,972,974,976,978],{"class":279,"line":736},[277,948,881],{"class":441},[277,950,951],{"class":350}," rotations",[277,953,887],{"class":346},[277,955,890],{"class":350},[277,957,523],{"class":346},[277,959,404],{"class":451},[277,961,530],{"class":529},[277,963,634],{"class":350},[277,965,523],{"class":346},[277,967,860],{"class":350},[277,969,523],{"class":346},[277,971,907],{"class":350},[277,973,910],{"class":529},[277,975,523],{"class":346},[277,977,915],{"class":451},[277,979,918],{"class":529},[277,981,982,984,986,988,990,992,994],{"class":279,"line":746},[277,983,923],{"class":346},[277,985,927],{"class":926},[277,987,910],{"class":346},[277,989,840],{"class":441},[277,991,934],{"class":350},[277,993,523],{"class":346},[277,995,996],{"class":350},"rotation\n",[277,998,999],{"class":279,"line":756},[277,1000,944],{"class":529},[277,1002,1003],{"class":279,"line":802},[277,1004,870],{"emptyLinePlaceholder":39},[277,1006,1008,1010,1013,1015],{"class":279,"line":1007},12,[277,1009,881],{"class":441},[277,1011,1012],{"class":350}," animProperties",[277,1014,887],{"class":346},[277,1016,843],{"class":346},[277,1018,1020,1023,1026,1028,1031,1033],{"class":279,"line":1019},13,[277,1021,1022],{"class":529},"    ease",[277,1024,1025],{"class":346},":",[277,1027,366],{"class":346},[277,1029,1030],{"class":286},"power1.inOut",[277,1032,788],{"class":346},[277,1034,1035],{"class":346},",\n",[277,1037,1039,1042,1044,1047],{"class":279,"line":1038},14,[277,1040,1041],{"class":529},"    duration",[277,1043,1025],{"class":346},[277,1045,1046],{"class":488}," 1",[277,1048,1035],{"class":346},[277,1050,1052,1055,1057],{"class":279,"line":1051},15,[277,1053,1054],{"class":529},"    stagger",[277,1056,1025],{"class":346},[277,1058,843],{"class":346},[277,1060,1062,1065,1067,1070],{"class":279,"line":1061},16,[277,1063,1064],{"class":529},"      each",[277,1066,1025],{"class":346},[277,1068,1069],{"class":488}," 0.25",[277,1071,1035],{"class":346},[277,1073,1075,1078,1080,1082,1085],{"class":279,"line":1074},17,[277,1076,1077],{"class":529},"      repeat",[277,1079,1025],{"class":346},[277,1081,485],{"class":346},[277,1083,1084],{"class":488},"1",[277,1086,1035],{"class":346},[277,1088,1090,1093,1095,1099],{"class":279,"line":1089},18,[277,1091,1092],{"class":529},"      yoyo",[277,1094,1025],{"class":346},[277,1096,1098],{"class":1097},"sfNiH"," true",[277,1100,1035],{"class":346},[277,1102,1104],{"class":279,"line":1103},19,[277,1105,1106],{"class":346},"    },\n",[277,1108,1110],{"class":279,"line":1109},20,[277,1111,1112],{"class":346},"  }\n",[277,1114,1116],{"class":279,"line":1115},21,[277,1117,870],{"emptyLinePlaceholder":39},[277,1119,1121],{"class":279,"line":1120},22,[277,1122,1123],{"class":875},"  // Animate positions\n",[277,1125,1127,1130,1132,1135,1137,1140,1142],{"class":279,"line":1126},23,[277,1128,1129],{"class":350},"  gsap",[277,1131,523],{"class":346},[277,1133,1134],{"class":451},"to",[277,1136,530],{"class":529},[277,1138,1139],{"class":350},"positions",[277,1141,354],{"class":346},[277,1143,843],{"class":346},[277,1145,1147,1150,1152,1155],{"class":279,"line":1146},24,[277,1148,1149],{"class":529},"    y",[277,1151,1025],{"class":346},[277,1153,1154],{"class":488}," 2.5",[277,1156,1035],{"class":346},[277,1158,1160,1163,1166],{"class":279,"line":1159},25,[277,1161,1162],{"class":346},"    ...",[277,1164,1165],{"class":350},"animProperties",[277,1167,1035],{"class":346},[277,1169,1171,1174],{"class":279,"line":1170},26,[277,1172,1173],{"class":346},"  }",[277,1175,536],{"class":529},[277,1177,1179],{"class":279,"line":1178},27,[277,1180,870],{"emptyLinePlaceholder":39},[277,1182,1184],{"class":279,"line":1183},28,[277,1185,1186],{"class":875},"  // Animate rotations\n",[277,1188,1190,1192,1194,1196,1198,1201,1203],{"class":279,"line":1189},29,[277,1191,1129],{"class":350},[277,1193,523],{"class":346},[277,1195,1134],{"class":451},[277,1197,530],{"class":529},[277,1199,1200],{"class":350},"rotations",[277,1202,354],{"class":346},[277,1204,843],{"class":346},[277,1206,1208,1211,1213,1216],{"class":279,"line":1207},30,[277,1209,1210],{"class":529},"    x",[277,1212,1025],{"class":346},[277,1214,1215],{"class":488}," 2",[277,1217,1035],{"class":346},[277,1219,1221,1223,1225],{"class":279,"line":1220},31,[277,1222,1162],{"class":346},[277,1224,1165],{"class":350},[277,1226,1035],{"class":346},[277,1228,1230,1232],{"class":279,"line":1229},32,[277,1231,1173],{"class":346},[277,1233,536],{"class":529},[277,1235,1237,1240],{"class":279,"line":1236},33,[277,1238,1239],{"class":346},"}",[277,1241,536],{"class":350},[255,1243,1245],{"id":1244},"understanding-gsap-stagger-options","Understanding GSAP Stagger Options",[248,1247,1248,1249,1252],{},"The ",[274,1250,1251],{},"stagger"," property provides powerful control over timing:",[266,1254,1256],{"className":333,"code":1255,"language":335,"meta":272,"style":272},"const animProperties = {\n  ease: 'power1.inOut',     // Easing function\n  duration: 1,              // Animation duration in seconds\n  stagger: {\n    each: 0.25,            // Delay between each object (0.25s)\n    repeat: -1,            // Infinite repeat (-1)\n    yoyo: true,            // Reverse on alternate cycles\n    from: 'start',         // Animation direction (start, center, end)\n  },\n}\n",[274,1257,1258,1269,1287,1301,1310,1324,1340,1354,1373,1378],{"__ignoreMap":272},[277,1259,1260,1262,1265,1267],{"class":279,"line":280},[277,1261,442],{"class":441},[277,1263,1264],{"class":350}," animProperties ",[277,1266,448],{"class":346},[277,1268,843],{"class":346},[277,1270,1271,1274,1276,1278,1280,1282,1284],{"class":279,"line":375},[277,1272,1273],{"class":529},"  ease",[277,1275,1025],{"class":346},[277,1277,366],{"class":346},[277,1279,1030],{"class":286},[277,1281,788],{"class":346},[277,1283,354],{"class":346},[277,1285,1286],{"class":875},"     // Easing function\n",[277,1288,1289,1292,1294,1296,1298],{"class":279,"line":396},[277,1290,1291],{"class":529},"  duration",[277,1293,1025],{"class":346},[277,1295,1046],{"class":488},[277,1297,354],{"class":346},[277,1299,1300],{"class":875},"              // Animation duration in seconds\n",[277,1302,1303,1306,1308],{"class":279,"line":517},[277,1304,1305],{"class":529},"  stagger",[277,1307,1025],{"class":346},[277,1309,843],{"class":346},[277,1311,1312,1315,1317,1319,1321],{"class":279,"line":539},[277,1313,1314],{"class":529},"    each",[277,1316,1025],{"class":346},[277,1318,1069],{"class":488},[277,1320,354],{"class":346},[277,1322,1323],{"class":875},"            // Delay between each object (0.25s)\n",[277,1325,1326,1329,1331,1333,1335,1337],{"class":279,"line":715},[277,1327,1328],{"class":529},"    repeat",[277,1330,1025],{"class":346},[277,1332,485],{"class":346},[277,1334,1084],{"class":488},[277,1336,354],{"class":346},[277,1338,1339],{"class":875},"            // Infinite repeat (-1)\n",[277,1341,1342,1345,1347,1349,1351],{"class":279,"line":726},[277,1343,1344],{"class":529},"    yoyo",[277,1346,1025],{"class":346},[277,1348,1098],{"class":1097},[277,1350,354],{"class":346},[277,1352,1353],{"class":875},"            // Reverse on alternate cycles\n",[277,1355,1356,1359,1361,1363,1366,1368,1370],{"class":279,"line":736},[277,1357,1358],{"class":529},"    from",[277,1360,1025],{"class":346},[277,1362,366],{"class":346},[277,1364,1365],{"class":286},"start",[277,1367,788],{"class":346},[277,1369,354],{"class":346},[277,1371,1372],{"class":875},"         // Animation direction (start, center, end)\n",[277,1374,1375],{"class":279,"line":746},[277,1376,1377],{"class":346},"  },\n",[277,1379,1380],{"class":279,"line":756},[277,1381,542],{"class":346},[1383,1384,1386],"read-more",{"to":1385},"https://gsap.com/docs/v3/Staggers/",[248,1387,1388],{},"Learn more about GSAP stagger options and configurations.",[1390,1391,1393],"h2",{"id":1392},"advanced-techniques","Advanced Techniques",[255,1395,1397],{"id":1396},"timeline-control","Timeline Control",[1399,1400],"examples-advanced-gsap-timeline",{},[248,1402,1403],{},"For more complex sequences, use GSAP timelines to coordinate multiple animations:",[266,1405,1408],{"className":552,"code":1406,"filename":1407,"language":369,"meta":272,"style":272},"\u003Cscript setup lang=\"ts\">\nimport { shallowRef, watch, onMounted } from 'vue'\nimport gsap from 'gsap'\n\nconst groupRef = shallowRef()\nconst timeline = gsap.timeline({ paused: true })\n\nwatch(groupRef, () => {\n  if (!groupRef.value) return\n\n  const children = Array.from(groupRef.value.children)\n\n  // Clear existing timeline\n  timeline.clear()\n\n  // Add multiple animations to timeline\n  timeline\n    .to(children.map(child => child.position), {\n      y: 3,\n      duration: 1,\n      ease: 'back.out(1.7)',\n      stagger: 0.1\n    })\n    .to(children.map(child => child.rotation), {\n      y: Math.PI * 2,\n      duration: 2,\n      ease: 'power2.inOut',\n      stagger: 0.1\n    }, '-=0.5') // Start 0.5s before previous animation ends\n    .to(children.map(child => child.scale), {\n      x: 1.5,\n      y: 1.5,\n      z: 1.5,\n      duration: 0.5,\n      ease: 'elastic.out(1, 0.3)',\n      stagger: 0.05\n    })\n})\n\n// Control functions\nconst playAnimation = () => timeline.play()\nconst pauseAnimation = () => timeline.pause()\nconst reverseAnimation = () => timeline.reverse()\nconst restartAnimation = () => timeline.restart()\n\u003C/script>\n","TimelineAnimation.vue",[274,1409,1410,1433,1460,1474,1478,1491,1524,1528,1543,1562,1566,1595,1599,1604,1616,1620,1625,1630,1663,1675,1686,1702,1712,1719,1752,1773,1783,1798,1806,1823,1856,1868,1878,1889,1901,1917,1927,1934,1941,1946,1952,1976,1999,2022,2045],{"__ignoreMap":272},[277,1411,1412,1414,1417,1420,1423,1425,1427,1429,1431],{"class":279,"line":280},[277,1413,560],{"class":346},[277,1415,1416],{"class":529},"script",[277,1418,1419],{"class":441}," setup",[277,1421,1422],{"class":441}," lang",[277,1424,448],{"class":346},[277,1426,585],{"class":346},[277,1428,335],{"class":286},[277,1430,585],{"class":346},[277,1432,566],{"class":346},[277,1434,1435,1437,1439,1441,1443,1445,1447,1450,1452,1454,1456,1458],{"class":279,"line":375},[277,1436,343],{"class":342},[277,1438,347],{"class":346},[277,1440,351],{"class":350},[277,1442,354],{"class":346},[277,1444,357],{"class":350},[277,1446,354],{"class":346},[277,1448,1449],{"class":350}," onMounted",[277,1451,360],{"class":346},[277,1453,363],{"class":342},[277,1455,366],{"class":346},[277,1457,369],{"class":286},[277,1459,372],{"class":346},[277,1461,1462,1464,1466,1468,1470,1472],{"class":279,"line":396},[277,1463,343],{"class":342},[277,1465,401],{"class":350},[277,1467,404],{"class":342},[277,1469,366],{"class":346},[277,1471,409],{"class":286},[277,1473,372],{"class":346},[277,1475,1476],{"class":279,"line":517},[277,1477,870],{"emptyLinePlaceholder":39},[277,1479,1480,1482,1485,1487,1489],{"class":279,"line":539},[277,1481,442],{"class":441},[277,1483,1484],{"class":350}," groupRef ",[277,1486,448],{"class":346},[277,1488,351],{"class":451},[277,1490,454],{"class":350},[277,1492,1493,1495,1498,1500,1503,1505,1508,1510,1513,1516,1518,1520,1522],{"class":279,"line":715},[277,1494,442],{"class":441},[277,1496,1497],{"class":350}," timeline ",[277,1499,448],{"class":346},[277,1501,1502],{"class":350}," gsap",[277,1504,523],{"class":346},[277,1506,1507],{"class":451},"timeline",[277,1509,530],{"class":350},[277,1511,1512],{"class":346},"{",[277,1514,1515],{"class":529}," paused",[277,1517,1025],{"class":346},[277,1519,1098],{"class":1097},[277,1521,360],{"class":346},[277,1523,536],{"class":350},[277,1525,1526],{"class":279,"line":726},[277,1527,870],{"emptyLinePlaceholder":39},[277,1529,1530,1532,1535,1537,1539,1541],{"class":279,"line":736},[277,1531,819],{"class":451},[277,1533,1534],{"class":350},"(groupRef",[277,1536,354],{"class":346},[277,1538,837],{"class":346},[277,1540,840],{"class":441},[277,1542,843],{"class":346},[277,1544,1545,1547,1549,1551,1554,1556,1558,1560],{"class":279,"line":746},[277,1546,848],{"class":342},[277,1548,474],{"class":529},[277,1550,853],{"class":346},[277,1552,1553],{"class":350},"groupRef",[277,1555,523],{"class":346},[277,1557,860],{"class":350},[277,1559,511],{"class":529},[277,1561,865],{"class":342},[277,1563,1564],{"class":279,"line":756},[277,1565,870],{"emptyLinePlaceholder":39},[277,1567,1568,1570,1573,1575,1577,1579,1581,1583,1585,1587,1589,1591,1593],{"class":279,"line":802},[277,1569,881],{"class":441},[277,1571,1572],{"class":350}," children",[277,1574,887],{"class":346},[277,1576,890],{"class":350},[277,1578,523],{"class":346},[277,1580,404],{"class":451},[277,1582,530],{"class":529},[277,1584,1553],{"class":350},[277,1586,523],{"class":346},[277,1588,860],{"class":350},[277,1590,523],{"class":346},[277,1592,907],{"class":350},[277,1594,536],{"class":529},[277,1596,1597],{"class":279,"line":1007},[277,1598,870],{"emptyLinePlaceholder":39},[277,1600,1601],{"class":279,"line":1019},[277,1602,1603],{"class":875},"  // Clear existing timeline\n",[277,1605,1606,1609,1611,1614],{"class":279,"line":1038},[277,1607,1608],{"class":350},"  timeline",[277,1610,523],{"class":346},[277,1612,1613],{"class":451},"clear",[277,1615,454],{"class":529},[277,1617,1618],{"class":279,"line":1051},[277,1619,870],{"emptyLinePlaceholder":39},[277,1621,1622],{"class":279,"line":1061},[277,1623,1624],{"class":875},"  // Add multiple animations to timeline\n",[277,1626,1627],{"class":279,"line":1074},[277,1628,1629],{"class":350},"  timeline\n",[277,1631,1632,1635,1637,1639,1641,1643,1645,1647,1649,1651,1653,1655,1657,1659,1661],{"class":279,"line":1089},[277,1633,1634],{"class":346},"    .",[277,1636,1134],{"class":451},[277,1638,530],{"class":529},[277,1640,907],{"class":350},[277,1642,523],{"class":346},[277,1644,915],{"class":451},[277,1646,530],{"class":529},[277,1648,927],{"class":926},[277,1650,840],{"class":441},[277,1652,934],{"class":350},[277,1654,523],{"class":346},[277,1656,580],{"class":350},[277,1658,910],{"class":529},[277,1660,354],{"class":346},[277,1662,843],{"class":346},[277,1664,1665,1668,1670,1673],{"class":279,"line":1103},[277,1666,1667],{"class":529},"      y",[277,1669,1025],{"class":346},[277,1671,1672],{"class":488}," 3",[277,1674,1035],{"class":346},[277,1676,1677,1680,1682,1684],{"class":279,"line":1109},[277,1678,1679],{"class":529},"      duration",[277,1681,1025],{"class":346},[277,1683,1046],{"class":488},[277,1685,1035],{"class":346},[277,1687,1688,1691,1693,1695,1698,1700],{"class":279,"line":1115},[277,1689,1690],{"class":529},"      ease",[277,1692,1025],{"class":346},[277,1694,366],{"class":346},[277,1696,1697],{"class":286},"back.out(1.7)",[277,1699,788],{"class":346},[277,1701,1035],{"class":346},[277,1703,1704,1707,1709],{"class":279,"line":1120},[277,1705,1706],{"class":529},"      stagger",[277,1708,1025],{"class":346},[277,1710,1711],{"class":488}," 0.1\n",[277,1713,1714,1717],{"class":279,"line":1126},[277,1715,1716],{"class":346},"    }",[277,1718,536],{"class":529},[277,1720,1721,1723,1725,1727,1729,1731,1733,1735,1737,1739,1741,1743,1746,1748,1750],{"class":279,"line":1146},[277,1722,1634],{"class":346},[277,1724,1134],{"class":451},[277,1726,530],{"class":529},[277,1728,907],{"class":350},[277,1730,523],{"class":346},[277,1732,915],{"class":451},[277,1734,530],{"class":529},[277,1736,927],{"class":926},[277,1738,840],{"class":441},[277,1740,934],{"class":350},[277,1742,523],{"class":346},[277,1744,1745],{"class":350},"rotation",[277,1747,910],{"class":529},[277,1749,354],{"class":346},[277,1751,843],{"class":346},[277,1753,1754,1756,1758,1761,1763,1766,1769,1771],{"class":279,"line":1159},[277,1755,1667],{"class":529},[277,1757,1025],{"class":346},[277,1759,1760],{"class":350}," Math",[277,1762,523],{"class":346},[277,1764,1765],{"class":350},"PI",[277,1767,1768],{"class":346}," *",[277,1770,1215],{"class":488},[277,1772,1035],{"class":346},[277,1774,1775,1777,1779,1781],{"class":279,"line":1170},[277,1776,1679],{"class":529},[277,1778,1025],{"class":346},[277,1780,1215],{"class":488},[277,1782,1035],{"class":346},[277,1784,1785,1787,1789,1791,1794,1796],{"class":279,"line":1178},[277,1786,1690],{"class":529},[277,1788,1025],{"class":346},[277,1790,366],{"class":346},[277,1792,1793],{"class":286},"power2.inOut",[277,1795,788],{"class":346},[277,1797,1035],{"class":346},[277,1799,1800,1802,1804],{"class":279,"line":1183},[277,1801,1706],{"class":529},[277,1803,1025],{"class":346},[277,1805,1711],{"class":488},[277,1807,1808,1811,1813,1816,1818,1820],{"class":279,"line":1189},[277,1809,1810],{"class":346},"    },",[277,1812,366],{"class":346},[277,1814,1815],{"class":286},"-=0.5",[277,1817,788],{"class":346},[277,1819,511],{"class":529},[277,1821,1822],{"class":875},"// Start 0.5s before previous animation ends\n",[277,1824,1825,1827,1829,1831,1833,1835,1837,1839,1841,1843,1845,1847,1850,1852,1854],{"class":279,"line":1207},[277,1826,1634],{"class":346},[277,1828,1134],{"class":451},[277,1830,530],{"class":529},[277,1832,907],{"class":350},[277,1834,523],{"class":346},[277,1836,915],{"class":451},[277,1838,530],{"class":529},[277,1840,927],{"class":926},[277,1842,840],{"class":441},[277,1844,934],{"class":350},[277,1846,523],{"class":346},[277,1848,1849],{"class":350},"scale",[277,1851,910],{"class":529},[277,1853,354],{"class":346},[277,1855,843],{"class":346},[277,1857,1858,1861,1863,1866],{"class":279,"line":1220},[277,1859,1860],{"class":529},"      x",[277,1862,1025],{"class":346},[277,1864,1865],{"class":488}," 1.5",[277,1867,1035],{"class":346},[277,1869,1870,1872,1874,1876],{"class":279,"line":1229},[277,1871,1667],{"class":529},[277,1873,1025],{"class":346},[277,1875,1865],{"class":488},[277,1877,1035],{"class":346},[277,1879,1880,1883,1885,1887],{"class":279,"line":1236},[277,1881,1882],{"class":529},"      z",[277,1884,1025],{"class":346},[277,1886,1865],{"class":488},[277,1888,1035],{"class":346},[277,1890,1892,1894,1896,1899],{"class":279,"line":1891},34,[277,1893,1679],{"class":529},[277,1895,1025],{"class":346},[277,1897,1898],{"class":488}," 0.5",[277,1900,1035],{"class":346},[277,1902,1904,1906,1908,1910,1913,1915],{"class":279,"line":1903},35,[277,1905,1690],{"class":529},[277,1907,1025],{"class":346},[277,1909,366],{"class":346},[277,1911,1912],{"class":286},"elastic.out(1, 0.3)",[277,1914,788],{"class":346},[277,1916,1035],{"class":346},[277,1918,1920,1922,1924],{"class":279,"line":1919},36,[277,1921,1706],{"class":529},[277,1923,1025],{"class":346},[277,1925,1926],{"class":488}," 0.05\n",[277,1928,1930,1932],{"class":279,"line":1929},37,[277,1931,1716],{"class":346},[277,1933,536],{"class":529},[277,1935,1937,1939],{"class":279,"line":1936},38,[277,1938,1239],{"class":346},[277,1940,536],{"class":350},[277,1942,1944],{"class":279,"line":1943},39,[277,1945,870],{"emptyLinePlaceholder":39},[277,1947,1949],{"class":279,"line":1948},40,[277,1950,1951],{"class":875},"// Control functions\n",[277,1953,1955,1957,1960,1962,1964,1966,1969,1971,1974],{"class":279,"line":1954},41,[277,1956,442],{"class":441},[277,1958,1959],{"class":350}," playAnimation ",[277,1961,448],{"class":346},[277,1963,837],{"class":346},[277,1965,840],{"class":441},[277,1967,1968],{"class":350}," timeline",[277,1970,523],{"class":346},[277,1972,1973],{"class":451},"play",[277,1975,454],{"class":350},[277,1977,1979,1981,1984,1986,1988,1990,1992,1994,1997],{"class":279,"line":1978},42,[277,1980,442],{"class":441},[277,1982,1983],{"class":350}," pauseAnimation ",[277,1985,448],{"class":346},[277,1987,837],{"class":346},[277,1989,840],{"class":441},[277,1991,1968],{"class":350},[277,1993,523],{"class":346},[277,1995,1996],{"class":451},"pause",[277,1998,454],{"class":350},[277,2000,2002,2004,2007,2009,2011,2013,2015,2017,2020],{"class":279,"line":2001},43,[277,2003,442],{"class":441},[277,2005,2006],{"class":350}," reverseAnimation ",[277,2008,448],{"class":346},[277,2010,837],{"class":346},[277,2012,840],{"class":441},[277,2014,1968],{"class":350},[277,2016,523],{"class":346},[277,2018,2019],{"class":451},"reverse",[277,2021,454],{"class":350},[277,2023,2025,2027,2030,2032,2034,2036,2038,2040,2043],{"class":279,"line":2024},44,[277,2026,442],{"class":441},[277,2028,2029],{"class":350}," restartAnimation ",[277,2031,448],{"class":346},[277,2033,837],{"class":346},[277,2035,840],{"class":441},[277,2037,1968],{"class":350},[277,2039,523],{"class":346},[277,2041,2042],{"class":451},"restart",[277,2044,454],{"class":350},[277,2046,2048,2050,2052],{"class":279,"line":2047},45,[277,2049,805],{"class":346},[277,2051,1416],{"class":529},[277,2053,566],{"class":346},[255,2055,2057],{"id":2056},"performance-optimization","Performance Optimization",[248,2059,2060],{},"When animating many objects, optimize performance by:",[2062,2063,2064,2073,2079,2089],"ol",{},[2065,2066,2067,2072],"li",{},[2068,2069,417,2070],"strong",{},[274,2071,329],{}," for Three.js object references",[2065,2074,2075,2078],{},[2068,2076,2077],{},"Batch property access"," to avoid repeated DOM queries",[2065,2080,2081,2088],{},[2068,2082,2083,2084,2087],{},"Use GSAP's ",[274,2085,2086],{},"set()"," method"," for immediate property changes",[2065,2090,2091,2094,2095],{},[2068,2092,2093],{},"Leverage hardware acceleration"," with ",[274,2096,2097],{},"force3D: true",[266,2099,2101],{"className":333,"code":2100,"language":335,"meta":272,"style":272},"// Optimized animation setup\nconst optimizedAnimation = () => {\n  // Get all properties at once\n  const meshes = Array.from(boxesRef.value.children)\n  const positions = meshes.map(mesh => mesh.position)\n  const rotations = meshes.map(mesh => mesh.rotation)\n\n  // Use force3D for hardware acceleration\n  gsap.to(positions, {\n    y: 2,\n    duration: 1,\n    force3D: true,\n    ease: 'power2.out'\n  })\n}\n",[274,2102,2103,2108,2123,2128,2157,2187,2215,2219,2224,2240,2250,2260,2271,2284,2290],{"__ignoreMap":272},[277,2104,2105],{"class":279,"line":280},[277,2106,2107],{"class":875},"// Optimized animation setup\n",[277,2109,2110,2112,2115,2117,2119,2121],{"class":279,"line":375},[277,2111,442],{"class":441},[277,2113,2114],{"class":350}," optimizedAnimation ",[277,2116,448],{"class":346},[277,2118,837],{"class":346},[277,2120,840],{"class":441},[277,2122,843],{"class":346},[277,2124,2125],{"class":279,"line":396},[277,2126,2127],{"class":875},"  // Get all properties at once\n",[277,2129,2130,2132,2135,2137,2139,2141,2143,2145,2147,2149,2151,2153,2155],{"class":279,"line":517},[277,2131,881],{"class":441},[277,2133,2134],{"class":350}," meshes",[277,2136,887],{"class":346},[277,2138,890],{"class":350},[277,2140,523],{"class":346},[277,2142,404],{"class":451},[277,2144,530],{"class":529},[277,2146,634],{"class":350},[277,2148,523],{"class":346},[277,2150,860],{"class":350},[277,2152,523],{"class":346},[277,2154,907],{"class":350},[277,2156,536],{"class":529},[277,2158,2159,2161,2163,2165,2167,2169,2171,2173,2176,2178,2181,2183,2185],{"class":279,"line":539},[277,2160,881],{"class":441},[277,2162,884],{"class":350},[277,2164,887],{"class":346},[277,2166,2134],{"class":350},[277,2168,523],{"class":346},[277,2170,915],{"class":451},[277,2172,530],{"class":529},[277,2174,2175],{"class":926},"mesh",[277,2177,840],{"class":441},[277,2179,2180],{"class":350}," mesh",[277,2182,523],{"class":346},[277,2184,580],{"class":350},[277,2186,536],{"class":529},[277,2188,2189,2191,2193,2195,2197,2199,2201,2203,2205,2207,2209,2211,2213],{"class":279,"line":715},[277,2190,881],{"class":441},[277,2192,951],{"class":350},[277,2194,887],{"class":346},[277,2196,2134],{"class":350},[277,2198,523],{"class":346},[277,2200,915],{"class":451},[277,2202,530],{"class":529},[277,2204,2175],{"class":926},[277,2206,840],{"class":441},[277,2208,2180],{"class":350},[277,2210,523],{"class":346},[277,2212,1745],{"class":350},[277,2214,536],{"class":529},[277,2216,2217],{"class":279,"line":726},[277,2218,870],{"emptyLinePlaceholder":39},[277,2220,2221],{"class":279,"line":736},[277,2222,2223],{"class":875},"  // Use force3D for hardware acceleration\n",[277,2225,2226,2228,2230,2232,2234,2236,2238],{"class":279,"line":746},[277,2227,1129],{"class":350},[277,2229,523],{"class":346},[277,2231,1134],{"class":451},[277,2233,530],{"class":529},[277,2235,1139],{"class":350},[277,2237,354],{"class":346},[277,2239,843],{"class":346},[277,2241,2242,2244,2246,2248],{"class":279,"line":756},[277,2243,1149],{"class":529},[277,2245,1025],{"class":346},[277,2247,1215],{"class":488},[277,2249,1035],{"class":346},[277,2251,2252,2254,2256,2258],{"class":279,"line":802},[277,2253,1041],{"class":529},[277,2255,1025],{"class":346},[277,2257,1046],{"class":488},[277,2259,1035],{"class":346},[277,2261,2262,2265,2267,2269],{"class":279,"line":1007},[277,2263,2264],{"class":529},"    force3D",[277,2266,1025],{"class":346},[277,2268,1098],{"class":1097},[277,2270,1035],{"class":346},[277,2272,2273,2275,2277,2279,2282],{"class":279,"line":1019},[277,2274,1022],{"class":529},[277,2276,1025],{"class":346},[277,2278,366],{"class":346},[277,2280,2281],{"class":286},"power2.out",[277,2283,372],{"class":346},[277,2285,2286,2288],{"class":279,"line":1038},[277,2287,1173],{"class":346},[277,2289,536],{"class":529},[277,2291,2292],{"class":279,"line":1051},[277,2293,542],{"class":346},[255,2295,2297],{"id":2296},"animation-events","Animation Events",[248,2299,2300],{},"GSAP provides powerful callback events to sync with your application state:",[266,2302,2304],{"className":333,"code":2303,"language":335,"meta":272,"style":272},"gsap.to(positions, {\n  y: 2,\n  duration: 1,\n  stagger: 0.1,\n  onStart: () => console.log('Animation started'),\n  onComplete: () => console.log('Animation completed'),\n  onUpdate: function() {\n    // Called on every frame\n    console.log('Progress:', this.progress())\n  },\n  onRepeat: () => console.log('Animation repeated')\n})\n",[274,2305,2306,2321,2332,2342,2353,2385,2415,2430,2435,2464,2468,2496],{"__ignoreMap":272},[277,2307,2308,2310,2312,2314,2317,2319],{"class":279,"line":280},[277,2309,409],{"class":350},[277,2311,523],{"class":346},[277,2313,1134],{"class":451},[277,2315,2316],{"class":350},"(positions",[277,2318,354],{"class":346},[277,2320,843],{"class":346},[277,2322,2323,2326,2328,2330],{"class":279,"line":375},[277,2324,2325],{"class":529},"  y",[277,2327,1025],{"class":346},[277,2329,1215],{"class":488},[277,2331,1035],{"class":346},[277,2333,2334,2336,2338,2340],{"class":279,"line":396},[277,2335,1291],{"class":529},[277,2337,1025],{"class":346},[277,2339,1046],{"class":488},[277,2341,1035],{"class":346},[277,2343,2344,2346,2348,2351],{"class":279,"line":517},[277,2345,1305],{"class":529},[277,2347,1025],{"class":346},[277,2349,2350],{"class":488}," 0.1",[277,2352,1035],{"class":346},[277,2354,2355,2358,2360,2362,2364,2367,2369,2372,2374,2376,2379,2381,2383],{"class":279,"line":539},[277,2356,2357],{"class":451},"  onStart",[277,2359,1025],{"class":346},[277,2361,837],{"class":346},[277,2363,840],{"class":441},[277,2365,2366],{"class":350}," console",[277,2368,523],{"class":346},[277,2370,2371],{"class":451},"log",[277,2373,530],{"class":350},[277,2375,788],{"class":346},[277,2377,2378],{"class":286},"Animation started",[277,2380,788],{"class":346},[277,2382,910],{"class":350},[277,2384,1035],{"class":346},[277,2386,2387,2390,2392,2394,2396,2398,2400,2402,2404,2406,2409,2411,2413],{"class":279,"line":715},[277,2388,2389],{"class":451},"  onComplete",[277,2391,1025],{"class":346},[277,2393,837],{"class":346},[277,2395,840],{"class":441},[277,2397,2366],{"class":350},[277,2399,523],{"class":346},[277,2401,2371],{"class":451},[277,2403,530],{"class":350},[277,2405,788],{"class":346},[277,2407,2408],{"class":286},"Animation completed",[277,2410,788],{"class":346},[277,2412,910],{"class":350},[277,2414,1035],{"class":346},[277,2416,2417,2420,2422,2425,2428],{"class":279,"line":726},[277,2418,2419],{"class":451},"  onUpdate",[277,2421,1025],{"class":346},[277,2423,2424],{"class":441}," function",[277,2426,2427],{"class":346},"()",[277,2429,843],{"class":346},[277,2431,2432],{"class":279,"line":736},[277,2433,2434],{"class":875},"    // Called on every frame\n",[277,2436,2437,2440,2442,2444,2446,2448,2451,2453,2455,2458,2461],{"class":279,"line":746},[277,2438,2439],{"class":350},"    console",[277,2441,523],{"class":346},[277,2443,2371],{"class":451},[277,2445,530],{"class":529},[277,2447,788],{"class":346},[277,2449,2450],{"class":286},"Progress:",[277,2452,788],{"class":346},[277,2454,354],{"class":346},[277,2456,2457],{"class":346}," this.",[277,2459,2460],{"class":451},"progress",[277,2462,2463],{"class":529},"())\n",[277,2465,2466],{"class":279,"line":756},[277,2467,1377],{"class":346},[277,2469,2470,2473,2475,2477,2479,2481,2483,2485,2487,2489,2492,2494],{"class":279,"line":802},[277,2471,2472],{"class":451},"  onRepeat",[277,2474,1025],{"class":346},[277,2476,837],{"class":346},[277,2478,840],{"class":441},[277,2480,2366],{"class":350},[277,2482,523],{"class":346},[277,2484,2371],{"class":451},[277,2486,530],{"class":350},[277,2488,788],{"class":346},[277,2490,2491],{"class":286},"Animation repeated",[277,2493,788],{"class":346},[277,2495,536],{"class":350},[277,2497,2498,2500],{"class":279,"line":1007},[277,2499,1239],{"class":346},[277,2501,536],{"class":350},[413,2503,2504],{},[248,2505,2506],{},"GSAP automatically handles frame rate optimization and provides better performance than manual animations for complex sequences.",[1383,2508,2510],{"to":2509},"https://gsap.com/docs/v3/",[248,2511,2512],{},"Explore the full GSAP documentation for advanced features and techniques.",[2514,2515,2516],"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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":272,"searchDepth":280,"depth":375,"links":2518},[2519],{"id":1392,"depth":375,"text":1393,"children":2520},[2521,2522,2523],{"id":1396,"depth":396,"text":1397},{"id":2056,"depth":396,"text":2057},{"id":2296,"depth":396,"text":2297},"Learn how to create complex animations using GSAP with TresJS","md",null,{"thumbnail":2528},"/recipes/advance-animations-gsap.png",{"title":194,"description":2524},"3SsVddI0maZDZ05jTMj-So4PD9O9cwdAvNBE9yoPnIw",[2532,2534],{"title":190,"path":191,"stem":192,"description":2533,"children":-1},"Learn how to animate 3D models in TresJS",{"title":198,"path":199,"stem":200,"description":2535,"children":-1},"Learn how to integrate Tweakpane with TresJS for interactive 3D controls",1774953663781]