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