[{"data":1,"prerenderedAt":2466},["ShallowReactive",2],{"navigation":3,"/cookbook/advanced-gsap-animations":239,"/cookbook/advanced-gsap-animations-surround":2461},[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":2454,"extension":2455,"links":2456,"meta":2457,"navigation":39,"path":195,"seo":2459,"stem":196,"__hash__":2460},"docs/4.cookbook/4.advanced-gsap-animations.md",{"type":242,"value":243,"toc":2447},"minimark",[244,247,251,1318,1323,1327,1330,1333,1984,1988,1991,2028,2224,2228,2231,2432,2437,2443],[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,738,742,749,1171,1175,1182,1311],"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,591,599,620,665,676,686,696,706,728],{"__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,580,583,586,588],{"class":279,"line":375},[277,570,571],{"class":346},"  \u003C",[277,573,574],{"class":529},"TresPerspectiveCamera",[277,576,577],{"class":441}," :position",[277,579,448],{"class":346},[277,581,582],{"class":346},"\"",[277,584,585],{"class":286},"[-15, 10, 15]",[277,587,582],{"class":346},[277,589,590],{"class":346}," />\n",[277,592,593,595,597],{"class":279,"line":396},[277,594,571],{"class":346},[277,596,182],{"class":529},[277,598,590],{"class":346},[277,600,601,603,606,609,611,613,616,618],{"class":279,"line":517},[277,602,571],{"class":346},[277,604,605],{"class":529},"TresGroup",[277,607,608],{"class":441}," ref",[277,610,448],{"class":346},[277,612,582],{"class":346},[277,614,615],{"class":286},"boxesRef",[277,617,582],{"class":346},[277,619,566],{"class":346},[277,621,622,625,628,631,633,635,638,640,643,645,647,650,652,654,656,658,661,663],{"class":279,"line":539},[277,623,624],{"class":346},"    \u003C",[277,626,627],{"class":529},"TresMesh",[277,629,630],{"class":441}," v-for",[277,632,448],{"class":346},[277,634,582],{"class":346},[277,636,637],{"class":286},"(z, i) of zs",[277,639,582],{"class":346},[277,641,642],{"class":441}," :key",[277,644,448],{"class":346},[277,646,582],{"class":346},[277,648,649],{"class":286},"i",[277,651,582],{"class":346},[277,653,577],{"class":441},[277,655,448],{"class":346},[277,657,582],{"class":346},[277,659,660],{"class":286},"[0, 0.5, z]",[277,662,582],{"class":346},[277,664,566],{"class":346},[277,666,668,671,674],{"class":279,"line":667},6,[277,669,670],{"class":346},"      \u003C",[277,672,673],{"class":529},"TresBoxGeometry",[277,675,590],{"class":346},[277,677,679,681,684],{"class":279,"line":678},7,[277,680,670],{"class":346},[277,682,683],{"class":529},"TresMeshNormalMaterial",[277,685,590],{"class":346},[277,687,689,692,694],{"class":279,"line":688},8,[277,690,691],{"class":346},"    \u003C/",[277,693,627],{"class":529},[277,695,566],{"class":346},[277,697,699,702,704],{"class":279,"line":698},9,[277,700,701],{"class":346},"  \u003C/",[277,703,605],{"class":529},[277,705,566],{"class":346},[277,707,709,711,714,717,719,721,724,726],{"class":279,"line":708},10,[277,710,571],{"class":346},[277,712,713],{"class":529},"TresGridHelper",[277,715,716],{"class":441}," :args",[277,718,448],{"class":346},[277,720,582],{"class":346},[277,722,723],{"class":286},"[10, 10, 0x444444, 'teal']",[277,725,582],{"class":346},[277,727,590],{"class":346},[277,729,731,734,736],{"class":279,"line":730},11,[277,732,733],{"class":346},"\u003C/",[277,735,563],{"class":529},[277,737,566],{"class":346},[255,739,741],{"id":740},"create-the-gsap-staggered-animation","Create the GSAP staggered animation",[248,743,744,745,748],{},"Use Vue's ",[274,746,747],{},"watch"," to set up the animation when the template ref is available:",[266,750,752],{"className":333,"code":751,"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,753,754,772,794,799,805,847,868,873,908,925,929,933,945,965,978,988,1001,1016,1030,1036,1042,1047,1053,1073,1086,1097,1105,1110,1116,1134,1147,1156,1163],{"__ignoreMap":272},[277,755,756,758,761,763,766,769],{"class":279,"line":280},[277,757,747],{"class":451},[277,759,760],{"class":350},"(boxesRef",[277,762,354],{"class":346},[277,764,765],{"class":346}," ()",[277,767,768],{"class":441}," =>",[277,770,771],{"class":346}," {\n",[277,773,774,777,779,782,784,786,789,791],{"class":279,"line":375},[277,775,776],{"class":342},"  if",[277,778,474],{"class":529},[277,780,781],{"class":346},"!",[277,783,615],{"class":350},[277,785,523],{"class":346},[277,787,788],{"class":350},"value",[277,790,511],{"class":529},[277,792,793],{"class":342},"return\n",[277,795,796],{"class":279,"line":396},[277,797,798],{"emptyLinePlaceholder":39},"\n",[277,800,801],{"class":279,"line":517},[277,802,804],{"class":803},"sHwdD","  // Get positions and rotations for all boxes\n",[277,806,807,810,813,816,819,821,823,825,827,829,831,833,836,839,841,844],{"class":279,"line":539},[277,808,809],{"class":441},"  const",[277,811,812],{"class":350}," positions",[277,814,815],{"class":346}," =",[277,817,818],{"class":350}," Array",[277,820,523],{"class":346},[277,822,404],{"class":451},[277,824,530],{"class":529},[277,826,615],{"class":350},[277,828,523],{"class":346},[277,830,788],{"class":350},[277,832,523],{"class":346},[277,834,835],{"class":350},"children",[277,837,838],{"class":529},")",[277,840,523],{"class":346},[277,842,843],{"class":451},"map",[277,845,846],{"class":529},"(\n",[277,848,849,852,856,858,860,863,865],{"class":279,"line":667},[277,850,851],{"class":346},"    (",[277,853,855],{"class":854},"sHdIc","child",[277,857,838],{"class":346},[277,859,768],{"class":441},[277,861,862],{"class":350}," child",[277,864,523],{"class":346},[277,866,867],{"class":350},"position\n",[277,869,870],{"class":279,"line":678},[277,871,872],{"class":529},"  )\n",[277,874,875,877,880,882,884,886,888,890,892,894,896,898,900,902,904,906],{"class":279,"line":688},[277,876,809],{"class":441},[277,878,879],{"class":350}," rotations",[277,881,815],{"class":346},[277,883,818],{"class":350},[277,885,523],{"class":346},[277,887,404],{"class":451},[277,889,530],{"class":529},[277,891,615],{"class":350},[277,893,523],{"class":346},[277,895,788],{"class":350},[277,897,523],{"class":346},[277,899,835],{"class":350},[277,901,838],{"class":529},[277,903,523],{"class":346},[277,905,843],{"class":451},[277,907,846],{"class":529},[277,909,910,912,914,916,918,920,922],{"class":279,"line":698},[277,911,851],{"class":346},[277,913,855],{"class":854},[277,915,838],{"class":346},[277,917,768],{"class":441},[277,919,862],{"class":350},[277,921,523],{"class":346},[277,923,924],{"class":350},"rotation\n",[277,926,927],{"class":279,"line":708},[277,928,872],{"class":529},[277,930,931],{"class":279,"line":730},[277,932,798],{"emptyLinePlaceholder":39},[277,934,936,938,941,943],{"class":279,"line":935},12,[277,937,809],{"class":441},[277,939,940],{"class":350}," animProperties",[277,942,815],{"class":346},[277,944,771],{"class":346},[277,946,948,951,954,956,959,962],{"class":279,"line":947},13,[277,949,950],{"class":529},"    ease",[277,952,953],{"class":346},":",[277,955,366],{"class":346},[277,957,958],{"class":286},"power1.inOut",[277,960,961],{"class":346},"'",[277,963,964],{"class":346},",\n",[277,966,968,971,973,976],{"class":279,"line":967},14,[277,969,970],{"class":529},"    duration",[277,972,953],{"class":346},[277,974,975],{"class":488}," 1",[277,977,964],{"class":346},[277,979,981,984,986],{"class":279,"line":980},15,[277,982,983],{"class":529},"    stagger",[277,985,953],{"class":346},[277,987,771],{"class":346},[277,989,991,994,996,999],{"class":279,"line":990},16,[277,992,993],{"class":529},"      each",[277,995,953],{"class":346},[277,997,998],{"class":488}," 0.25",[277,1000,964],{"class":346},[277,1002,1004,1007,1009,1011,1014],{"class":279,"line":1003},17,[277,1005,1006],{"class":529},"      repeat",[277,1008,953],{"class":346},[277,1010,485],{"class":346},[277,1012,1013],{"class":488},"1",[277,1015,964],{"class":346},[277,1017,1019,1022,1024,1028],{"class":279,"line":1018},18,[277,1020,1021],{"class":529},"      yoyo",[277,1023,953],{"class":346},[277,1025,1027],{"class":1026},"sfNiH"," true",[277,1029,964],{"class":346},[277,1031,1033],{"class":279,"line":1032},19,[277,1034,1035],{"class":346},"    },\n",[277,1037,1039],{"class":279,"line":1038},20,[277,1040,1041],{"class":346},"  }\n",[277,1043,1045],{"class":279,"line":1044},21,[277,1046,798],{"emptyLinePlaceholder":39},[277,1048,1050],{"class":279,"line":1049},22,[277,1051,1052],{"class":803},"  // Animate positions\n",[277,1054,1056,1059,1061,1064,1066,1069,1071],{"class":279,"line":1055},23,[277,1057,1058],{"class":350},"  gsap",[277,1060,523],{"class":346},[277,1062,1063],{"class":451},"to",[277,1065,530],{"class":529},[277,1067,1068],{"class":350},"positions",[277,1070,354],{"class":346},[277,1072,771],{"class":346},[277,1074,1076,1079,1081,1084],{"class":279,"line":1075},24,[277,1077,1078],{"class":529},"    y",[277,1080,953],{"class":346},[277,1082,1083],{"class":488}," 2.5",[277,1085,964],{"class":346},[277,1087,1089,1092,1095],{"class":279,"line":1088},25,[277,1090,1091],{"class":346},"    ...",[277,1093,1094],{"class":350},"animProperties",[277,1096,964],{"class":346},[277,1098,1100,1103],{"class":279,"line":1099},26,[277,1101,1102],{"class":346},"  }",[277,1104,536],{"class":529},[277,1106,1108],{"class":279,"line":1107},27,[277,1109,798],{"emptyLinePlaceholder":39},[277,1111,1113],{"class":279,"line":1112},28,[277,1114,1115],{"class":803},"  // Animate rotations\n",[277,1117,1119,1121,1123,1125,1127,1130,1132],{"class":279,"line":1118},29,[277,1120,1058],{"class":350},[277,1122,523],{"class":346},[277,1124,1063],{"class":451},[277,1126,530],{"class":529},[277,1128,1129],{"class":350},"rotations",[277,1131,354],{"class":346},[277,1133,771],{"class":346},[277,1135,1137,1140,1142,1145],{"class":279,"line":1136},30,[277,1138,1139],{"class":529},"    x",[277,1141,953],{"class":346},[277,1143,1144],{"class":488}," 2",[277,1146,964],{"class":346},[277,1148,1150,1152,1154],{"class":279,"line":1149},31,[277,1151,1091],{"class":346},[277,1153,1094],{"class":350},[277,1155,964],{"class":346},[277,1157,1159,1161],{"class":279,"line":1158},32,[277,1160,1102],{"class":346},[277,1162,536],{"class":529},[277,1164,1166,1169],{"class":279,"line":1165},33,[277,1167,1168],{"class":346},"}",[277,1170,536],{"class":350},[255,1172,1174],{"id":1173},"understanding-gsap-stagger-options","Understanding GSAP Stagger Options",[248,1176,1177,1178,1181],{},"The ",[274,1179,1180],{},"stagger"," property provides powerful control over timing:",[266,1183,1185],{"className":333,"code":1184,"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,1186,1187,1198,1216,1230,1239,1253,1269,1283,1302,1307],{"__ignoreMap":272},[277,1188,1189,1191,1194,1196],{"class":279,"line":280},[277,1190,442],{"class":441},[277,1192,1193],{"class":350}," animProperties ",[277,1195,448],{"class":346},[277,1197,771],{"class":346},[277,1199,1200,1203,1205,1207,1209,1211,1213],{"class":279,"line":375},[277,1201,1202],{"class":529},"  ease",[277,1204,953],{"class":346},[277,1206,366],{"class":346},[277,1208,958],{"class":286},[277,1210,961],{"class":346},[277,1212,354],{"class":346},[277,1214,1215],{"class":803},"     // Easing function\n",[277,1217,1218,1221,1223,1225,1227],{"class":279,"line":396},[277,1219,1220],{"class":529},"  duration",[277,1222,953],{"class":346},[277,1224,975],{"class":488},[277,1226,354],{"class":346},[277,1228,1229],{"class":803},"              // Animation duration in seconds\n",[277,1231,1232,1235,1237],{"class":279,"line":517},[277,1233,1234],{"class":529},"  stagger",[277,1236,953],{"class":346},[277,1238,771],{"class":346},[277,1240,1241,1244,1246,1248,1250],{"class":279,"line":539},[277,1242,1243],{"class":529},"    each",[277,1245,953],{"class":346},[277,1247,998],{"class":488},[277,1249,354],{"class":346},[277,1251,1252],{"class":803},"            // Delay between each object (0.25s)\n",[277,1254,1255,1258,1260,1262,1264,1266],{"class":279,"line":667},[277,1256,1257],{"class":529},"    repeat",[277,1259,953],{"class":346},[277,1261,485],{"class":346},[277,1263,1013],{"class":488},[277,1265,354],{"class":346},[277,1267,1268],{"class":803},"            // Infinite repeat (-1)\n",[277,1270,1271,1274,1276,1278,1280],{"class":279,"line":678},[277,1272,1273],{"class":529},"    yoyo",[277,1275,953],{"class":346},[277,1277,1027],{"class":1026},[277,1279,354],{"class":346},[277,1281,1282],{"class":803},"            // Reverse on alternate cycles\n",[277,1284,1285,1288,1290,1292,1295,1297,1299],{"class":279,"line":688},[277,1286,1287],{"class":529},"    from",[277,1289,953],{"class":346},[277,1291,366],{"class":346},[277,1293,1294],{"class":286},"start",[277,1296,961],{"class":346},[277,1298,354],{"class":346},[277,1300,1301],{"class":803},"         // Animation direction (start, center, end)\n",[277,1303,1304],{"class":279,"line":698},[277,1305,1306],{"class":346},"  },\n",[277,1308,1309],{"class":279,"line":708},[277,1310,542],{"class":346},[1312,1313,1315],"read-more",{"to":1314},"https://gsap.com/docs/v3/Staggers/",[248,1316,1317],{},"Learn more about GSAP stagger options and configurations.",[1319,1320,1322],"h2",{"id":1321},"advanced-techniques","Advanced Techniques",[255,1324,1326],{"id":1325},"timeline-control","Timeline Control",[1328,1329],"examples-advanced-gsap-timeline",{},[248,1331,1332],{},"For more complex sequences, use GSAP timelines to coordinate multiple animations:",[266,1334,1337],{"className":552,"code":1335,"filename":1336,"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,1338,1339,1362,1389,1403,1407,1420,1453,1457,1472,1491,1495,1524,1528,1533,1545,1549,1554,1559,1593,1605,1616,1632,1642,1649,1682,1703,1713,1728,1736,1753,1786,1798,1808,1819,1831,1847,1857,1864,1871,1876,1882,1906,1929,1952,1975],{"__ignoreMap":272},[277,1340,1341,1343,1346,1349,1352,1354,1356,1358,1360],{"class":279,"line":280},[277,1342,560],{"class":346},[277,1344,1345],{"class":529},"script",[277,1347,1348],{"class":441}," setup",[277,1350,1351],{"class":441}," lang",[277,1353,448],{"class":346},[277,1355,582],{"class":346},[277,1357,335],{"class":286},[277,1359,582],{"class":346},[277,1361,566],{"class":346},[277,1363,1364,1366,1368,1370,1372,1374,1376,1379,1381,1383,1385,1387],{"class":279,"line":375},[277,1365,343],{"class":342},[277,1367,347],{"class":346},[277,1369,351],{"class":350},[277,1371,354],{"class":346},[277,1373,357],{"class":350},[277,1375,354],{"class":346},[277,1377,1378],{"class":350}," onMounted",[277,1380,360],{"class":346},[277,1382,363],{"class":342},[277,1384,366],{"class":346},[277,1386,369],{"class":286},[277,1388,372],{"class":346},[277,1390,1391,1393,1395,1397,1399,1401],{"class":279,"line":396},[277,1392,343],{"class":342},[277,1394,401],{"class":350},[277,1396,404],{"class":342},[277,1398,366],{"class":346},[277,1400,409],{"class":286},[277,1402,372],{"class":346},[277,1404,1405],{"class":279,"line":517},[277,1406,798],{"emptyLinePlaceholder":39},[277,1408,1409,1411,1414,1416,1418],{"class":279,"line":539},[277,1410,442],{"class":441},[277,1412,1413],{"class":350}," groupRef ",[277,1415,448],{"class":346},[277,1417,351],{"class":451},[277,1419,454],{"class":350},[277,1421,1422,1424,1427,1429,1432,1434,1437,1439,1442,1445,1447,1449,1451],{"class":279,"line":667},[277,1423,442],{"class":441},[277,1425,1426],{"class":350}," timeline ",[277,1428,448],{"class":346},[277,1430,1431],{"class":350}," gsap",[277,1433,523],{"class":346},[277,1435,1436],{"class":451},"timeline",[277,1438,530],{"class":350},[277,1440,1441],{"class":346},"{",[277,1443,1444],{"class":529}," paused",[277,1446,953],{"class":346},[277,1448,1027],{"class":1026},[277,1450,360],{"class":346},[277,1452,536],{"class":350},[277,1454,1455],{"class":279,"line":678},[277,1456,798],{"emptyLinePlaceholder":39},[277,1458,1459,1461,1464,1466,1468,1470],{"class":279,"line":688},[277,1460,747],{"class":451},[277,1462,1463],{"class":350},"(groupRef",[277,1465,354],{"class":346},[277,1467,765],{"class":346},[277,1469,768],{"class":441},[277,1471,771],{"class":346},[277,1473,1474,1476,1478,1480,1483,1485,1487,1489],{"class":279,"line":698},[277,1475,776],{"class":342},[277,1477,474],{"class":529},[277,1479,781],{"class":346},[277,1481,1482],{"class":350},"groupRef",[277,1484,523],{"class":346},[277,1486,788],{"class":350},[277,1488,511],{"class":529},[277,1490,793],{"class":342},[277,1492,1493],{"class":279,"line":708},[277,1494,798],{"emptyLinePlaceholder":39},[277,1496,1497,1499,1502,1504,1506,1508,1510,1512,1514,1516,1518,1520,1522],{"class":279,"line":730},[277,1498,809],{"class":441},[277,1500,1501],{"class":350}," children",[277,1503,815],{"class":346},[277,1505,818],{"class":350},[277,1507,523],{"class":346},[277,1509,404],{"class":451},[277,1511,530],{"class":529},[277,1513,1482],{"class":350},[277,1515,523],{"class":346},[277,1517,788],{"class":350},[277,1519,523],{"class":346},[277,1521,835],{"class":350},[277,1523,536],{"class":529},[277,1525,1526],{"class":279,"line":935},[277,1527,798],{"emptyLinePlaceholder":39},[277,1529,1530],{"class":279,"line":947},[277,1531,1532],{"class":803},"  // Clear existing timeline\n",[277,1534,1535,1538,1540,1543],{"class":279,"line":967},[277,1536,1537],{"class":350},"  timeline",[277,1539,523],{"class":346},[277,1541,1542],{"class":451},"clear",[277,1544,454],{"class":529},[277,1546,1547],{"class":279,"line":980},[277,1548,798],{"emptyLinePlaceholder":39},[277,1550,1551],{"class":279,"line":990},[277,1552,1553],{"class":803},"  // Add multiple animations to timeline\n",[277,1555,1556],{"class":279,"line":1003},[277,1557,1558],{"class":350},"  timeline\n",[277,1560,1561,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582,1584,1587,1589,1591],{"class":279,"line":1018},[277,1562,1563],{"class":346},"    .",[277,1565,1063],{"class":451},[277,1567,530],{"class":529},[277,1569,835],{"class":350},[277,1571,523],{"class":346},[277,1573,843],{"class":451},[277,1575,530],{"class":529},[277,1577,855],{"class":854},[277,1579,768],{"class":441},[277,1581,862],{"class":350},[277,1583,523],{"class":346},[277,1585,1586],{"class":350},"position",[277,1588,838],{"class":529},[277,1590,354],{"class":346},[277,1592,771],{"class":346},[277,1594,1595,1598,1600,1603],{"class":279,"line":1032},[277,1596,1597],{"class":529},"      y",[277,1599,953],{"class":346},[277,1601,1602],{"class":488}," 3",[277,1604,964],{"class":346},[277,1606,1607,1610,1612,1614],{"class":279,"line":1038},[277,1608,1609],{"class":529},"      duration",[277,1611,953],{"class":346},[277,1613,975],{"class":488},[277,1615,964],{"class":346},[277,1617,1618,1621,1623,1625,1628,1630],{"class":279,"line":1044},[277,1619,1620],{"class":529},"      ease",[277,1622,953],{"class":346},[277,1624,366],{"class":346},[277,1626,1627],{"class":286},"back.out(1.7)",[277,1629,961],{"class":346},[277,1631,964],{"class":346},[277,1633,1634,1637,1639],{"class":279,"line":1049},[277,1635,1636],{"class":529},"      stagger",[277,1638,953],{"class":346},[277,1640,1641],{"class":488}," 0.1\n",[277,1643,1644,1647],{"class":279,"line":1055},[277,1645,1646],{"class":346},"    }",[277,1648,536],{"class":529},[277,1650,1651,1653,1655,1657,1659,1661,1663,1665,1667,1669,1671,1673,1676,1678,1680],{"class":279,"line":1075},[277,1652,1563],{"class":346},[277,1654,1063],{"class":451},[277,1656,530],{"class":529},[277,1658,835],{"class":350},[277,1660,523],{"class":346},[277,1662,843],{"class":451},[277,1664,530],{"class":529},[277,1666,855],{"class":854},[277,1668,768],{"class":441},[277,1670,862],{"class":350},[277,1672,523],{"class":346},[277,1674,1675],{"class":350},"rotation",[277,1677,838],{"class":529},[277,1679,354],{"class":346},[277,1681,771],{"class":346},[277,1683,1684,1686,1688,1691,1693,1696,1699,1701],{"class":279,"line":1088},[277,1685,1597],{"class":529},[277,1687,953],{"class":346},[277,1689,1690],{"class":350}," Math",[277,1692,523],{"class":346},[277,1694,1695],{"class":350},"PI",[277,1697,1698],{"class":346}," *",[277,1700,1144],{"class":488},[277,1702,964],{"class":346},[277,1704,1705,1707,1709,1711],{"class":279,"line":1099},[277,1706,1609],{"class":529},[277,1708,953],{"class":346},[277,1710,1144],{"class":488},[277,1712,964],{"class":346},[277,1714,1715,1717,1719,1721,1724,1726],{"class":279,"line":1107},[277,1716,1620],{"class":529},[277,1718,953],{"class":346},[277,1720,366],{"class":346},[277,1722,1723],{"class":286},"power2.inOut",[277,1725,961],{"class":346},[277,1727,964],{"class":346},[277,1729,1730,1732,1734],{"class":279,"line":1112},[277,1731,1636],{"class":529},[277,1733,953],{"class":346},[277,1735,1641],{"class":488},[277,1737,1738,1741,1743,1746,1748,1750],{"class":279,"line":1118},[277,1739,1740],{"class":346},"    },",[277,1742,366],{"class":346},[277,1744,1745],{"class":286},"-=0.5",[277,1747,961],{"class":346},[277,1749,511],{"class":529},[277,1751,1752],{"class":803},"// Start 0.5s before previous animation ends\n",[277,1754,1755,1757,1759,1761,1763,1765,1767,1769,1771,1773,1775,1777,1780,1782,1784],{"class":279,"line":1136},[277,1756,1563],{"class":346},[277,1758,1063],{"class":451},[277,1760,530],{"class":529},[277,1762,835],{"class":350},[277,1764,523],{"class":346},[277,1766,843],{"class":451},[277,1768,530],{"class":529},[277,1770,855],{"class":854},[277,1772,768],{"class":441},[277,1774,862],{"class":350},[277,1776,523],{"class":346},[277,1778,1779],{"class":350},"scale",[277,1781,838],{"class":529},[277,1783,354],{"class":346},[277,1785,771],{"class":346},[277,1787,1788,1791,1793,1796],{"class":279,"line":1149},[277,1789,1790],{"class":529},"      x",[277,1792,953],{"class":346},[277,1794,1795],{"class":488}," 1.5",[277,1797,964],{"class":346},[277,1799,1800,1802,1804,1806],{"class":279,"line":1158},[277,1801,1597],{"class":529},[277,1803,953],{"class":346},[277,1805,1795],{"class":488},[277,1807,964],{"class":346},[277,1809,1810,1813,1815,1817],{"class":279,"line":1165},[277,1811,1812],{"class":529},"      z",[277,1814,953],{"class":346},[277,1816,1795],{"class":488},[277,1818,964],{"class":346},[277,1820,1822,1824,1826,1829],{"class":279,"line":1821},34,[277,1823,1609],{"class":529},[277,1825,953],{"class":346},[277,1827,1828],{"class":488}," 0.5",[277,1830,964],{"class":346},[277,1832,1834,1836,1838,1840,1843,1845],{"class":279,"line":1833},35,[277,1835,1620],{"class":529},[277,1837,953],{"class":346},[277,1839,366],{"class":346},[277,1841,1842],{"class":286},"elastic.out(1, 0.3)",[277,1844,961],{"class":346},[277,1846,964],{"class":346},[277,1848,1850,1852,1854],{"class":279,"line":1849},36,[277,1851,1636],{"class":529},[277,1853,953],{"class":346},[277,1855,1856],{"class":488}," 0.05\n",[277,1858,1860,1862],{"class":279,"line":1859},37,[277,1861,1646],{"class":346},[277,1863,536],{"class":529},[277,1865,1867,1869],{"class":279,"line":1866},38,[277,1868,1168],{"class":346},[277,1870,536],{"class":350},[277,1872,1874],{"class":279,"line":1873},39,[277,1875,798],{"emptyLinePlaceholder":39},[277,1877,1879],{"class":279,"line":1878},40,[277,1880,1881],{"class":803},"// Control functions\n",[277,1883,1885,1887,1890,1892,1894,1896,1899,1901,1904],{"class":279,"line":1884},41,[277,1886,442],{"class":441},[277,1888,1889],{"class":350}," playAnimation ",[277,1891,448],{"class":346},[277,1893,765],{"class":346},[277,1895,768],{"class":441},[277,1897,1898],{"class":350}," timeline",[277,1900,523],{"class":346},[277,1902,1903],{"class":451},"play",[277,1905,454],{"class":350},[277,1907,1909,1911,1914,1916,1918,1920,1922,1924,1927],{"class":279,"line":1908},42,[277,1910,442],{"class":441},[277,1912,1913],{"class":350}," pauseAnimation ",[277,1915,448],{"class":346},[277,1917,765],{"class":346},[277,1919,768],{"class":441},[277,1921,1898],{"class":350},[277,1923,523],{"class":346},[277,1925,1926],{"class":451},"pause",[277,1928,454],{"class":350},[277,1930,1932,1934,1937,1939,1941,1943,1945,1947,1950],{"class":279,"line":1931},43,[277,1933,442],{"class":441},[277,1935,1936],{"class":350}," reverseAnimation ",[277,1938,448],{"class":346},[277,1940,765],{"class":346},[277,1942,768],{"class":441},[277,1944,1898],{"class":350},[277,1946,523],{"class":346},[277,1948,1949],{"class":451},"reverse",[277,1951,454],{"class":350},[277,1953,1955,1957,1960,1962,1964,1966,1968,1970,1973],{"class":279,"line":1954},44,[277,1956,442],{"class":441},[277,1958,1959],{"class":350}," restartAnimation ",[277,1961,448],{"class":346},[277,1963,765],{"class":346},[277,1965,768],{"class":441},[277,1967,1898],{"class":350},[277,1969,523],{"class":346},[277,1971,1972],{"class":451},"restart",[277,1974,454],{"class":350},[277,1976,1978,1980,1982],{"class":279,"line":1977},45,[277,1979,733],{"class":346},[277,1981,1345],{"class":529},[277,1983,566],{"class":346},[255,1985,1987],{"id":1986},"performance-optimization","Performance Optimization",[248,1989,1990],{},"When animating many objects, optimize performance by:",[1992,1993,1994,2003,2009,2019],"ol",{},[1995,1996,1997,2002],"li",{},[1998,1999,417,2000],"strong",{},[274,2001,329],{}," for Three.js object references",[1995,2004,2005,2008],{},[1998,2006,2007],{},"Batch property access"," to avoid repeated DOM queries",[1995,2010,2011,2018],{},[1998,2012,2013,2014,2017],{},"Use GSAP's ",[274,2015,2016],{},"set()"," method"," for immediate property changes",[1995,2020,2021,2024,2025],{},[1998,2022,2023],{},"Leverage hardware acceleration"," with ",[274,2026,2027],{},"force3D: true",[266,2029,2031],{"className":333,"code":2030,"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,2032,2033,2038,2053,2058,2087,2117,2145,2149,2154,2170,2180,2190,2201,2214,2220],{"__ignoreMap":272},[277,2034,2035],{"class":279,"line":280},[277,2036,2037],{"class":803},"// Optimized animation setup\n",[277,2039,2040,2042,2045,2047,2049,2051],{"class":279,"line":375},[277,2041,442],{"class":441},[277,2043,2044],{"class":350}," optimizedAnimation ",[277,2046,448],{"class":346},[277,2048,765],{"class":346},[277,2050,768],{"class":441},[277,2052,771],{"class":346},[277,2054,2055],{"class":279,"line":396},[277,2056,2057],{"class":803},"  // Get all properties at once\n",[277,2059,2060,2062,2065,2067,2069,2071,2073,2075,2077,2079,2081,2083,2085],{"class":279,"line":517},[277,2061,809],{"class":441},[277,2063,2064],{"class":350}," meshes",[277,2066,815],{"class":346},[277,2068,818],{"class":350},[277,2070,523],{"class":346},[277,2072,404],{"class":451},[277,2074,530],{"class":529},[277,2076,615],{"class":350},[277,2078,523],{"class":346},[277,2080,788],{"class":350},[277,2082,523],{"class":346},[277,2084,835],{"class":350},[277,2086,536],{"class":529},[277,2088,2089,2091,2093,2095,2097,2099,2101,2103,2106,2108,2111,2113,2115],{"class":279,"line":539},[277,2090,809],{"class":441},[277,2092,812],{"class":350},[277,2094,815],{"class":346},[277,2096,2064],{"class":350},[277,2098,523],{"class":346},[277,2100,843],{"class":451},[277,2102,530],{"class":529},[277,2104,2105],{"class":854},"mesh",[277,2107,768],{"class":441},[277,2109,2110],{"class":350}," mesh",[277,2112,523],{"class":346},[277,2114,1586],{"class":350},[277,2116,536],{"class":529},[277,2118,2119,2121,2123,2125,2127,2129,2131,2133,2135,2137,2139,2141,2143],{"class":279,"line":667},[277,2120,809],{"class":441},[277,2122,879],{"class":350},[277,2124,815],{"class":346},[277,2126,2064],{"class":350},[277,2128,523],{"class":346},[277,2130,843],{"class":451},[277,2132,530],{"class":529},[277,2134,2105],{"class":854},[277,2136,768],{"class":441},[277,2138,2110],{"class":350},[277,2140,523],{"class":346},[277,2142,1675],{"class":350},[277,2144,536],{"class":529},[277,2146,2147],{"class":279,"line":678},[277,2148,798],{"emptyLinePlaceholder":39},[277,2150,2151],{"class":279,"line":688},[277,2152,2153],{"class":803},"  // Use force3D for hardware acceleration\n",[277,2155,2156,2158,2160,2162,2164,2166,2168],{"class":279,"line":698},[277,2157,1058],{"class":350},[277,2159,523],{"class":346},[277,2161,1063],{"class":451},[277,2163,530],{"class":529},[277,2165,1068],{"class":350},[277,2167,354],{"class":346},[277,2169,771],{"class":346},[277,2171,2172,2174,2176,2178],{"class":279,"line":708},[277,2173,1078],{"class":529},[277,2175,953],{"class":346},[277,2177,1144],{"class":488},[277,2179,964],{"class":346},[277,2181,2182,2184,2186,2188],{"class":279,"line":730},[277,2183,970],{"class":529},[277,2185,953],{"class":346},[277,2187,975],{"class":488},[277,2189,964],{"class":346},[277,2191,2192,2195,2197,2199],{"class":279,"line":935},[277,2193,2194],{"class":529},"    force3D",[277,2196,953],{"class":346},[277,2198,1027],{"class":1026},[277,2200,964],{"class":346},[277,2202,2203,2205,2207,2209,2212],{"class":279,"line":947},[277,2204,950],{"class":529},[277,2206,953],{"class":346},[277,2208,366],{"class":346},[277,2210,2211],{"class":286},"power2.out",[277,2213,372],{"class":346},[277,2215,2216,2218],{"class":279,"line":967},[277,2217,1102],{"class":346},[277,2219,536],{"class":529},[277,2221,2222],{"class":279,"line":980},[277,2223,542],{"class":346},[255,2225,2227],{"id":2226},"animation-events","Animation Events",[248,2229,2230],{},"GSAP provides powerful callback events to sync with your application state:",[266,2232,2234],{"className":333,"code":2233,"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,2235,2236,2251,2262,2272,2283,2315,2345,2360,2365,2394,2398,2426],{"__ignoreMap":272},[277,2237,2238,2240,2242,2244,2247,2249],{"class":279,"line":280},[277,2239,409],{"class":350},[277,2241,523],{"class":346},[277,2243,1063],{"class":451},[277,2245,2246],{"class":350},"(positions",[277,2248,354],{"class":346},[277,2250,771],{"class":346},[277,2252,2253,2256,2258,2260],{"class":279,"line":375},[277,2254,2255],{"class":529},"  y",[277,2257,953],{"class":346},[277,2259,1144],{"class":488},[277,2261,964],{"class":346},[277,2263,2264,2266,2268,2270],{"class":279,"line":396},[277,2265,1220],{"class":529},[277,2267,953],{"class":346},[277,2269,975],{"class":488},[277,2271,964],{"class":346},[277,2273,2274,2276,2278,2281],{"class":279,"line":517},[277,2275,1234],{"class":529},[277,2277,953],{"class":346},[277,2279,2280],{"class":488}," 0.1",[277,2282,964],{"class":346},[277,2284,2285,2288,2290,2292,2294,2297,2299,2302,2304,2306,2309,2311,2313],{"class":279,"line":539},[277,2286,2287],{"class":451},"  onStart",[277,2289,953],{"class":346},[277,2291,765],{"class":346},[277,2293,768],{"class":441},[277,2295,2296],{"class":350}," console",[277,2298,523],{"class":346},[277,2300,2301],{"class":451},"log",[277,2303,530],{"class":350},[277,2305,961],{"class":346},[277,2307,2308],{"class":286},"Animation started",[277,2310,961],{"class":346},[277,2312,838],{"class":350},[277,2314,964],{"class":346},[277,2316,2317,2320,2322,2324,2326,2328,2330,2332,2334,2336,2339,2341,2343],{"class":279,"line":667},[277,2318,2319],{"class":451},"  onComplete",[277,2321,953],{"class":346},[277,2323,765],{"class":346},[277,2325,768],{"class":441},[277,2327,2296],{"class":350},[277,2329,523],{"class":346},[277,2331,2301],{"class":451},[277,2333,530],{"class":350},[277,2335,961],{"class":346},[277,2337,2338],{"class":286},"Animation completed",[277,2340,961],{"class":346},[277,2342,838],{"class":350},[277,2344,964],{"class":346},[277,2346,2347,2350,2352,2355,2358],{"class":279,"line":678},[277,2348,2349],{"class":451},"  onUpdate",[277,2351,953],{"class":346},[277,2353,2354],{"class":441}," function",[277,2356,2357],{"class":346},"()",[277,2359,771],{"class":346},[277,2361,2362],{"class":279,"line":688},[277,2363,2364],{"class":803},"    // Called on every frame\n",[277,2366,2367,2370,2372,2374,2376,2378,2381,2383,2385,2388,2391],{"class":279,"line":698},[277,2368,2369],{"class":350},"    console",[277,2371,523],{"class":346},[277,2373,2301],{"class":451},[277,2375,530],{"class":529},[277,2377,961],{"class":346},[277,2379,2380],{"class":286},"Progress:",[277,2382,961],{"class":346},[277,2384,354],{"class":346},[277,2386,2387],{"class":346}," this.",[277,2389,2390],{"class":451},"progress",[277,2392,2393],{"class":529},"())\n",[277,2395,2396],{"class":279,"line":708},[277,2397,1306],{"class":346},[277,2399,2400,2403,2405,2407,2409,2411,2413,2415,2417,2419,2422,2424],{"class":279,"line":730},[277,2401,2402],{"class":451},"  onRepeat",[277,2404,953],{"class":346},[277,2406,765],{"class":346},[277,2408,768],{"class":441},[277,2410,2296],{"class":350},[277,2412,523],{"class":346},[277,2414,2301],{"class":451},[277,2416,530],{"class":350},[277,2418,961],{"class":346},[277,2420,2421],{"class":286},"Animation repeated",[277,2423,961],{"class":346},[277,2425,536],{"class":350},[277,2427,2428,2430],{"class":279,"line":935},[277,2429,1168],{"class":346},[277,2431,536],{"class":350},[413,2433,2434],{},[248,2435,2436],{},"GSAP automatically handles frame rate optimization and provides better performance than manual animations for complex sequences.",[1312,2438,2440],{"to":2439},"https://gsap.com/docs/v3/",[248,2441,2442],{},"Explore the full GSAP documentation for advanced features and techniques.",[2444,2445,2446],"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":2448},[2449],{"id":1321,"depth":375,"text":1322,"children":2450},[2451,2452,2453],{"id":1325,"depth":396,"text":1326},{"id":1986,"depth":396,"text":1987},{"id":2226,"depth":396,"text":2227},"Learn how to create complex animations using GSAP with TresJS","md",null,{"thumbnail":2458},"/recipes/advance-animations-gsap.png",{"title":194,"description":2454},"R8AjCo0jcEtDQeXd3C_-4hakl39qbPWT2TVpK2ImDVY",[2462,2464],{"title":190,"path":191,"stem":192,"description":2463,"children":-1},"Learn how to animate 3D models in TresJS",{"title":198,"path":199,"stem":200,"description":2465,"children":-1},"Learn how to integrate Tweakpane with TresJS for interactive 3D controls",1782052336755]