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