[{"data":1,"prerenderedAt":7916},["ShallowReactive",2],{"page-\u002Fcss\u002Fgsap":3},{"id":4,"title":5,"body":6,"description":7905,"extension":7906,"meta":7907,"navigation":372,"path":7912,"seo":7913,"stem":7914,"__hash__":7915},"content\u002Fcss\u002Fgsap.md","Gsap",{"type":7,"value":8,"toc":7886},"minimark",[9,18,21,24,31,93,97,100,103,106,109,113,121,124,473,476,479,484,487,576,579,587,590,677,681,689,692,808,811,814,883,886,1005,1008,1011,1037,1040,1599,1602,1613,2257,2260,2297,2307,2314,2328,2339,2353,2371,2374,5545,5548,5551,5554,5558,5565,5573,5576,5595,5609,5612,5619,5622,5628,5638,5652,5655,6649,6652,6709,6720,6723,6726,6740,6753,6778,6785,6792,6794,7804,7819,7823,7827,7836,7839,7843,7846,7849,7852,7855,7858,7861,7871,7874,7877,7880,7883],[10,11,12,13,17],"p",{},"截至2026年，",[14,15,16],"strong",{},"GSAP的所有模块（包括以前收费的会员专属插件）现在都完全免费了","，可以免费用于商业项目。",[19,20],"gsap-scramble",{},[10,22,23],{},"GSAP 被 Webflow 收购后，取消了原来的付费会员（Club GSAP）制度。所有曾经需要付费订阅才能使用的“奖励插件”（Bonus Plugins），现在都已向所有人开放，不再需要授权令牌或私有仓库权限。",[10,25,26,27,30],{},"以下模块目前",[14,28,29],{},"全部免费","，包括但不限于：",[32,33,34,41,67],"ul",{},[35,36,37,40],"li",{},[14,38,39],{},"核心库","：GSAP Core。",[35,42,43,46,47,50,51,54,55,58,59,62,63,66],{},[14,44,45],{},"曾经收费的会员插件","：",[14,48,49],{},"SplitText","（文字拆分）、",[14,52,53],{},"MorphSVG","（形状变形）、",[14,56,57],{},"DrawSVG","（SVG 描边）、",[14,60,61],{},"ScrambleText","、",[14,64,65],{},"Physics2D"," 等。",[35,68,69,46,72,62,75,62,78,62,81,62,84,62,87,62,90,66],{},[14,70,71],{},"常用免费插件",[14,73,74],{},"ScrollTrigger",[14,76,77],{},"ScrollSmoother",[14,79,80],{},"Flip",[14,82,83],{},"Draggable",[14,85,86],{},"Observer",[14,88,89],{},"MotionPath",[14,91,92],{},"CustomEase",[94,95,96],"h2",{"id":96},"学习路径",[10,98,99],{},"学习 GSAP 的核心 API，可以按“创建动画 → 组织序列 → 控制与优化”这条主线来掌握。以下是必须熟悉的几个部分",[10,101,102],{},"我们最常用的是gsap.to \u002F gasp.from \u002F gsap.fromTo，这三个api可以实现： 让元素从当前状态过渡到制定状态、让元素从指定状态过渡到当前状态、显示指定起点和终点，适合状态切换或避免初始闪烁。以及还需要学习时间线，动画需要按顺序或者重叠执行时，gsap.timeline是信合工具，是一个容器来精确编排tween。",[10,104,105],{},"当我们把to\u002Ftimeline用熟悉，能够用ease、stagger来提升动画的观感之后，再考虑在做响应式或者框架项目的深入。",[94,107,108],{"id":108},"例子",[110,111,112],"h3",{"id":112},"fade",[114,115,118],"gsap-box",{"animation":112,":duration":116,":delay":117},"1.2","0.3",[10,119,120],{},"这段内容会被 GSAP 动画包裹，并且是fade入场的",[10,122,123],{},"这段代码在MDC语法渲染之后，等价于Vue模板里的：",[125,126,131],"pre",{"className":127,"code":128,"language":129,"meta":130,"style":130},"language-vue shiki shiki-themes github-light github-dark","相当于：\n\u003Ctemplate>\n  \u003Cdiv ref=\"containerRef\" class=\"gsap-box\">\n    \u003Cdiv class=\"gsap-controls\">\n      \u003Cbutton @click=\"play\" :disabled=\"isPlaying\" title=\"播放\">▶\u003C\u002Fbutton>\n      \u003Cbutton @click=\"pause\" :disabled=\"!isPlaying\" title=\"暂停\">⏸\u003C\u002Fbutton>\n      \u003Cbutton @click=\"restart\" title=\"重播\">⟲\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"animate-target\">\n      这段内容会被 GSAP 动画包裹。\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u002F\u002F props 解析后\nanimation = 'fade'\nduration = 1.2\ndelay = 0.3\n\n\u002F\u002F onMounted 里\ntl = gsap.timeline({ paused: true, onComplete: ... })\n\ntl.from(containerRef.value.querySelector('.animate-target'), {\n  opacity: 0,\n  y: 30,\n  duration: 1.2,\n  delay: 0.3,\n  ease: 'power2.out'\n})\n\ntl.play()\n\n","vue","",[132,133,134,143,156,186,203,243,278,306,316,332,338,347,357,367,374,380,386,392,398,403,409,415,420,426,432,438,444,450,456,462,467],"code",{"__ignoreMap":130},[135,136,139],"span",{"class":137,"line":138},"line",1,[135,140,142],{"class":141},"sVt8B","相当于：\n",[135,144,146,149,153],{"class":137,"line":145},2,[135,147,148],{"class":141},"\u003C",[135,150,152],{"class":151},"s9eBZ","template",[135,154,155],{"class":141},">\n",[135,157,159,162,165,169,172,176,179,181,184],{"class":137,"line":158},3,[135,160,161],{"class":141},"  \u003C",[135,163,164],{"class":151},"div",[135,166,168],{"class":167},"sScJk"," ref",[135,170,171],{"class":141},"=",[135,173,175],{"class":174},"sZZnC","\"containerRef\"",[135,177,178],{"class":167}," class",[135,180,171],{"class":141},[135,182,183],{"class":174},"\"gsap-box\"",[135,185,155],{"class":141},[135,187,189,192,194,196,198,201],{"class":137,"line":188},4,[135,190,191],{"class":141},"    \u003C",[135,193,164],{"class":151},[135,195,178],{"class":167},[135,197,171],{"class":141},[135,199,200],{"class":174},"\"gsap-controls\"",[135,202,155],{"class":141},[135,204,206,209,212,215,217,220,223,225,228,231,233,236,239,241],{"class":137,"line":205},5,[135,207,208],{"class":141},"      \u003C",[135,210,211],{"class":151},"button",[135,213,214],{"class":167}," @click",[135,216,171],{"class":141},[135,218,219],{"class":174},"\"play\"",[135,221,222],{"class":167}," :disabled",[135,224,171],{"class":141},[135,226,227],{"class":174},"\"isPlaying\"",[135,229,230],{"class":167}," title",[135,232,171],{"class":141},[135,234,235],{"class":174},"\"播放\"",[135,237,238],{"class":141},">▶\u003C\u002F",[135,240,211],{"class":151},[135,242,155],{"class":141},[135,244,246,248,250,252,254,257,259,261,264,266,268,271,274,276],{"class":137,"line":245},6,[135,247,208],{"class":141},[135,249,211],{"class":151},[135,251,214],{"class":167},[135,253,171],{"class":141},[135,255,256],{"class":174},"\"pause\"",[135,258,222],{"class":167},[135,260,171],{"class":141},[135,262,263],{"class":174},"\"!isPlaying\"",[135,265,230],{"class":167},[135,267,171],{"class":141},[135,269,270],{"class":174},"\"暂停\"",[135,272,273],{"class":141},">⏸\u003C\u002F",[135,275,211],{"class":151},[135,277,155],{"class":141},[135,279,281,283,285,287,289,292,294,296,299,302,304],{"class":137,"line":280},7,[135,282,208],{"class":141},[135,284,211],{"class":151},[135,286,214],{"class":167},[135,288,171],{"class":141},[135,290,291],{"class":174},"\"restart\"",[135,293,230],{"class":167},[135,295,171],{"class":141},[135,297,298],{"class":174},"\"重播\"",[135,300,301],{"class":141},">⟲\u003C\u002F",[135,303,211],{"class":151},[135,305,155],{"class":141},[135,307,309,312,314],{"class":137,"line":308},8,[135,310,311],{"class":141},"    \u003C\u002F",[135,313,164],{"class":151},[135,315,155],{"class":141},[135,317,319,321,323,325,327,330],{"class":137,"line":318},9,[135,320,191],{"class":141},[135,322,164],{"class":151},[135,324,178],{"class":167},[135,326,171],{"class":141},[135,328,329],{"class":174},"\"animate-target\"",[135,331,155],{"class":141},[135,333,335],{"class":137,"line":334},10,[135,336,337],{"class":141},"      这段内容会被 GSAP 动画包裹。\n",[135,339,341,343,345],{"class":137,"line":340},11,[135,342,311],{"class":141},[135,344,164],{"class":151},[135,346,155],{"class":141},[135,348,350,353,355],{"class":137,"line":349},12,[135,351,352],{"class":141},"  \u003C\u002F",[135,354,164],{"class":151},[135,356,155],{"class":141},[135,358,360,363,365],{"class":137,"line":359},13,[135,361,362],{"class":141},"\u003C\u002F",[135,364,152],{"class":151},[135,366,155],{"class":141},[135,368,370],{"class":137,"line":369},14,[135,371,373],{"emptyLinePlaceholder":372},true,"\n",[135,375,377],{"class":137,"line":376},15,[135,378,379],{"class":141},"\u002F\u002F props 解析后\n",[135,381,383],{"class":137,"line":382},16,[135,384,385],{"class":141},"animation = 'fade'\n",[135,387,389],{"class":137,"line":388},17,[135,390,391],{"class":141},"duration = 1.2\n",[135,393,395],{"class":137,"line":394},18,[135,396,397],{"class":141},"delay = 0.3\n",[135,399,401],{"class":137,"line":400},19,[135,402,373],{"emptyLinePlaceholder":372},[135,404,406],{"class":137,"line":405},20,[135,407,408],{"class":141},"\u002F\u002F onMounted 里\n",[135,410,412],{"class":137,"line":411},21,[135,413,414],{"class":141},"tl = gsap.timeline({ paused: true, onComplete: ... })\n",[135,416,418],{"class":137,"line":417},22,[135,419,373],{"emptyLinePlaceholder":372},[135,421,423],{"class":137,"line":422},23,[135,424,425],{"class":141},"tl.from(containerRef.value.querySelector('.animate-target'), {\n",[135,427,429],{"class":137,"line":428},24,[135,430,431],{"class":141},"  opacity: 0,\n",[135,433,435],{"class":137,"line":434},25,[135,436,437],{"class":141},"  y: 30,\n",[135,439,441],{"class":137,"line":440},26,[135,442,443],{"class":141},"  duration: 1.2,\n",[135,445,447],{"class":137,"line":446},27,[135,448,449],{"class":141},"  delay: 0.3,\n",[135,451,453],{"class":137,"line":452},28,[135,454,455],{"class":141},"  ease: 'power2.out'\n",[135,457,459],{"class":137,"line":458},29,[135,460,461],{"class":141},"})\n",[135,463,465],{"class":137,"line":464},30,[135,466,373],{"emptyLinePlaceholder":372},[135,468,470],{"class":137,"line":469},31,[135,471,472],{"class":141},"tl.play()\n",[10,474,475],{},"然后我们看看旋转入场的动画：",[110,477,478],{"id":478},"rotate",[114,480,481],{"animation":478,":duration":116,":delay":117},[10,482,483],{},"这段内容会被 GSAP 动画包裹，并且是rotate入场的",[10,485,486],{},"在我们的GSAP包装组件里，他使用的GSAP为rotation方法，利用from变成了现在的状态：",[125,488,492],{"className":489,"code":490,"language":491,"meta":130,"style":130},"language-ts shiki shiki-themes github-light github-dark","if (props.animation === 'rotate') {\n  tl.from(target, {\n    rotation: -15,\n    opacity: 0,\n    duration: props.duration,\n    delay: props.delay,\n    ease: 'power2.out'\n  })\n}\n","ts",[132,493,494,512,523,538,548,553,558,566,571],{"__ignoreMap":130},[135,495,496,500,503,506,509],{"class":137,"line":138},[135,497,499],{"class":498},"szBVR","if",[135,501,502],{"class":141}," (props.animation ",[135,504,505],{"class":498},"===",[135,507,508],{"class":174}," 'rotate'",[135,510,511],{"class":141},") {\n",[135,513,514,517,520],{"class":137,"line":145},[135,515,516],{"class":141},"  tl.",[135,518,519],{"class":167},"from",[135,521,522],{"class":141},"(target, {\n",[135,524,525,528,531,535],{"class":137,"line":158},[135,526,527],{"class":141},"    rotation: ",[135,529,530],{"class":498},"-",[135,532,534],{"class":533},"sj4cs","15",[135,536,537],{"class":141},",\n",[135,539,540,543,546],{"class":137,"line":188},[135,541,542],{"class":141},"    opacity: ",[135,544,545],{"class":533},"0",[135,547,537],{"class":141},[135,549,550],{"class":137,"line":205},[135,551,552],{"class":141},"    duration: props.duration,\n",[135,554,555],{"class":137,"line":245},[135,556,557],{"class":141},"    delay: props.delay,\n",[135,559,560,563],{"class":137,"line":280},[135,561,562],{"class":141},"    ease: ",[135,564,565],{"class":174},"'power2.out'\n",[135,567,568],{"class":137,"line":308},[135,569,570],{"class":141},"  })\n",[135,572,573],{"class":137,"line":318},[135,574,575],{"class":141},"}\n",[10,577,578],{},"然后是可拖拽内容：",[114,580,582],{"animation":581},"drag",[164,583,586],{"className":584},[585],"drag-me","拖我",[10,588,589],{},"这个可拖拽的内容我们一般会这样使用：",[125,591,593],{"className":489,"code":592,"language":491,"meta":130,"style":130},"case 'drag':\n  \u002F\u002F 拖拽不依赖 timeline 播放，单独初始化\n  draggable = Draggable.create(target, {\n    type: 'x,y',\n    bounds: containerRef.value,\n    inertia: false\n  })\n  \u002F\u002F 拖拽模式没有入场动画，直接标记为“已播放”状态\n  isPlaying.value = true\n  return \u002F\u002F 跳过下面的 tl.play()\n",[132,594,595,606,612,627,637,642,650,654,659,669],{"__ignoreMap":130},[135,596,597,600,603],{"class":137,"line":138},[135,598,599],{"class":498},"case",[135,601,602],{"class":174}," 'drag'",[135,604,605],{"class":141},":\n",[135,607,608],{"class":137,"line":145},[135,609,611],{"class":610},"sJ8bj","  \u002F\u002F 拖拽不依赖 timeline 播放，单独初始化\n",[135,613,614,617,619,622,625],{"class":137,"line":158},[135,615,616],{"class":141},"  draggable ",[135,618,171],{"class":498},[135,620,621],{"class":141}," Draggable.",[135,623,624],{"class":167},"create",[135,626,522],{"class":141},[135,628,629,632,635],{"class":137,"line":188},[135,630,631],{"class":141},"    type: ",[135,633,634],{"class":174},"'x,y'",[135,636,537],{"class":141},[135,638,639],{"class":137,"line":205},[135,640,641],{"class":141},"    bounds: containerRef.value,\n",[135,643,644,647],{"class":137,"line":245},[135,645,646],{"class":141},"    inertia: ",[135,648,649],{"class":533},"false\n",[135,651,652],{"class":137,"line":280},[135,653,570],{"class":141},[135,655,656],{"class":137,"line":308},[135,657,658],{"class":610},"  \u002F\u002F 拖拽模式没有入场动画，直接标记为“已播放”状态\n",[135,660,661,664,666],{"class":137,"line":318},[135,662,663],{"class":141},"  isPlaying.value ",[135,665,171],{"class":498},[135,667,668],{"class":533}," true\n",[135,670,671,674],{"class":137,"line":334},[135,672,673],{"class":498},"  return",[135,675,676],{"class":610}," \u002F\u002F 跳过下面的 tl.play()\n",[110,678,680],{"id":679},"splittext","splitText",[114,682,686],{"animation":683,":duration":684,":delay":685},"chars","0.5","0.2",[10,687,688],{},"这段文字会被 SplitText 拆成字符后逐个出现。",[10,690,691],{},"逐个出现的字符我们会这样使用：",[125,693,695],{"className":489,"code":694,"language":491,"meta":130,"style":130},"case 'chars':\nsplit = new SplitText(target, { type: 'chars' })\nconsole.log('chars count:', split.chars.length) \u002F\u002F 必须 > 0\ntl.from(split.chars, {\n    y: 40, opacity: 0,\n    duration: 0.5, stagger: 0.03,\n    delay: props.delay, ease: props.ease\n})\nbreak\n",[132,696,697,706,728,754,764,779,794,799,803],{"__ignoreMap":130},[135,698,699,701,704],{"class":137,"line":138},[135,700,599],{"class":498},[135,702,703],{"class":174}," 'chars'",[135,705,605],{"class":141},[135,707,708,711,713,716,719,722,725],{"class":137,"line":145},[135,709,710],{"class":141},"split ",[135,712,171],{"class":498},[135,714,715],{"class":498}," new",[135,717,718],{"class":167}," SplitText",[135,720,721],{"class":141},"(target, { type: ",[135,723,724],{"class":174},"'chars'",[135,726,727],{"class":141}," })\n",[135,729,730,733,736,739,742,745,748,751],{"class":137,"line":158},[135,731,732],{"class":141},"console.",[135,734,735],{"class":167},"log",[135,737,738],{"class":141},"(",[135,740,741],{"class":174},"'chars count:'",[135,743,744],{"class":141},", split.chars.",[135,746,747],{"class":533},"length",[135,749,750],{"class":141},") ",[135,752,753],{"class":610},"\u002F\u002F 必须 > 0\n",[135,755,756,759,761],{"class":137,"line":188},[135,757,758],{"class":141},"tl.",[135,760,519],{"class":167},[135,762,763],{"class":141},"(split.chars, {\n",[135,765,766,769,772,775,777],{"class":137,"line":205},[135,767,768],{"class":141},"    y: ",[135,770,771],{"class":533},"40",[135,773,774],{"class":141},", opacity: ",[135,776,545],{"class":533},[135,778,537],{"class":141},[135,780,781,784,786,789,792],{"class":137,"line":245},[135,782,783],{"class":141},"    duration: ",[135,785,684],{"class":533},[135,787,788],{"class":141},", stagger: ",[135,790,791],{"class":533},"0.03",[135,793,537],{"class":141},[135,795,796],{"class":137,"line":280},[135,797,798],{"class":141},"    delay: props.delay, ease: props.ease\n",[135,800,801],{"class":137,"line":308},[135,802,461],{"class":141},[135,804,805],{"class":137,"line":318},[135,806,807],{"class":498},"break\n",[110,809,810],{"id":810},"stagger",[10,812,813],{},"然后就是可以逐个延迟出现的导航项，我们经常这样使用来美化我们的页面，增添更多的动效，这里我们使用的是back.out(1.7)的弹簧振子效果。不要点，点了就是404（",[114,815,818],{"animation":810,":duration":816,"ease":817},"0.4","back.out(1.7)",[164,819,821,822,821,834,821,843,821,851,821,859,821,867,821,875],{"style":820},"display: flex; flex-direction: column; gap: 2px; max-width: 260px;","\n  ",[823,824,829,830,833],"a",{"className":825,"href":827,"style":828},[826],"nav-item","\u002F","display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; text-decoration: none; color: #1f2937; font-size: 14px; font-weight: 500; background: #eef2ff; transition: background 0.15s;","\n    ",[135,831],{"style":832},"width: 18px; height: 18px; border-radius: 4px; background: #6366f1; flex-shrink: 0;","\n    首页\n  ",[823,835,829,839,842],{"className":836,"href":837,"style":838},[826],"\u002Fdocs","display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; text-decoration: none; color: #374151; font-size: 14px; transition: background 0.15s;",[135,840],{"style":841},"width: 18px; height: 18px; border-radius: 4px; background: #a5b4fc; flex-shrink: 0;","\n    文档\n  ",[823,844,829,847,850],{"className":845,"href":846,"style":838},[826],"\u002Fguide",[135,848],{"style":849},"width: 18px; height: 18px; border-radius: 4px; background: #c7d2fe; flex-shrink: 0;","\n    指南\n  ",[823,852,829,855,858],{"className":853,"href":854,"style":838},[826],"\u002Fcomponents",[135,856],{"style":857},"width: 18px; height: 18px; border-radius: 4px; background: #ddd6fe; flex-shrink: 0;","\n    组件\n  ",[823,860,829,863,866],{"className":861,"href":862,"style":838},[826],"\u002Fplugins",[135,864],{"style":865},"width: 18px; height: 18px; border-radius: 4px; background: #e9d5ff; flex-shrink: 0;","\n    插件\n  ",[823,868,829,871,874],{"className":869,"href":870,"style":838},[826],"\u002Fblog",[135,872],{"style":873},"width: 18px; height: 18px; border-radius: 4px; background: #fbcfe8; flex-shrink: 0;","\n    博客\n  ",[823,876,829,879,882],{"className":877,"href":878,"style":838},[826],"\u002Fabout",[135,880],{"style":881},"width: 18px; height: 18px; border-radius: 4px; background: #fecaca; flex-shrink: 0;","\n    关于\n  ",[10,884,885],{},"我们在平常的开发中，这样来调用：",[125,887,889],{"className":489,"code":888,"language":491,"meta":130,"style":130},"case 'stagger':\n  const items = target.querySelectorAll('.nav-item')\n  console.log('stagger items:', items.length)\n  tl.from(items, {\n    x: -50,\n    opacity: 0,\n    duration: 0.4,\n    stagger: 0.1,\n    ease: props.ease\n  })\n  break\n",[132,890,891,900,925,944,953,965,973,981,991,996,1000],{"__ignoreMap":130},[135,892,893,895,898],{"class":137,"line":138},[135,894,599],{"class":498},[135,896,897],{"class":174}," 'stagger'",[135,899,605],{"class":141},[135,901,902,905,908,911,914,917,919,922],{"class":137,"line":145},[135,903,904],{"class":498},"  const",[135,906,907],{"class":533}," items",[135,909,910],{"class":498}," =",[135,912,913],{"class":141}," target.",[135,915,916],{"class":167},"querySelectorAll",[135,918,738],{"class":141},[135,920,921],{"class":174},"'.nav-item'",[135,923,924],{"class":141},")\n",[135,926,927,930,932,934,937,940,942],{"class":137,"line":158},[135,928,929],{"class":141},"  console.",[135,931,735],{"class":167},[135,933,738],{"class":141},[135,935,936],{"class":174},"'stagger items:'",[135,938,939],{"class":141},", items.",[135,941,747],{"class":533},[135,943,924],{"class":141},[135,945,946,948,950],{"class":137,"line":188},[135,947,516],{"class":141},[135,949,519],{"class":167},[135,951,952],{"class":141},"(items, {\n",[135,954,955,958,960,963],{"class":137,"line":205},[135,956,957],{"class":141},"    x: ",[135,959,530],{"class":498},[135,961,962],{"class":533},"50",[135,964,537],{"class":141},[135,966,967,969,971],{"class":137,"line":245},[135,968,542],{"class":141},[135,970,545],{"class":533},[135,972,537],{"class":141},[135,974,975,977,979],{"class":137,"line":280},[135,976,783],{"class":141},[135,978,816],{"class":533},[135,980,537],{"class":141},[135,982,983,986,989],{"class":137,"line":308},[135,984,985],{"class":141},"    stagger: ",[135,987,988],{"class":533},"0.1",[135,990,537],{"class":141},[135,992,993],{"class":137,"line":318},[135,994,995],{"class":141},"    ease: props.ease\n",[135,997,998],{"class":137,"line":334},[135,999,570],{"class":141},[135,1001,1002],{"class":137,"line":340},[135,1003,1004],{"class":498},"  break\n",[110,1006,1007],{"id":1007},"flip",[10,1009,1010],{},"这是最值得加的一个。Flip 能记录元素当前状态，在布局改变后自动计算位置差异，并让元素从旧位置“飞”到新位置。适合的场景：卡片从网格布局切换到列表布局、图片从缩略图放大到详情、导航栏在滚动时收缩变形。",[114,1012,1013],{"animation":1007},[164,1014,821,1017,821,1021,821,1025,821,1029,821,1033],{"className":1015},[1016],"nav-list",[823,1018,1020],{"className":1019,"href":827},[826],"首页",[823,1022,1024],{"className":1023,"href":837},[826],"文档",[823,1026,1028],{"className":1027,"href":846},[826],"指南",[823,1030,1032],{"className":1031,"href":854},[826],"组件",[823,1034,1036],{"className":1035,"href":862},[826],"插件",[10,1038,1039],{},"代码实现大致如下：",[125,1041,1043],{"className":489,"code":1042,"language":491,"meta":130,"style":130},"\u003Cdiv class=\"nav-list\">\n  \u003Ca class=\"nav-item\" href=\"\u002F\">首页\u003C\u002Fa>\n  \u003Ca class=\"nav-item\" href=\"\u002Fdocs\">文档\u003C\u002Fa>\n  \u003Ca class=\"nav-item\" href=\"\u002Fguide\">指南\u003C\u002Fa>\n  \u003Ca class=\"nav-item\" href=\"\u002Fcomponents\">组件\u003C\u002Fa>\n  \u003Ca class=\"nav-item\" href=\"\u002Fplugins\">插件\u003C\u002Fa>\n\u003C\u002Fdiv>\n\nconst isHorizontal = ref(false)\nlet flipState = null\ncase 'flip': {\n    const list = target.querySelector('.nav-list')\n    if (list) {\n        list.style.display = 'flex'\n        list.style.flexDirection = 'column'\n        list.style.gap = '4px'\n    }\n    isPlaying.value = true\n    return\n}\n\nfunction toggleFlipLayout() {\n  const target = containerRef.value?.querySelector('.animate-target')\n  const items = target?.querySelectorAll('.nav-item')\n  const list = target?.querySelector('.nav-list')\n  if (!items?.length || !list) return\n\n  \u002F\u002F 1. 记录当前状态\n  flipState = Flip.getState(items)\n\n  \u002F\u002F 2. 切换布局方向\n  isHorizontal.value = !isHorizontal.value\n  list.style.flexDirection = isHorizontal.value ? 'row' : 'column'\n  list.style.flexWrap = isHorizontal.value ? 'wrap' : 'nowrap'\n\n  \u002F\u002F 3. 从旧状态补间到新状态\n  Flip.from(flipState, {\n    duration: 0.6,\n    ease: 'power2.inOut',\n    stagger: 0.05,\n    absolute: true\n  })\n}\n",[132,1044,1045,1059,1090,1117,1144,1171,1198,1206,1210,1229,1242,1252,1271,1285,1295,1305,1315,1320,1329,1334,1338,1342,1353,1374,1393,1412,1439,1443,1448,1464,1468,1473,1486,1508,1528,1533,1539,1550,1560,1570,1580,1589,1594],{"__ignoreMap":130},[135,1046,1047,1049,1052,1054,1057],{"class":137,"line":138},[135,1048,148],{"class":498},[135,1050,1051],{"class":141},"div class",[135,1053,171],{"class":498},[135,1055,1056],{"class":174},"\"nav-list\"",[135,1058,155],{"class":498},[135,1060,1061,1063,1066,1068,1071,1074,1076,1079,1082,1084,1086,1088],{"class":137,"line":145},[135,1062,161],{"class":498},[135,1064,1065],{"class":141},"a class",[135,1067,171],{"class":498},[135,1069,1070],{"class":174},"\"nav-item\"",[135,1072,1073],{"class":141}," href",[135,1075,171],{"class":498},[135,1077,1078],{"class":174},"\"\u002F\"",[135,1080,1081],{"class":498},">",[135,1083,1020],{"class":141},[135,1085,362],{"class":498},[135,1087,823],{"class":141},[135,1089,155],{"class":498},[135,1091,1092,1094,1096,1098,1100,1102,1104,1107,1109,1111,1113,1115],{"class":137,"line":158},[135,1093,161],{"class":498},[135,1095,1065],{"class":141},[135,1097,171],{"class":498},[135,1099,1070],{"class":174},[135,1101,1073],{"class":141},[135,1103,171],{"class":498},[135,1105,1106],{"class":174},"\"\u002Fdocs\"",[135,1108,1081],{"class":498},[135,1110,1024],{"class":141},[135,1112,362],{"class":498},[135,1114,823],{"class":141},[135,1116,155],{"class":498},[135,1118,1119,1121,1123,1125,1127,1129,1131,1134,1136,1138,1140,1142],{"class":137,"line":188},[135,1120,161],{"class":498},[135,1122,1065],{"class":141},[135,1124,171],{"class":498},[135,1126,1070],{"class":174},[135,1128,1073],{"class":141},[135,1130,171],{"class":498},[135,1132,1133],{"class":174},"\"\u002Fguide\"",[135,1135,1081],{"class":498},[135,1137,1028],{"class":141},[135,1139,362],{"class":498},[135,1141,823],{"class":141},[135,1143,155],{"class":498},[135,1145,1146,1148,1150,1152,1154,1156,1158,1161,1163,1165,1167,1169],{"class":137,"line":205},[135,1147,161],{"class":498},[135,1149,1065],{"class":141},[135,1151,171],{"class":498},[135,1153,1070],{"class":174},[135,1155,1073],{"class":141},[135,1157,171],{"class":498},[135,1159,1160],{"class":174},"\"\u002Fcomponents\"",[135,1162,1081],{"class":498},[135,1164,1032],{"class":141},[135,1166,362],{"class":498},[135,1168,823],{"class":141},[135,1170,155],{"class":498},[135,1172,1173,1175,1177,1179,1181,1183,1185,1188,1190,1192,1194,1196],{"class":137,"line":245},[135,1174,161],{"class":498},[135,1176,1065],{"class":141},[135,1178,171],{"class":498},[135,1180,1070],{"class":174},[135,1182,1073],{"class":141},[135,1184,171],{"class":498},[135,1186,1187],{"class":174},"\"\u002Fplugins\"",[135,1189,1081],{"class":498},[135,1191,1036],{"class":141},[135,1193,362],{"class":498},[135,1195,823],{"class":141},[135,1197,155],{"class":498},[135,1199,1200,1202,1204],{"class":137,"line":280},[135,1201,362],{"class":498},[135,1203,164],{"class":141},[135,1205,155],{"class":498},[135,1207,1208],{"class":137,"line":308},[135,1209,373],{"emptyLinePlaceholder":372},[135,1211,1212,1215,1218,1220,1222,1224,1227],{"class":137,"line":318},[135,1213,1214],{"class":498},"const",[135,1216,1217],{"class":533}," isHorizontal",[135,1219,910],{"class":498},[135,1221,168],{"class":167},[135,1223,738],{"class":141},[135,1225,1226],{"class":533},"false",[135,1228,924],{"class":141},[135,1230,1231,1234,1237,1239],{"class":137,"line":334},[135,1232,1233],{"class":498},"let",[135,1235,1236],{"class":141}," flipState ",[135,1238,171],{"class":498},[135,1240,1241],{"class":533}," null\n",[135,1243,1244,1246,1249],{"class":137,"line":340},[135,1245,599],{"class":498},[135,1247,1248],{"class":174}," 'flip'",[135,1250,1251],{"class":141},": {\n",[135,1253,1254,1257,1259,1261,1264,1266,1269],{"class":137,"line":349},[135,1255,1256],{"class":141},"    const list ",[135,1258,171],{"class":498},[135,1260,913],{"class":141},[135,1262,1263],{"class":167},"querySelector",[135,1265,738],{"class":141},[135,1267,1268],{"class":174},"'.nav-list'",[135,1270,924],{"class":141},[135,1272,1273,1276,1279,1283],{"class":137,"line":359},[135,1274,1275],{"class":167},"    if",[135,1277,1278],{"class":141}," (",[135,1280,1282],{"class":1281},"s4XuR","list",[135,1284,511],{"class":141},[135,1286,1287,1290,1292],{"class":137,"line":369},[135,1288,1289],{"class":141},"        list.style.display ",[135,1291,171],{"class":498},[135,1293,1294],{"class":174}," 'flex'\n",[135,1296,1297,1300,1302],{"class":137,"line":376},[135,1298,1299],{"class":141},"        list.style.flexDirection ",[135,1301,171],{"class":498},[135,1303,1304],{"class":174}," 'column'\n",[135,1306,1307,1310,1312],{"class":137,"line":382},[135,1308,1309],{"class":141},"        list.style.gap ",[135,1311,171],{"class":498},[135,1313,1314],{"class":174}," '4px'\n",[135,1316,1317],{"class":137,"line":388},[135,1318,1319],{"class":141},"    }\n",[135,1321,1322,1325,1327],{"class":137,"line":394},[135,1323,1324],{"class":141},"    isPlaying.value ",[135,1326,171],{"class":498},[135,1328,668],{"class":533},[135,1330,1331],{"class":137,"line":400},[135,1332,1333],{"class":141},"    return\n",[135,1335,1336],{"class":137,"line":405},[135,1337,575],{"class":141},[135,1339,1340],{"class":137,"line":411},[135,1341,373],{"emptyLinePlaceholder":372},[135,1343,1344,1347,1350],{"class":137,"line":417},[135,1345,1346],{"class":498},"function",[135,1348,1349],{"class":167}," toggleFlipLayout",[135,1351,1352],{"class":141},"() {\n",[135,1354,1355,1357,1360,1362,1365,1367,1369,1372],{"class":137,"line":422},[135,1356,904],{"class":498},[135,1358,1359],{"class":533}," target",[135,1361,910],{"class":498},[135,1363,1364],{"class":141}," containerRef.value?.",[135,1366,1263],{"class":167},[135,1368,738],{"class":141},[135,1370,1371],{"class":174},"'.animate-target'",[135,1373,924],{"class":141},[135,1375,1376,1378,1380,1382,1385,1387,1389,1391],{"class":137,"line":428},[135,1377,904],{"class":498},[135,1379,907],{"class":533},[135,1381,910],{"class":498},[135,1383,1384],{"class":141}," target?.",[135,1386,916],{"class":167},[135,1388,738],{"class":141},[135,1390,921],{"class":174},[135,1392,924],{"class":141},[135,1394,1395,1397,1400,1402,1404,1406,1408,1410],{"class":137,"line":434},[135,1396,904],{"class":498},[135,1398,1399],{"class":533}," list",[135,1401,910],{"class":498},[135,1403,1384],{"class":141},[135,1405,1263],{"class":167},[135,1407,738],{"class":141},[135,1409,1268],{"class":174},[135,1411,924],{"class":141},[135,1413,1414,1417,1419,1422,1425,1427,1430,1433,1436],{"class":137,"line":440},[135,1415,1416],{"class":498},"  if",[135,1418,1278],{"class":141},[135,1420,1421],{"class":498},"!",[135,1423,1424],{"class":141},"items?.",[135,1426,747],{"class":533},[135,1428,1429],{"class":498}," ||",[135,1431,1432],{"class":498}," !",[135,1434,1435],{"class":141},"list) ",[135,1437,1438],{"class":498},"return\n",[135,1440,1441],{"class":137,"line":446},[135,1442,373],{"emptyLinePlaceholder":372},[135,1444,1445],{"class":137,"line":452},[135,1446,1447],{"class":610},"  \u002F\u002F 1. 记录当前状态\n",[135,1449,1450,1453,1455,1458,1461],{"class":137,"line":458},[135,1451,1452],{"class":141},"  flipState ",[135,1454,171],{"class":498},[135,1456,1457],{"class":141}," Flip.",[135,1459,1460],{"class":167},"getState",[135,1462,1463],{"class":141},"(items)\n",[135,1465,1466],{"class":137,"line":464},[135,1467,373],{"emptyLinePlaceholder":372},[135,1469,1470],{"class":137,"line":469},[135,1471,1472],{"class":610},"  \u002F\u002F 2. 切换布局方向\n",[135,1474,1476,1479,1481,1483],{"class":137,"line":1475},32,[135,1477,1478],{"class":141},"  isHorizontal.value ",[135,1480,171],{"class":498},[135,1482,1432],{"class":498},[135,1484,1485],{"class":141},"isHorizontal.value\n",[135,1487,1489,1492,1494,1497,1500,1503,1506],{"class":137,"line":1488},33,[135,1490,1491],{"class":141},"  list.style.flexDirection ",[135,1493,171],{"class":498},[135,1495,1496],{"class":141}," isHorizontal.value ",[135,1498,1499],{"class":498},"?",[135,1501,1502],{"class":174}," 'row'",[135,1504,1505],{"class":498}," :",[135,1507,1304],{"class":174},[135,1509,1511,1514,1516,1518,1520,1523,1525],{"class":137,"line":1510},34,[135,1512,1513],{"class":141},"  list.style.flexWrap ",[135,1515,171],{"class":498},[135,1517,1496],{"class":141},[135,1519,1499],{"class":498},[135,1521,1522],{"class":174}," 'wrap'",[135,1524,1505],{"class":498},[135,1526,1527],{"class":174}," 'nowrap'\n",[135,1529,1531],{"class":137,"line":1530},35,[135,1532,373],{"emptyLinePlaceholder":372},[135,1534,1536],{"class":137,"line":1535},36,[135,1537,1538],{"class":610},"  \u002F\u002F 3. 从旧状态补间到新状态\n",[135,1540,1542,1545,1547],{"class":137,"line":1541},37,[135,1543,1544],{"class":141},"  Flip.",[135,1546,519],{"class":167},[135,1548,1549],{"class":141},"(flipState, {\n",[135,1551,1553,1555,1558],{"class":137,"line":1552},38,[135,1554,783],{"class":141},[135,1556,1557],{"class":533},"0.6",[135,1559,537],{"class":141},[135,1561,1563,1565,1568],{"class":137,"line":1562},39,[135,1564,562],{"class":141},[135,1566,1567],{"class":174},"'power2.inOut'",[135,1569,537],{"class":141},[135,1571,1573,1575,1578],{"class":137,"line":1572},40,[135,1574,985],{"class":141},[135,1576,1577],{"class":533},"0.05",[135,1579,537],{"class":141},[135,1581,1583,1586],{"class":137,"line":1582},41,[135,1584,1585],{"class":141},"    absolute: ",[135,1587,1588],{"class":533},"true\n",[135,1590,1592],{"class":137,"line":1591},42,[135,1593,570],{"class":141},[135,1595,1597],{"class":137,"line":1596},43,[135,1598,575],{"class":141},[10,1600,1601],{},"除此以外还有swpo element position的功能，用于处理两个或者多个元素在DOM中互换位置时候的平滑过渡效果，实现在于data-flip-id属性。",[10,1603,1604,1605,1608,1609,1612],{},"Flip 插件默认会给每个元素分配一个自动 ID，但当你要在两个",[14,1606,1607],{},"不同的"," DOM 元素之间做“交换”动画时，必须手动给它们设置相同的 ",[132,1610,1611],{},"data-flip-id","，Flip 才能知道在状态变化前后，哪个元素对应哪个元素",[125,1614,1616],{"className":489,"code":1615,"language":491,"meta":130,"style":130},"let swapSelection = null\ncase 'swap': {\n  const items = target.querySelectorAll('.swap-item')\n  items.forEach(item => {\n    if (!item.dataset.flipId) {\n      item.dataset.flipId = 'swap-' + Math.random().toString(36).slice(2, 8)\n    }\n    item.addEventListener('click', handleSwapClick)\n  })\n  isPlaying.value = true\n  return\n}\n\nfunction handleSwapClick(e) {\n  const item = e.target.closest('.swap-item')\n  if (!item) return\n\n  \u002F\u002F 第一次点击：选中\n  if (!swapSelection) {\n    swapSelection = item\n    gsap.to(item, { scale: 1.05, duration: 0.2 })\n    item.style.outline = '2px solid #6366f1'\n    return\n  }\n\n  \u002F\u002F 再点同一个：取消选中\n  if (swapSelection === item) {\n    gsap.to(item, { scale: 1, duration: 0.2 })\n    item.style.outline = ''\n    swapSelection = null\n    return\n  }\n\n  \u002F\u002F 第二次点击另一个：交换\n  const first = swapSelection\n  const second = item\n  const target = containerRef.value.querySelector('.animate-target')\n  const items = target.querySelectorAll('.swap-item')\n  const state = Flip.getState(items)\n\n  \u002F\u002F 交换 DOM 位置\n  const parent = first.parentNode\n  const placeholder = document.createElement('div')\n  parent.insertBefore(placeholder, first)\n  parent.insertBefore(first, second)\n  parent.insertBefore(second, placeholder)\n  parent.removeChild(placeholder)\n\n  Flip.from(state, {\n    duration: 0.6,\n    ease: 'power2.inOut',\n    absolute: true,\n    scale: true,\n    stagger: 0.02\n  })\n\n  \u002F\u002F 清理选中状态\n  gsap.to([first, second], { scale: 1, duration: 0.2 })\n  first.style.outline = ''\n  second.style.outline = ''\n  swapSelection = null\n}\n",[132,1617,1618,1629,1638,1656,1670,1681,1730,1734,1750,1754,1762,1767,1771,1775,1789,1810,1823,1827,1832,1843,1853,1874,1884,1888,1893,1897,1902,1914,1931,1940,1948,1952,1956,1960,1965,1977,1988,2007,2025,2040,2044,2049,2061,2083,2095,2105,2115,2126,2131,2141,2150,2159,2169,2179,2187,2192,2197,2203,2222,2232,2242,2252],{"__ignoreMap":130},[135,1619,1620,1622,1625,1627],{"class":137,"line":138},[135,1621,1233],{"class":498},[135,1623,1624],{"class":141}," swapSelection ",[135,1626,171],{"class":498},[135,1628,1241],{"class":533},[135,1630,1631,1633,1636],{"class":137,"line":145},[135,1632,599],{"class":498},[135,1634,1635],{"class":174}," 'swap'",[135,1637,1251],{"class":141},[135,1639,1640,1643,1645,1647,1649,1651,1654],{"class":137,"line":158},[135,1641,1642],{"class":141},"  const items ",[135,1644,171],{"class":498},[135,1646,913],{"class":141},[135,1648,916],{"class":167},[135,1650,738],{"class":141},[135,1652,1653],{"class":174},"'.swap-item'",[135,1655,924],{"class":141},[135,1657,1658,1661,1664,1667],{"class":137,"line":188},[135,1659,1660],{"class":141},"  items.forEach(",[135,1662,1663],{"class":1281},"item",[135,1665,1666],{"class":498}," =>",[135,1668,1669],{"class":141}," {\n",[135,1671,1672,1674,1676,1678],{"class":137,"line":205},[135,1673,1275],{"class":498},[135,1675,1278],{"class":141},[135,1677,1421],{"class":498},[135,1679,1680],{"class":141},"item.dataset.flipId) {\n",[135,1682,1683,1686,1688,1691,1694,1697,1700,1703,1706,1708,1711,1714,1717,1719,1722,1725,1728],{"class":137,"line":245},[135,1684,1685],{"class":141},"      item.dataset.flipId ",[135,1687,171],{"class":498},[135,1689,1690],{"class":174}," 'swap-'",[135,1692,1693],{"class":498}," +",[135,1695,1696],{"class":141}," Math.",[135,1698,1699],{"class":167},"random",[135,1701,1702],{"class":141},"().",[135,1704,1705],{"class":167},"toString",[135,1707,738],{"class":141},[135,1709,1710],{"class":533},"36",[135,1712,1713],{"class":141},").",[135,1715,1716],{"class":167},"slice",[135,1718,738],{"class":141},[135,1720,1721],{"class":533},"2",[135,1723,1724],{"class":141},", ",[135,1726,1727],{"class":533},"8",[135,1729,924],{"class":141},[135,1731,1732],{"class":137,"line":280},[135,1733,1319],{"class":141},[135,1735,1736,1739,1742,1744,1747],{"class":137,"line":308},[135,1737,1738],{"class":141},"    item.",[135,1740,1741],{"class":167},"addEventListener",[135,1743,738],{"class":141},[135,1745,1746],{"class":174},"'click'",[135,1748,1749],{"class":141},", handleSwapClick)\n",[135,1751,1752],{"class":137,"line":318},[135,1753,570],{"class":141},[135,1755,1756,1758,1760],{"class":137,"line":334},[135,1757,663],{"class":141},[135,1759,171],{"class":498},[135,1761,668],{"class":533},[135,1763,1764],{"class":137,"line":340},[135,1765,1766],{"class":141},"  return\n",[135,1768,1769],{"class":137,"line":349},[135,1770,575],{"class":141},[135,1772,1773],{"class":137,"line":359},[135,1774,373],{"emptyLinePlaceholder":372},[135,1776,1777,1779,1782,1784,1787],{"class":137,"line":369},[135,1778,1346],{"class":498},[135,1780,1781],{"class":167}," handleSwapClick",[135,1783,738],{"class":141},[135,1785,1786],{"class":1281},"e",[135,1788,511],{"class":141},[135,1790,1791,1793,1796,1798,1801,1804,1806,1808],{"class":137,"line":376},[135,1792,904],{"class":498},[135,1794,1795],{"class":533}," item",[135,1797,910],{"class":498},[135,1799,1800],{"class":141}," e.target.",[135,1802,1803],{"class":167},"closest",[135,1805,738],{"class":141},[135,1807,1653],{"class":174},[135,1809,924],{"class":141},[135,1811,1812,1814,1816,1818,1821],{"class":137,"line":382},[135,1813,1416],{"class":498},[135,1815,1278],{"class":141},[135,1817,1421],{"class":498},[135,1819,1820],{"class":141},"item) ",[135,1822,1438],{"class":498},[135,1824,1825],{"class":137,"line":388},[135,1826,373],{"emptyLinePlaceholder":372},[135,1828,1829],{"class":137,"line":394},[135,1830,1831],{"class":610},"  \u002F\u002F 第一次点击：选中\n",[135,1833,1834,1836,1838,1840],{"class":137,"line":400},[135,1835,1416],{"class":498},[135,1837,1278],{"class":141},[135,1839,1421],{"class":498},[135,1841,1842],{"class":141},"swapSelection) {\n",[135,1844,1845,1848,1850],{"class":137,"line":405},[135,1846,1847],{"class":141},"    swapSelection ",[135,1849,171],{"class":498},[135,1851,1852],{"class":141}," item\n",[135,1854,1855,1858,1861,1864,1867,1870,1872],{"class":137,"line":411},[135,1856,1857],{"class":141},"    gsap.",[135,1859,1860],{"class":167},"to",[135,1862,1863],{"class":141},"(item, { scale: ",[135,1865,1866],{"class":533},"1.05",[135,1868,1869],{"class":141},", duration: ",[135,1871,685],{"class":533},[135,1873,727],{"class":141},[135,1875,1876,1879,1881],{"class":137,"line":417},[135,1877,1878],{"class":141},"    item.style.outline ",[135,1880,171],{"class":498},[135,1882,1883],{"class":174}," '2px solid #6366f1'\n",[135,1885,1886],{"class":137,"line":422},[135,1887,1333],{"class":498},[135,1889,1890],{"class":137,"line":428},[135,1891,1892],{"class":141},"  }\n",[135,1894,1895],{"class":137,"line":434},[135,1896,373],{"emptyLinePlaceholder":372},[135,1898,1899],{"class":137,"line":440},[135,1900,1901],{"class":610},"  \u002F\u002F 再点同一个：取消选中\n",[135,1903,1904,1906,1909,1911],{"class":137,"line":446},[135,1905,1416],{"class":498},[135,1907,1908],{"class":141}," (swapSelection ",[135,1910,505],{"class":498},[135,1912,1913],{"class":141}," item) {\n",[135,1915,1916,1918,1920,1922,1925,1927,1929],{"class":137,"line":452},[135,1917,1857],{"class":141},[135,1919,1860],{"class":167},[135,1921,1863],{"class":141},[135,1923,1924],{"class":533},"1",[135,1926,1869],{"class":141},[135,1928,685],{"class":533},[135,1930,727],{"class":141},[135,1932,1933,1935,1937],{"class":137,"line":458},[135,1934,1878],{"class":141},[135,1936,171],{"class":498},[135,1938,1939],{"class":174}," ''\n",[135,1941,1942,1944,1946],{"class":137,"line":464},[135,1943,1847],{"class":141},[135,1945,171],{"class":498},[135,1947,1241],{"class":533},[135,1949,1950],{"class":137,"line":469},[135,1951,1333],{"class":498},[135,1953,1954],{"class":137,"line":1475},[135,1955,1892],{"class":141},[135,1957,1958],{"class":137,"line":1488},[135,1959,373],{"emptyLinePlaceholder":372},[135,1961,1962],{"class":137,"line":1510},[135,1963,1964],{"class":610},"  \u002F\u002F 第二次点击另一个：交换\n",[135,1966,1967,1969,1972,1974],{"class":137,"line":1530},[135,1968,904],{"class":498},[135,1970,1971],{"class":533}," first",[135,1973,910],{"class":498},[135,1975,1976],{"class":141}," swapSelection\n",[135,1978,1979,1981,1984,1986],{"class":137,"line":1535},[135,1980,904],{"class":498},[135,1982,1983],{"class":533}," second",[135,1985,910],{"class":498},[135,1987,1852],{"class":141},[135,1989,1990,1992,1994,1996,1999,2001,2003,2005],{"class":137,"line":1541},[135,1991,904],{"class":498},[135,1993,1359],{"class":533},[135,1995,910],{"class":498},[135,1997,1998],{"class":141}," containerRef.value.",[135,2000,1263],{"class":167},[135,2002,738],{"class":141},[135,2004,1371],{"class":174},[135,2006,924],{"class":141},[135,2008,2009,2011,2013,2015,2017,2019,2021,2023],{"class":137,"line":1552},[135,2010,904],{"class":498},[135,2012,907],{"class":533},[135,2014,910],{"class":498},[135,2016,913],{"class":141},[135,2018,916],{"class":167},[135,2020,738],{"class":141},[135,2022,1653],{"class":174},[135,2024,924],{"class":141},[135,2026,2027,2029,2032,2034,2036,2038],{"class":137,"line":1562},[135,2028,904],{"class":498},[135,2030,2031],{"class":533}," state",[135,2033,910],{"class":498},[135,2035,1457],{"class":141},[135,2037,1460],{"class":167},[135,2039,1463],{"class":141},[135,2041,2042],{"class":137,"line":1572},[135,2043,373],{"emptyLinePlaceholder":372},[135,2045,2046],{"class":137,"line":1582},[135,2047,2048],{"class":610},"  \u002F\u002F 交换 DOM 位置\n",[135,2050,2051,2053,2056,2058],{"class":137,"line":1591},[135,2052,904],{"class":498},[135,2054,2055],{"class":533}," parent",[135,2057,910],{"class":498},[135,2059,2060],{"class":141}," first.parentNode\n",[135,2062,2063,2065,2068,2070,2073,2076,2078,2081],{"class":137,"line":1596},[135,2064,904],{"class":498},[135,2066,2067],{"class":533}," placeholder",[135,2069,910],{"class":498},[135,2071,2072],{"class":141}," document.",[135,2074,2075],{"class":167},"createElement",[135,2077,738],{"class":141},[135,2079,2080],{"class":174},"'div'",[135,2082,924],{"class":141},[135,2084,2086,2089,2092],{"class":137,"line":2085},44,[135,2087,2088],{"class":141},"  parent.",[135,2090,2091],{"class":167},"insertBefore",[135,2093,2094],{"class":141},"(placeholder, first)\n",[135,2096,2098,2100,2102],{"class":137,"line":2097},45,[135,2099,2088],{"class":141},[135,2101,2091],{"class":167},[135,2103,2104],{"class":141},"(first, second)\n",[135,2106,2108,2110,2112],{"class":137,"line":2107},46,[135,2109,2088],{"class":141},[135,2111,2091],{"class":167},[135,2113,2114],{"class":141},"(second, placeholder)\n",[135,2116,2118,2120,2123],{"class":137,"line":2117},47,[135,2119,2088],{"class":141},[135,2121,2122],{"class":167},"removeChild",[135,2124,2125],{"class":141},"(placeholder)\n",[135,2127,2129],{"class":137,"line":2128},48,[135,2130,373],{"emptyLinePlaceholder":372},[135,2132,2134,2136,2138],{"class":137,"line":2133},49,[135,2135,1544],{"class":141},[135,2137,519],{"class":167},[135,2139,2140],{"class":141},"(state, {\n",[135,2142,2144,2146,2148],{"class":137,"line":2143},50,[135,2145,783],{"class":141},[135,2147,1557],{"class":533},[135,2149,537],{"class":141},[135,2151,2153,2155,2157],{"class":137,"line":2152},51,[135,2154,562],{"class":141},[135,2156,1567],{"class":174},[135,2158,537],{"class":141},[135,2160,2162,2164,2167],{"class":137,"line":2161},52,[135,2163,1585],{"class":141},[135,2165,2166],{"class":533},"true",[135,2168,537],{"class":141},[135,2170,2172,2175,2177],{"class":137,"line":2171},53,[135,2173,2174],{"class":141},"    scale: ",[135,2176,2166],{"class":533},[135,2178,537],{"class":141},[135,2180,2182,2184],{"class":137,"line":2181},54,[135,2183,985],{"class":141},[135,2185,2186],{"class":533},"0.02\n",[135,2188,2190],{"class":137,"line":2189},55,[135,2191,570],{"class":141},[135,2193,2195],{"class":137,"line":2194},56,[135,2196,373],{"emptyLinePlaceholder":372},[135,2198,2200],{"class":137,"line":2199},57,[135,2201,2202],{"class":610},"  \u002F\u002F 清理选中状态\n",[135,2204,2206,2209,2211,2214,2216,2218,2220],{"class":137,"line":2205},58,[135,2207,2208],{"class":141},"  gsap.",[135,2210,1860],{"class":167},[135,2212,2213],{"class":141},"([first, second], { scale: ",[135,2215,1924],{"class":533},[135,2217,1869],{"class":141},[135,2219,685],{"class":533},[135,2221,727],{"class":141},[135,2223,2225,2228,2230],{"class":137,"line":2224},59,[135,2226,2227],{"class":141},"  first.style.outline ",[135,2229,171],{"class":498},[135,2231,1939],{"class":174},[135,2233,2235,2238,2240],{"class":137,"line":2234},60,[135,2236,2237],{"class":141},"  second.style.outline ",[135,2239,171],{"class":498},[135,2241,1939],{"class":174},[135,2243,2245,2248,2250],{"class":137,"line":2244},61,[135,2246,2247],{"class":141},"  swapSelection ",[135,2249,171],{"class":498},[135,2251,1241],{"class":533},[135,2253,2255],{"class":137,"line":2254},62,[135,2256,575],{"class":141},[10,2258,2259],{},"看下面例子，请动画结束前不要做重复交换，这里没有代码保护：",[114,2261,2263],{"animation":2262},"swap",[164,2264,821,2266,821,2272,821,2277,821,2282,821,2287,821,2292],{"style":2265},"display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;",[164,2267,2271],{"className":2268,"style":2270},[2269],"swap-item","padding: 16px; background: #eef2ff; border-radius: 8px; cursor: pointer; text-align: center;","A",[164,2273,2276],{"className":2274,"style":2275},[2269],"padding: 16px; background: #fce7f3; border-radius: 8px; cursor: pointer; text-align: center;","B",[164,2278,2281],{"className":2279,"style":2280},[2269],"padding: 16px; background: #ecfdf5; border-radius: 8px; cursor: pointer; text-align: center;","C",[164,2283,2286],{"className":2284,"style":2285},[2269],"padding: 16px; background: #fffbeb; border-radius: 8px; cursor: pointer; text-align: center;","D",[164,2288,2291],{"className":2289,"style":2290},[2269],"padding: 16px; background: #f5f3ff; border-radius: 8px; cursor: pointer; text-align: center;","E",[164,2293,2296],{"className":2294,"style":2295},[2269],"padding: 16px; background: #fef2f2; border-radius: 8px; cursor: pointer; text-align: center;","F",[10,2298,2299,2300,2303,2304,2306],{},"高级效果在 GSAP 官方演示中被称为 ",[14,2301,2302],{},"“Gallery to Detail Flip”","（画廊到详情页的翻转\u002F无缝放大），本质上是利用 GSAP 的 ",[132,2305,80],{}," 插件实现**共享元素过渡",[10,2308,2309,2310,2313],{},"它之所以看起来神奇，核心在于“",[14,2311,2312],{},"伪装、记录、还原、补间","”这四个步骤。下面为你拆解它的原理：",[10,2315,2316,2317,2320,2321,2324,2325,2327],{},"详细面板原本是固定定位，占据了大部分屏幕的巨大容器，缩略图是网格里的一个小方块，怎么去无缝对接，我们会使用gsap里提供的一个api叫做Flip.fit方法，",[132,2318,2319],{},"Flip.fit(detail, item, { fitChild: detailImg })"," 的作用是：在瞬间通过计算，把巨大的 ",[132,2322,2323],{},"detail"," 容器缩小、平移，使其精确地盖在 ",[132,2326,1663],{}," 缩略图上面，连内部的 SVG 尺寸都完全匹配",[10,2329,2330,2331,2334,2335,2338],{},"之后通过记录，拍下快照，现在详情面板虽然看起来像缩略图，但它的 DOM 属性被 GSAP 写满了缩放的 ",[132,2332,2333],{},"transform"," 内联样式。我们调用 ",[132,2336,2337],{},"const state = Flip.getState(detail)","，把这个“伪装成小缩略图”的尺寸、位置和缩放比例记录下来",[10,2340,2341,2342,2345,2346,2349,2350],{},"记录完状态后，我们立刻用 ",[132,2343,2344],{},"gsap.set(detail, { clearProps: true })"," 把所有内联样式清空。详情面板瞬间恢复成 CSS 里定义的全屏大尺寸。同时把 ",[132,2347,2348],{},"visibility"," 设为 ",[132,2351,2352],{},"visible",[10,2354,2355,2356,2359,2360,2363,2364,2367,2368],{},"最后，",[132,2357,2358],{},"Flip.from(state)"," 会对比“快照里的小尺寸（起点）”和“当前的大尺寸（终点）”，自动计算两者之间的差异，并生成平滑的过渡动画。",[2361,2362],"br",{},"\n因为内部的 ",[132,2365,2366],{},"fitChild: detailImg"," 保证了 SVG 的比例一致，所以在用户看来，就是",[14,2369,2370],{},"缩略图被瞬间放大了",[10,2372,2373],{},"我们把详细代码放出来：",[125,2375,2377],{"className":127,"code":2376,"language":129,"meta":130,"style":130},"\u003Cscript setup>\nimport { ref, onMounted, onUnmounted, nextTick } from 'vue'\nimport { gsap } from 'gsap'\nimport { Flip } from 'gsap\u002FFlip'\ngsap.registerPlugin(Flip)\n\n\u002F\u002F 直接写死数据，不依赖任何外部传参\nconst items = [\n  { title: 'Hoop', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#0ae448', type: 'circle' },\n  { title: 'Cone', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#fec5fb', type: 'triangle' },\n  { title: 'Combo', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#00bae2', type: 'rect' },\n  { title: 'Star', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#ff8709', type: 'star' },\n  { title: 'Sparkle', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#9d95ff', type: 'diamond' },\n  { title: 'Squish', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#abff84', type: 'hexagon' },\n  { title: 'Spiral', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#0ae448', type: 'circle' },\n  { title: 'Tunnel', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#fec5fb', type: 'triangle' },\n  { title: 'Lock', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#00bae2', type: 'rect' },\n  { title: 'Windmill', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#ff8709', type: 'star' },\n  { title: 'Triangle', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#9d95ff', type: 'diamond' },\n  { title: 'Hoop', secondary: 'Lorem ipsum dolor sit amet.', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.', color: '#abff84', type: 'hexagon' }\n]\n\nconst appRef = ref(null)\nconst galleryRef = ref(null)\nconst detailRef = ref(null)\nconst detailImgRef = ref(null)\nconst detailContentRef = ref(null)\nconst textRefs = {\n  title: ref(null),\n  secondary: ref(null),\n  description: ref(null)\n}\n\nconst activeItem = ref(null)\nconst isOpen = ref(false)\nconst activeData = ref({ title: '', color: '', type: '' })\n\nfunction getSvg(color, type) {\n  const paths = {\n    circle: `\u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"${color}\" stroke-width=\"8\"\u002F>`,\n    rect: `\u003Crect x=\"15\" y=\"15\" width=\"70\" height=\"70\" rx=\"8\" stroke=\"${color}\" stroke-width=\"8\"\u002F>`,\n    triangle: `\u003Cpath d=\"M50 15 L85 80 L15 80 Z\" stroke=\"${color}\" stroke-width=\"8\" stroke-linejoin=\"round\"\u002F>`,\n    star: `\u003Cpath d=\"M50 10 L61 40 L93 40 L67 58 L77 90 L50 70 L23 90 L33 58 L7 40 L39 40 Z\" stroke=\"${color}\" stroke-width=\"6\" stroke-linejoin=\"round\"\u002F>`,\n    diamond: `\u003Cpath d=\"M50 10 L90 50 L50 90 L10 50 Z\" stroke=\"${color}\" stroke-width=\"8\" stroke-linejoin=\"round\"\u002F>`,\n    hexagon: `\u003Cpath d=\"M50 10 L85 30 L85 70 L50 90 L15 70 L15 30 Z\" stroke=\"${color}\" stroke-width=\"8\" stroke-linejoin=\"round\"\u002F>`\n  }\n  return `\u003Csvg viewBox=\"0 0 100 100\" fill=\"none\">${paths[type] || paths.circle}\u003C\u002Fsvg>`\n}\n\nonMounted(async () => {\n  await nextTick()\n  if (!detailContentRef.value) return\n\n  gsap.set(detailContentRef.value, { yPercent: -100 })\n  gsap.set(detailRef.value, { visibility: 'hidden' })\n\n  gsap.to(appRef.value, { autoAlpha: 1, duration: 0.2 })\n  gsap.from(galleryRef.value.querySelectorAll('.item'), {\n    autoAlpha: 0, yPercent: 30, stagger: 0.04\n  })\n})\n\nonUnmounted(() => {\n  gsap.killTweensOf(\"*\")\n})\n\nfunction showDetails(item, index) {\n  if (activeItem.value) return hideDetails()\n\n  const data = items[index]\n  activeData.value = data\n  \n  textRefs.title.value.innerText = data.title\n  textRefs.secondary.value.innerText = data.secondary\n  textRefs.description.value.innerText = data.text\n\n  activeItem.value = item\n  isOpen.value = true\n\n  nextTick(() => {\n    const detail = detailRef.value\n    const img = detailImgRef.value\n    const content = detailContentRef.value\n    const itemEls = galleryRef.value.querySelectorAll('.item')\n\n    Flip.fit(detail, item, { scale: true, fitChild: img })\n    const state = Flip.getState(detail)\n\n    gsap.set(detail, { clearProps: true })\n    gsap.set(detail, {\n      xPercent: -50, top: '50%', left: '50%', yPercent: -50,\n      visibility: 'visible', overflow: 'hidden'\n    })\n\n    Flip.from(state, {\n      duration: 0.5, ease: 'power2.inOut', scale: true,\n      onComplete: () => gsap.set(detail, { overflow: 'auto' })\n    }).to(content, { yPercent: 0 }, 0.2)\n\n    gsap.to(itemEls, {\n      opacity: 0.3,\n      stagger: { amount: 0.7, from: itemEls.indexOf(item), grid: 'auto' }\n    }).kill(item)\n  })\n}\n\nfunction hideDetails() {\n  if (!isOpen.value) return\n  isOpen.value = false\n\n  const detail = detailRef.value\n  const content = detailContentRef.value\n  const img = detailImgRef.value\n  const itemEls = galleryRef.value.querySelectorAll('.item')\n  const currentItem = activeItem.value\n  \n  if (!detail || !currentItem) {\n    if (detail) gsap.set(detail, { visibility: 'hidden' })\n    return\n  }\n\n  gsap.set(detail, { overflow: 'hidden' })\n  const state = Flip.getState(detail)\n  Flip.fit(detail, currentItem, { scale: true, fitChild: img })\n\n  const tl = gsap.timeline({\n    onComplete: () => {\n      activeItem.value = null\n      gsap.set(detail, { visibility: 'hidden' })\n    }\n  })\n\n  tl.to(content, { yPercent: -100 })\n    .to(itemEls, { opacity: 1, stagger: { amount: 0.7, from: itemEls.indexOf(currentItem), grid: 'auto' } }, '\u003C')\n\n  Flip.from(state, {\n    scale: true, duration: 0.5, delay: 0.2,\n    onInterrupt: () => tl.kill()\n  })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"gallery-root\">\n    \u003Cdiv ref=\"appRef\" class=\"app\">\n      \u003Cdiv ref=\"galleryRef\" class=\"gallery\">\n        \u003Cdiv\n          v-for=\"(item, i) in items\"\n          :key=\"i\"\n          class=\"item\"\n          @click.stop=\"showDetails($event.currentTarget, i)\"\n        >\n          \u003Cdiv class=\"item-svg\" v-html=\"getSvg(item.color, item.type)\" \u002F>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv \n      v-if=\"isOpen\" \n      class=\"backdrop\" \n      @click.self=\"hideDetails\" \n    >\n      \u003Cdiv ref=\"detailRef\" class=\"detail\">\n        \u003Cdiv ref=\"detailImgRef\" class=\"detail-svg\" @click=\"hideDetails\" v-html=\"getSvg(activeData.color, activeData.type)\" \u002F>\n        \u003Cdiv ref=\"detailContentRef\" class=\"content\">\n          \u003Cdiv :ref=\"el => textRefs.title.value = el\" class=\"title\">\u003C\u002Fdiv>\n          \u003Cdiv :ref=\"el => textRefs.secondary.value = el\" class=\"secondary\">\u003C\u002Fdiv>\n          \u003Cdiv :ref=\"el => textRefs.description.value = el\" class=\"description\">\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.gallery-root { position: relative; }\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 99;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.app {\n  height: 90vmin; width: 90vmin;\n  background: var(--color-just-black, #0e100f);\n  position: relative; overflow: auto;\n  color-scheme: dark; visibility: hidden;\n  margin: 0 auto;\n}\n\n.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 10px; }\n.item { cursor: pointer; }\n\n.item-svg, .detail-svg {\n  width: 100%; aspect-ratio: 1 \u002F 1;\n  display: flex; align-items: center; justify-content: center;\n  background: #1c1d1f; padding: 12%; box-sizing: border-box;\n}\n.item-svg { border-radius: 10px; }\n.detail-svg { border-radius: 10px 10px 0 0; position: relative; z-index: 1; cursor: pointer; }\n\n.item-svg :deep(svg), .detail-svg :deep(svg) { width: 100%; height: 100%; }\n\n.detail {\n  width: 90.1vmin;\n  display: flex; flex-direction: column;\n  visibility: hidden; max-height: 90vh; overflow: auto;\n}\n\n.detail .content { background: #232323; padding: 2rem 1.5rem; flex-grow: 1; }\n.detail .content > * { margin-bottom: 1rem; }\n.detail .title { font-size: 2rem; text-transform: uppercase; color: #fffce1; }\n.detail .secondary { color: lightgray; }\n.detail .description { line-height: 1.5; color: #bbbaa6; }\n\u003C\u002Fstyle>\n",[132,2378,2379,2391,2404,2416,2428,2439,2443,2448,2459,2494,2521,2548,2575,2602,2629,2654,2679,2704,2729,2754,2779,2784,2788,2806,2823,2840,2857,2874,2885,2900,2913,2926,2930,2934,2951,2968,2995,2999,3018,3029,3044,3058,3073,3088,3102,3115,3119,3151,3155,3159,3177,3188,3201,3205,3222,3236,3240,3257,3276,3294,3298,3302,3306,3319,3334,3339,3344,3363,3379,3384,3397,3408,3414,3425,3436,3447,3452,3462,3472,3477,3489,3503,3516,3529,3550,3555,3572,3588,3593,3607,3617,3646,3661,3667,3672,3681,3701,3725,3745,3750,3760,3770,3792,3803,3808,3813,3818,3827,3841,3851,3856,3867,3878,3889,3908,3921,3926,3945,3962,3967,3972,3977,3990,4005,4019,4024,4042,4054,4064,4078,4083,4088,4093,4108,4143,4148,4157,4175,4192,4197,4202,4211,4216,4225,4241,4264,4287,4296,4307,4318,4329,4340,4346,4375,4385,4395,4404,4409,4419,4432,4445,4458,4464,4487,4525,4548,4577,4604,4631,4640,4649,4658,4667,4676,4681,4694,4715,4720,4728,4742,4754,4767,4797,4810,4823,4835,4840,4845,4853,4881,4903,4924,4946,4961,4966,4971,5037,5055,5060,5073,5102,5131,5164,5169,5187,5239,5244,5288,5293,5301,5315,5336,5368,5373,5378,5422,5448,5488,5507,5536],{"__ignoreMap":130},[135,2380,2381,2383,2386,2389],{"class":137,"line":138},[135,2382,148],{"class":141},[135,2384,2385],{"class":151},"script",[135,2387,2388],{"class":167}," setup",[135,2390,155],{"class":141},[135,2392,2393,2396,2399,2401],{"class":137,"line":145},[135,2394,2395],{"class":498},"import",[135,2397,2398],{"class":141}," { ref, onMounted, onUnmounted, nextTick } ",[135,2400,519],{"class":498},[135,2402,2403],{"class":174}," 'vue'\n",[135,2405,2406,2408,2411,2413],{"class":137,"line":158},[135,2407,2395],{"class":498},[135,2409,2410],{"class":141}," { gsap } ",[135,2412,519],{"class":498},[135,2414,2415],{"class":174}," 'gsap'\n",[135,2417,2418,2420,2423,2425],{"class":137,"line":188},[135,2419,2395],{"class":498},[135,2421,2422],{"class":141}," { Flip } ",[135,2424,519],{"class":498},[135,2426,2427],{"class":174}," 'gsap\u002FFlip'\n",[135,2429,2430,2433,2436],{"class":137,"line":205},[135,2431,2432],{"class":141},"gsap.",[135,2434,2435],{"class":167},"registerPlugin",[135,2437,2438],{"class":141},"(Flip)\n",[135,2440,2441],{"class":137,"line":245},[135,2442,373],{"emptyLinePlaceholder":372},[135,2444,2445],{"class":137,"line":280},[135,2446,2447],{"class":610},"\u002F\u002F 直接写死数据，不依赖任何外部传参\n",[135,2449,2450,2452,2454,2456],{"class":137,"line":308},[135,2451,1214],{"class":498},[135,2453,907],{"class":533},[135,2455,910],{"class":498},[135,2457,2458],{"class":141}," [\n",[135,2460,2461,2464,2467,2470,2473,2476,2479,2482,2485,2488,2491],{"class":137,"line":318},[135,2462,2463],{"class":141},"  { title: ",[135,2465,2466],{"class":174},"'Hoop'",[135,2468,2469],{"class":141},", secondary: ",[135,2471,2472],{"class":174},"'Lorem ipsum dolor sit amet.'",[135,2474,2475],{"class":141},", text: ",[135,2477,2478],{"class":174},"'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'",[135,2480,2481],{"class":141},", color: ",[135,2483,2484],{"class":174},"'#0ae448'",[135,2486,2487],{"class":141},", type: ",[135,2489,2490],{"class":174},"'circle'",[135,2492,2493],{"class":141}," },\n",[135,2495,2496,2498,2501,2503,2505,2507,2509,2511,2514,2516,2519],{"class":137,"line":334},[135,2497,2463],{"class":141},[135,2499,2500],{"class":174},"'Cone'",[135,2502,2469],{"class":141},[135,2504,2472],{"class":174},[135,2506,2475],{"class":141},[135,2508,2478],{"class":174},[135,2510,2481],{"class":141},[135,2512,2513],{"class":174},"'#fec5fb'",[135,2515,2487],{"class":141},[135,2517,2518],{"class":174},"'triangle'",[135,2520,2493],{"class":141},[135,2522,2523,2525,2528,2530,2532,2534,2536,2538,2541,2543,2546],{"class":137,"line":340},[135,2524,2463],{"class":141},[135,2526,2527],{"class":174},"'Combo'",[135,2529,2469],{"class":141},[135,2531,2472],{"class":174},[135,2533,2475],{"class":141},[135,2535,2478],{"class":174},[135,2537,2481],{"class":141},[135,2539,2540],{"class":174},"'#00bae2'",[135,2542,2487],{"class":141},[135,2544,2545],{"class":174},"'rect'",[135,2547,2493],{"class":141},[135,2549,2550,2552,2555,2557,2559,2561,2563,2565,2568,2570,2573],{"class":137,"line":349},[135,2551,2463],{"class":141},[135,2553,2554],{"class":174},"'Star'",[135,2556,2469],{"class":141},[135,2558,2472],{"class":174},[135,2560,2475],{"class":141},[135,2562,2478],{"class":174},[135,2564,2481],{"class":141},[135,2566,2567],{"class":174},"'#ff8709'",[135,2569,2487],{"class":141},[135,2571,2572],{"class":174},"'star'",[135,2574,2493],{"class":141},[135,2576,2577,2579,2582,2584,2586,2588,2590,2592,2595,2597,2600],{"class":137,"line":359},[135,2578,2463],{"class":141},[135,2580,2581],{"class":174},"'Sparkle'",[135,2583,2469],{"class":141},[135,2585,2472],{"class":174},[135,2587,2475],{"class":141},[135,2589,2478],{"class":174},[135,2591,2481],{"class":141},[135,2593,2594],{"class":174},"'#9d95ff'",[135,2596,2487],{"class":141},[135,2598,2599],{"class":174},"'diamond'",[135,2601,2493],{"class":141},[135,2603,2604,2606,2609,2611,2613,2615,2617,2619,2622,2624,2627],{"class":137,"line":369},[135,2605,2463],{"class":141},[135,2607,2608],{"class":174},"'Squish'",[135,2610,2469],{"class":141},[135,2612,2472],{"class":174},[135,2614,2475],{"class":141},[135,2616,2478],{"class":174},[135,2618,2481],{"class":141},[135,2620,2621],{"class":174},"'#abff84'",[135,2623,2487],{"class":141},[135,2625,2626],{"class":174},"'hexagon'",[135,2628,2493],{"class":141},[135,2630,2631,2633,2636,2638,2640,2642,2644,2646,2648,2650,2652],{"class":137,"line":376},[135,2632,2463],{"class":141},[135,2634,2635],{"class":174},"'Spiral'",[135,2637,2469],{"class":141},[135,2639,2472],{"class":174},[135,2641,2475],{"class":141},[135,2643,2478],{"class":174},[135,2645,2481],{"class":141},[135,2647,2484],{"class":174},[135,2649,2487],{"class":141},[135,2651,2490],{"class":174},[135,2653,2493],{"class":141},[135,2655,2656,2658,2661,2663,2665,2667,2669,2671,2673,2675,2677],{"class":137,"line":382},[135,2657,2463],{"class":141},[135,2659,2660],{"class":174},"'Tunnel'",[135,2662,2469],{"class":141},[135,2664,2472],{"class":174},[135,2666,2475],{"class":141},[135,2668,2478],{"class":174},[135,2670,2481],{"class":141},[135,2672,2513],{"class":174},[135,2674,2487],{"class":141},[135,2676,2518],{"class":174},[135,2678,2493],{"class":141},[135,2680,2681,2683,2686,2688,2690,2692,2694,2696,2698,2700,2702],{"class":137,"line":388},[135,2682,2463],{"class":141},[135,2684,2685],{"class":174},"'Lock'",[135,2687,2469],{"class":141},[135,2689,2472],{"class":174},[135,2691,2475],{"class":141},[135,2693,2478],{"class":174},[135,2695,2481],{"class":141},[135,2697,2540],{"class":174},[135,2699,2487],{"class":141},[135,2701,2545],{"class":174},[135,2703,2493],{"class":141},[135,2705,2706,2708,2711,2713,2715,2717,2719,2721,2723,2725,2727],{"class":137,"line":394},[135,2707,2463],{"class":141},[135,2709,2710],{"class":174},"'Windmill'",[135,2712,2469],{"class":141},[135,2714,2472],{"class":174},[135,2716,2475],{"class":141},[135,2718,2478],{"class":174},[135,2720,2481],{"class":141},[135,2722,2567],{"class":174},[135,2724,2487],{"class":141},[135,2726,2572],{"class":174},[135,2728,2493],{"class":141},[135,2730,2731,2733,2736,2738,2740,2742,2744,2746,2748,2750,2752],{"class":137,"line":400},[135,2732,2463],{"class":141},[135,2734,2735],{"class":174},"'Triangle'",[135,2737,2469],{"class":141},[135,2739,2472],{"class":174},[135,2741,2475],{"class":141},[135,2743,2478],{"class":174},[135,2745,2481],{"class":141},[135,2747,2594],{"class":174},[135,2749,2487],{"class":141},[135,2751,2599],{"class":174},[135,2753,2493],{"class":141},[135,2755,2756,2758,2760,2762,2764,2766,2768,2770,2772,2774,2776],{"class":137,"line":405},[135,2757,2463],{"class":141},[135,2759,2466],{"class":174},[135,2761,2469],{"class":141},[135,2763,2472],{"class":174},[135,2765,2475],{"class":141},[135,2767,2478],{"class":174},[135,2769,2481],{"class":141},[135,2771,2621],{"class":174},[135,2773,2487],{"class":141},[135,2775,2626],{"class":174},[135,2777,2778],{"class":141}," }\n",[135,2780,2781],{"class":137,"line":411},[135,2782,2783],{"class":141},"]\n",[135,2785,2786],{"class":137,"line":417},[135,2787,373],{"emptyLinePlaceholder":372},[135,2789,2790,2792,2795,2797,2799,2801,2804],{"class":137,"line":422},[135,2791,1214],{"class":498},[135,2793,2794],{"class":533}," appRef",[135,2796,910],{"class":498},[135,2798,168],{"class":167},[135,2800,738],{"class":141},[135,2802,2803],{"class":533},"null",[135,2805,924],{"class":141},[135,2807,2808,2810,2813,2815,2817,2819,2821],{"class":137,"line":428},[135,2809,1214],{"class":498},[135,2811,2812],{"class":533}," galleryRef",[135,2814,910],{"class":498},[135,2816,168],{"class":167},[135,2818,738],{"class":141},[135,2820,2803],{"class":533},[135,2822,924],{"class":141},[135,2824,2825,2827,2830,2832,2834,2836,2838],{"class":137,"line":434},[135,2826,1214],{"class":498},[135,2828,2829],{"class":533}," detailRef",[135,2831,910],{"class":498},[135,2833,168],{"class":167},[135,2835,738],{"class":141},[135,2837,2803],{"class":533},[135,2839,924],{"class":141},[135,2841,2842,2844,2847,2849,2851,2853,2855],{"class":137,"line":440},[135,2843,1214],{"class":498},[135,2845,2846],{"class":533}," detailImgRef",[135,2848,910],{"class":498},[135,2850,168],{"class":167},[135,2852,738],{"class":141},[135,2854,2803],{"class":533},[135,2856,924],{"class":141},[135,2858,2859,2861,2864,2866,2868,2870,2872],{"class":137,"line":446},[135,2860,1214],{"class":498},[135,2862,2863],{"class":533}," detailContentRef",[135,2865,910],{"class":498},[135,2867,168],{"class":167},[135,2869,738],{"class":141},[135,2871,2803],{"class":533},[135,2873,924],{"class":141},[135,2875,2876,2878,2881,2883],{"class":137,"line":452},[135,2877,1214],{"class":498},[135,2879,2880],{"class":533}," textRefs",[135,2882,910],{"class":498},[135,2884,1669],{"class":141},[135,2886,2887,2890,2893,2895,2897],{"class":137,"line":458},[135,2888,2889],{"class":141},"  title: ",[135,2891,2892],{"class":167},"ref",[135,2894,738],{"class":141},[135,2896,2803],{"class":533},[135,2898,2899],{"class":141},"),\n",[135,2901,2902,2905,2907,2909,2911],{"class":137,"line":464},[135,2903,2904],{"class":141},"  secondary: ",[135,2906,2892],{"class":167},[135,2908,738],{"class":141},[135,2910,2803],{"class":533},[135,2912,2899],{"class":141},[135,2914,2915,2918,2920,2922,2924],{"class":137,"line":469},[135,2916,2917],{"class":141},"  description: ",[135,2919,2892],{"class":167},[135,2921,738],{"class":141},[135,2923,2803],{"class":533},[135,2925,924],{"class":141},[135,2927,2928],{"class":137,"line":1475},[135,2929,575],{"class":141},[135,2931,2932],{"class":137,"line":1488},[135,2933,373],{"emptyLinePlaceholder":372},[135,2935,2936,2938,2941,2943,2945,2947,2949],{"class":137,"line":1510},[135,2937,1214],{"class":498},[135,2939,2940],{"class":533}," activeItem",[135,2942,910],{"class":498},[135,2944,168],{"class":167},[135,2946,738],{"class":141},[135,2948,2803],{"class":533},[135,2950,924],{"class":141},[135,2952,2953,2955,2958,2960,2962,2964,2966],{"class":137,"line":1530},[135,2954,1214],{"class":498},[135,2956,2957],{"class":533}," isOpen",[135,2959,910],{"class":498},[135,2961,168],{"class":167},[135,2963,738],{"class":141},[135,2965,1226],{"class":533},[135,2967,924],{"class":141},[135,2969,2970,2972,2975,2977,2979,2982,2985,2987,2989,2991,2993],{"class":137,"line":1535},[135,2971,1214],{"class":498},[135,2973,2974],{"class":533}," activeData",[135,2976,910],{"class":498},[135,2978,168],{"class":167},[135,2980,2981],{"class":141},"({ title: ",[135,2983,2984],{"class":174},"''",[135,2986,2481],{"class":141},[135,2988,2984],{"class":174},[135,2990,2487],{"class":141},[135,2992,2984],{"class":174},[135,2994,727],{"class":141},[135,2996,2997],{"class":137,"line":1541},[135,2998,373],{"emptyLinePlaceholder":372},[135,3000,3001,3003,3006,3008,3011,3013,3016],{"class":137,"line":1552},[135,3002,1346],{"class":498},[135,3004,3005],{"class":167}," getSvg",[135,3007,738],{"class":141},[135,3009,3010],{"class":1281},"color",[135,3012,1724],{"class":141},[135,3014,3015],{"class":1281},"type",[135,3017,511],{"class":141},[135,3019,3020,3022,3025,3027],{"class":137,"line":1562},[135,3021,904],{"class":498},[135,3023,3024],{"class":533}," paths",[135,3026,910],{"class":498},[135,3028,1669],{"class":141},[135,3030,3031,3034,3037,3039,3042],{"class":137,"line":1572},[135,3032,3033],{"class":141},"    circle: ",[135,3035,3036],{"class":174},"`\u003Ccircle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"${",[135,3038,3010],{"class":141},[135,3040,3041],{"class":174},"}\" stroke-width=\"8\"\u002F>`",[135,3043,537],{"class":141},[135,3045,3046,3049,3052,3054,3056],{"class":137,"line":1582},[135,3047,3048],{"class":141},"    rect: ",[135,3050,3051],{"class":174},"`\u003Crect x=\"15\" y=\"15\" width=\"70\" height=\"70\" rx=\"8\" stroke=\"${",[135,3053,3010],{"class":141},[135,3055,3041],{"class":174},[135,3057,537],{"class":141},[135,3059,3060,3063,3066,3068,3071],{"class":137,"line":1591},[135,3061,3062],{"class":141},"    triangle: ",[135,3064,3065],{"class":174},"`\u003Cpath d=\"M50 15 L85 80 L15 80 Z\" stroke=\"${",[135,3067,3010],{"class":141},[135,3069,3070],{"class":174},"}\" stroke-width=\"8\" stroke-linejoin=\"round\"\u002F>`",[135,3072,537],{"class":141},[135,3074,3075,3078,3081,3083,3086],{"class":137,"line":1596},[135,3076,3077],{"class":141},"    star: ",[135,3079,3080],{"class":174},"`\u003Cpath d=\"M50 10 L61 40 L93 40 L67 58 L77 90 L50 70 L23 90 L33 58 L7 40 L39 40 Z\" stroke=\"${",[135,3082,3010],{"class":141},[135,3084,3085],{"class":174},"}\" stroke-width=\"6\" stroke-linejoin=\"round\"\u002F>`",[135,3087,537],{"class":141},[135,3089,3090,3093,3096,3098,3100],{"class":137,"line":2085},[135,3091,3092],{"class":141},"    diamond: ",[135,3094,3095],{"class":174},"`\u003Cpath d=\"M50 10 L90 50 L50 90 L10 50 Z\" stroke=\"${",[135,3097,3010],{"class":141},[135,3099,3070],{"class":174},[135,3101,537],{"class":141},[135,3103,3104,3107,3110,3112],{"class":137,"line":2097},[135,3105,3106],{"class":141},"    hexagon: ",[135,3108,3109],{"class":174},"`\u003Cpath d=\"M50 10 L85 30 L85 70 L50 90 L15 70 L15 30 Z\" stroke=\"${",[135,3111,3010],{"class":141},[135,3113,3114],{"class":174},"}\" stroke-width=\"8\" stroke-linejoin=\"round\"\u002F>`\n",[135,3116,3117],{"class":137,"line":2107},[135,3118,1892],{"class":141},[135,3120,3121,3123,3126,3129,3132,3134,3137,3140,3142,3145,3148],{"class":137,"line":2117},[135,3122,673],{"class":498},[135,3124,3125],{"class":174}," `\u003Csvg viewBox=\"0 0 100 100\" fill=\"none\">${",[135,3127,3128],{"class":141},"paths",[135,3130,3131],{"class":174},"[",[135,3133,3015],{"class":141},[135,3135,3136],{"class":174},"] ",[135,3138,3139],{"class":498},"||",[135,3141,3024],{"class":141},[135,3143,3144],{"class":174},".",[135,3146,3147],{"class":141},"circle",[135,3149,3150],{"class":174},"}\u003C\u002Fsvg>`\n",[135,3152,3153],{"class":137,"line":2128},[135,3154,575],{"class":141},[135,3156,3157],{"class":137,"line":2133},[135,3158,373],{"emptyLinePlaceholder":372},[135,3160,3161,3164,3166,3169,3172,3175],{"class":137,"line":2143},[135,3162,3163],{"class":167},"onMounted",[135,3165,738],{"class":141},[135,3167,3168],{"class":498},"async",[135,3170,3171],{"class":141}," () ",[135,3173,3174],{"class":498},"=>",[135,3176,1669],{"class":141},[135,3178,3179,3182,3185],{"class":137,"line":2152},[135,3180,3181],{"class":498},"  await",[135,3183,3184],{"class":167}," nextTick",[135,3186,3187],{"class":141},"()\n",[135,3189,3190,3192,3194,3196,3199],{"class":137,"line":2161},[135,3191,1416],{"class":498},[135,3193,1278],{"class":141},[135,3195,1421],{"class":498},[135,3197,3198],{"class":141},"detailContentRef.value) ",[135,3200,1438],{"class":498},[135,3202,3203],{"class":137,"line":2171},[135,3204,373],{"emptyLinePlaceholder":372},[135,3206,3207,3209,3212,3215,3217,3220],{"class":137,"line":2181},[135,3208,2208],{"class":141},[135,3210,3211],{"class":167},"set",[135,3213,3214],{"class":141},"(detailContentRef.value, { yPercent: ",[135,3216,530],{"class":498},[135,3218,3219],{"class":533},"100",[135,3221,727],{"class":141},[135,3223,3224,3226,3228,3231,3234],{"class":137,"line":2189},[135,3225,2208],{"class":141},[135,3227,3211],{"class":167},[135,3229,3230],{"class":141},"(detailRef.value, { visibility: ",[135,3232,3233],{"class":174},"'hidden'",[135,3235,727],{"class":141},[135,3237,3238],{"class":137,"line":2194},[135,3239,373],{"emptyLinePlaceholder":372},[135,3241,3242,3244,3246,3249,3251,3253,3255],{"class":137,"line":2199},[135,3243,2208],{"class":141},[135,3245,1860],{"class":167},[135,3247,3248],{"class":141},"(appRef.value, { autoAlpha: ",[135,3250,1924],{"class":533},[135,3252,1869],{"class":141},[135,3254,685],{"class":533},[135,3256,727],{"class":141},[135,3258,3259,3261,3263,3266,3268,3270,3273],{"class":137,"line":2205},[135,3260,2208],{"class":141},[135,3262,519],{"class":167},[135,3264,3265],{"class":141},"(galleryRef.value.",[135,3267,916],{"class":167},[135,3269,738],{"class":141},[135,3271,3272],{"class":174},"'.item'",[135,3274,3275],{"class":141},"), {\n",[135,3277,3278,3281,3283,3286,3289,3291],{"class":137,"line":2224},[135,3279,3280],{"class":141},"    autoAlpha: ",[135,3282,545],{"class":533},[135,3284,3285],{"class":141},", yPercent: ",[135,3287,3288],{"class":533},"30",[135,3290,788],{"class":141},[135,3292,3293],{"class":533},"0.04\n",[135,3295,3296],{"class":137,"line":2234},[135,3297,570],{"class":141},[135,3299,3300],{"class":137,"line":2244},[135,3301,461],{"class":141},[135,3303,3304],{"class":137,"line":2254},[135,3305,373],{"emptyLinePlaceholder":372},[135,3307,3309,3312,3315,3317],{"class":137,"line":3308},63,[135,3310,3311],{"class":167},"onUnmounted",[135,3313,3314],{"class":141},"(() ",[135,3316,3174],{"class":498},[135,3318,1669],{"class":141},[135,3320,3322,3324,3327,3329,3332],{"class":137,"line":3321},64,[135,3323,2208],{"class":141},[135,3325,3326],{"class":167},"killTweensOf",[135,3328,738],{"class":141},[135,3330,3331],{"class":174},"\"*\"",[135,3333,924],{"class":141},[135,3335,3337],{"class":137,"line":3336},65,[135,3338,461],{"class":141},[135,3340,3342],{"class":137,"line":3341},66,[135,3343,373],{"emptyLinePlaceholder":372},[135,3345,3347,3349,3352,3354,3356,3358,3361],{"class":137,"line":3346},67,[135,3348,1346],{"class":498},[135,3350,3351],{"class":167}," showDetails",[135,3353,738],{"class":141},[135,3355,1663],{"class":1281},[135,3357,1724],{"class":141},[135,3359,3360],{"class":1281},"index",[135,3362,511],{"class":141},[135,3364,3366,3368,3371,3374,3377],{"class":137,"line":3365},68,[135,3367,1416],{"class":498},[135,3369,3370],{"class":141}," (activeItem.value) ",[135,3372,3373],{"class":498},"return",[135,3375,3376],{"class":167}," hideDetails",[135,3378,3187],{"class":141},[135,3380,3382],{"class":137,"line":3381},69,[135,3383,373],{"emptyLinePlaceholder":372},[135,3385,3387,3389,3392,3394],{"class":137,"line":3386},70,[135,3388,904],{"class":498},[135,3390,3391],{"class":533}," data",[135,3393,910],{"class":498},[135,3395,3396],{"class":141}," items[index]\n",[135,3398,3400,3403,3405],{"class":137,"line":3399},71,[135,3401,3402],{"class":141},"  activeData.value ",[135,3404,171],{"class":498},[135,3406,3407],{"class":141}," data\n",[135,3409,3411],{"class":137,"line":3410},72,[135,3412,3413],{"class":141},"  \n",[135,3415,3417,3420,3422],{"class":137,"line":3416},73,[135,3418,3419],{"class":141},"  textRefs.title.value.innerText ",[135,3421,171],{"class":498},[135,3423,3424],{"class":141}," data.title\n",[135,3426,3428,3431,3433],{"class":137,"line":3427},74,[135,3429,3430],{"class":141},"  textRefs.secondary.value.innerText ",[135,3432,171],{"class":498},[135,3434,3435],{"class":141}," data.secondary\n",[135,3437,3439,3442,3444],{"class":137,"line":3438},75,[135,3440,3441],{"class":141},"  textRefs.description.value.innerText ",[135,3443,171],{"class":498},[135,3445,3446],{"class":141}," data.text\n",[135,3448,3450],{"class":137,"line":3449},76,[135,3451,373],{"emptyLinePlaceholder":372},[135,3453,3455,3458,3460],{"class":137,"line":3454},77,[135,3456,3457],{"class":141},"  activeItem.value ",[135,3459,171],{"class":498},[135,3461,1852],{"class":141},[135,3463,3465,3468,3470],{"class":137,"line":3464},78,[135,3466,3467],{"class":141},"  isOpen.value ",[135,3469,171],{"class":498},[135,3471,668],{"class":533},[135,3473,3475],{"class":137,"line":3474},79,[135,3476,373],{"emptyLinePlaceholder":372},[135,3478,3480,3483,3485,3487],{"class":137,"line":3479},80,[135,3481,3482],{"class":167},"  nextTick",[135,3484,3314],{"class":141},[135,3486,3174],{"class":498},[135,3488,1669],{"class":141},[135,3490,3492,3495,3498,3500],{"class":137,"line":3491},81,[135,3493,3494],{"class":498},"    const",[135,3496,3497],{"class":533}," detail",[135,3499,910],{"class":498},[135,3501,3502],{"class":141}," detailRef.value\n",[135,3504,3506,3508,3511,3513],{"class":137,"line":3505},82,[135,3507,3494],{"class":498},[135,3509,3510],{"class":533}," img",[135,3512,910],{"class":498},[135,3514,3515],{"class":141}," detailImgRef.value\n",[135,3517,3519,3521,3524,3526],{"class":137,"line":3518},83,[135,3520,3494],{"class":498},[135,3522,3523],{"class":533}," content",[135,3525,910],{"class":498},[135,3527,3528],{"class":141}," detailContentRef.value\n",[135,3530,3532,3534,3537,3539,3542,3544,3546,3548],{"class":137,"line":3531},84,[135,3533,3494],{"class":498},[135,3535,3536],{"class":533}," itemEls",[135,3538,910],{"class":498},[135,3540,3541],{"class":141}," galleryRef.value.",[135,3543,916],{"class":167},[135,3545,738],{"class":141},[135,3547,3272],{"class":174},[135,3549,924],{"class":141},[135,3551,3553],{"class":137,"line":3552},85,[135,3554,373],{"emptyLinePlaceholder":372},[135,3556,3558,3561,3564,3567,3569],{"class":137,"line":3557},86,[135,3559,3560],{"class":141},"    Flip.",[135,3562,3563],{"class":167},"fit",[135,3565,3566],{"class":141},"(detail, item, { scale: ",[135,3568,2166],{"class":533},[135,3570,3571],{"class":141},", fitChild: img })\n",[135,3573,3575,3577,3579,3581,3583,3585],{"class":137,"line":3574},87,[135,3576,3494],{"class":498},[135,3578,2031],{"class":533},[135,3580,910],{"class":498},[135,3582,1457],{"class":141},[135,3584,1460],{"class":167},[135,3586,3587],{"class":141},"(detail)\n",[135,3589,3591],{"class":137,"line":3590},88,[135,3592,373],{"emptyLinePlaceholder":372},[135,3594,3596,3598,3600,3603,3605],{"class":137,"line":3595},89,[135,3597,1857],{"class":141},[135,3599,3211],{"class":167},[135,3601,3602],{"class":141},"(detail, { clearProps: ",[135,3604,2166],{"class":533},[135,3606,727],{"class":141},[135,3608,3610,3612,3614],{"class":137,"line":3609},90,[135,3611,1857],{"class":141},[135,3613,3211],{"class":167},[135,3615,3616],{"class":141},"(detail, {\n",[135,3618,3620,3623,3625,3627,3630,3633,3636,3638,3640,3642,3644],{"class":137,"line":3619},91,[135,3621,3622],{"class":141},"      xPercent: ",[135,3624,530],{"class":498},[135,3626,962],{"class":533},[135,3628,3629],{"class":141},", top: ",[135,3631,3632],{"class":174},"'50%'",[135,3634,3635],{"class":141},", left: ",[135,3637,3632],{"class":174},[135,3639,3285],{"class":141},[135,3641,530],{"class":498},[135,3643,962],{"class":533},[135,3645,537],{"class":141},[135,3647,3649,3652,3655,3658],{"class":137,"line":3648},92,[135,3650,3651],{"class":141},"      visibility: ",[135,3653,3654],{"class":174},"'visible'",[135,3656,3657],{"class":141},", overflow: ",[135,3659,3660],{"class":174},"'hidden'\n",[135,3662,3664],{"class":137,"line":3663},93,[135,3665,3666],{"class":141},"    })\n",[135,3668,3670],{"class":137,"line":3669},94,[135,3671,373],{"emptyLinePlaceholder":372},[135,3673,3675,3677,3679],{"class":137,"line":3674},95,[135,3676,3560],{"class":141},[135,3678,519],{"class":167},[135,3680,2140],{"class":141},[135,3682,3684,3687,3689,3692,3694,3697,3699],{"class":137,"line":3683},96,[135,3685,3686],{"class":141},"      duration: ",[135,3688,684],{"class":533},[135,3690,3691],{"class":141},", ease: ",[135,3693,1567],{"class":174},[135,3695,3696],{"class":141},", scale: ",[135,3698,2166],{"class":533},[135,3700,537],{"class":141},[135,3702,3704,3707,3710,3712,3715,3717,3720,3723],{"class":137,"line":3703},97,[135,3705,3706],{"class":167},"      onComplete",[135,3708,3709],{"class":141},": () ",[135,3711,3174],{"class":498},[135,3713,3714],{"class":141}," gsap.",[135,3716,3211],{"class":167},[135,3718,3719],{"class":141},"(detail, { overflow: ",[135,3721,3722],{"class":174},"'auto'",[135,3724,727],{"class":141},[135,3726,3728,3731,3733,3736,3738,3741,3743],{"class":137,"line":3727},98,[135,3729,3730],{"class":141},"    }).",[135,3732,1860],{"class":167},[135,3734,3735],{"class":141},"(content, { yPercent: ",[135,3737,545],{"class":533},[135,3739,3740],{"class":141}," }, ",[135,3742,685],{"class":533},[135,3744,924],{"class":141},[135,3746,3748],{"class":137,"line":3747},99,[135,3749,373],{"emptyLinePlaceholder":372},[135,3751,3753,3755,3757],{"class":137,"line":3752},100,[135,3754,1857],{"class":141},[135,3756,1860],{"class":167},[135,3758,3759],{"class":141},"(itemEls, {\n",[135,3761,3763,3766,3768],{"class":137,"line":3762},101,[135,3764,3765],{"class":141},"      opacity: ",[135,3767,117],{"class":533},[135,3769,537],{"class":141},[135,3771,3773,3776,3779,3782,3785,3788,3790],{"class":137,"line":3772},102,[135,3774,3775],{"class":141},"      stagger: { amount: ",[135,3777,3778],{"class":533},"0.7",[135,3780,3781],{"class":141},", from: itemEls.",[135,3783,3784],{"class":167},"indexOf",[135,3786,3787],{"class":141},"(item), grid: ",[135,3789,3722],{"class":174},[135,3791,2778],{"class":141},[135,3793,3795,3797,3800],{"class":137,"line":3794},103,[135,3796,3730],{"class":141},[135,3798,3799],{"class":167},"kill",[135,3801,3802],{"class":141},"(item)\n",[135,3804,3806],{"class":137,"line":3805},104,[135,3807,570],{"class":141},[135,3809,3811],{"class":137,"line":3810},105,[135,3812,575],{"class":141},[135,3814,3816],{"class":137,"line":3815},106,[135,3817,373],{"emptyLinePlaceholder":372},[135,3819,3821,3823,3825],{"class":137,"line":3820},107,[135,3822,1346],{"class":498},[135,3824,3376],{"class":167},[135,3826,1352],{"class":141},[135,3828,3830,3832,3834,3836,3839],{"class":137,"line":3829},108,[135,3831,1416],{"class":498},[135,3833,1278],{"class":141},[135,3835,1421],{"class":498},[135,3837,3838],{"class":141},"isOpen.value) ",[135,3840,1438],{"class":498},[135,3842,3844,3846,3848],{"class":137,"line":3843},109,[135,3845,3467],{"class":141},[135,3847,171],{"class":498},[135,3849,3850],{"class":533}," false\n",[135,3852,3854],{"class":137,"line":3853},110,[135,3855,373],{"emptyLinePlaceholder":372},[135,3857,3859,3861,3863,3865],{"class":137,"line":3858},111,[135,3860,904],{"class":498},[135,3862,3497],{"class":533},[135,3864,910],{"class":498},[135,3866,3502],{"class":141},[135,3868,3870,3872,3874,3876],{"class":137,"line":3869},112,[135,3871,904],{"class":498},[135,3873,3523],{"class":533},[135,3875,910],{"class":498},[135,3877,3528],{"class":141},[135,3879,3881,3883,3885,3887],{"class":137,"line":3880},113,[135,3882,904],{"class":498},[135,3884,3510],{"class":533},[135,3886,910],{"class":498},[135,3888,3515],{"class":141},[135,3890,3892,3894,3896,3898,3900,3902,3904,3906],{"class":137,"line":3891},114,[135,3893,904],{"class":498},[135,3895,3536],{"class":533},[135,3897,910],{"class":498},[135,3899,3541],{"class":141},[135,3901,916],{"class":167},[135,3903,738],{"class":141},[135,3905,3272],{"class":174},[135,3907,924],{"class":141},[135,3909,3911,3913,3916,3918],{"class":137,"line":3910},115,[135,3912,904],{"class":498},[135,3914,3915],{"class":533}," currentItem",[135,3917,910],{"class":498},[135,3919,3920],{"class":141}," activeItem.value\n",[135,3922,3924],{"class":137,"line":3923},116,[135,3925,3413],{"class":141},[135,3927,3929,3931,3933,3935,3938,3940,3942],{"class":137,"line":3928},117,[135,3930,1416],{"class":498},[135,3932,1278],{"class":141},[135,3934,1421],{"class":498},[135,3936,3937],{"class":141},"detail ",[135,3939,3139],{"class":498},[135,3941,1432],{"class":498},[135,3943,3944],{"class":141},"currentItem) {\n",[135,3946,3948,3950,3953,3955,3958,3960],{"class":137,"line":3947},118,[135,3949,1275],{"class":498},[135,3951,3952],{"class":141}," (detail) gsap.",[135,3954,3211],{"class":167},[135,3956,3957],{"class":141},"(detail, { visibility: ",[135,3959,3233],{"class":174},[135,3961,727],{"class":141},[135,3963,3965],{"class":137,"line":3964},119,[135,3966,1333],{"class":498},[135,3968,3970],{"class":137,"line":3969},120,[135,3971,1892],{"class":141},[135,3973,3975],{"class":137,"line":3974},121,[135,3976,373],{"emptyLinePlaceholder":372},[135,3978,3980,3982,3984,3986,3988],{"class":137,"line":3979},122,[135,3981,2208],{"class":141},[135,3983,3211],{"class":167},[135,3985,3719],{"class":141},[135,3987,3233],{"class":174},[135,3989,727],{"class":141},[135,3991,3993,3995,3997,3999,4001,4003],{"class":137,"line":3992},123,[135,3994,904],{"class":498},[135,3996,2031],{"class":533},[135,3998,910],{"class":498},[135,4000,1457],{"class":141},[135,4002,1460],{"class":167},[135,4004,3587],{"class":141},[135,4006,4008,4010,4012,4015,4017],{"class":137,"line":4007},124,[135,4009,1544],{"class":141},[135,4011,3563],{"class":167},[135,4013,4014],{"class":141},"(detail, currentItem, { scale: ",[135,4016,2166],{"class":533},[135,4018,3571],{"class":141},[135,4020,4022],{"class":137,"line":4021},125,[135,4023,373],{"emptyLinePlaceholder":372},[135,4025,4027,4029,4032,4034,4036,4039],{"class":137,"line":4026},126,[135,4028,904],{"class":498},[135,4030,4031],{"class":533}," tl",[135,4033,910],{"class":498},[135,4035,3714],{"class":141},[135,4037,4038],{"class":167},"timeline",[135,4040,4041],{"class":141},"({\n",[135,4043,4045,4048,4050,4052],{"class":137,"line":4044},127,[135,4046,4047],{"class":167},"    onComplete",[135,4049,3709],{"class":141},[135,4051,3174],{"class":498},[135,4053,1669],{"class":141},[135,4055,4057,4060,4062],{"class":137,"line":4056},128,[135,4058,4059],{"class":141},"      activeItem.value ",[135,4061,171],{"class":498},[135,4063,1241],{"class":533},[135,4065,4067,4070,4072,4074,4076],{"class":137,"line":4066},129,[135,4068,4069],{"class":141},"      gsap.",[135,4071,3211],{"class":167},[135,4073,3957],{"class":141},[135,4075,3233],{"class":174},[135,4077,727],{"class":141},[135,4079,4081],{"class":137,"line":4080},130,[135,4082,1319],{"class":141},[135,4084,4086],{"class":137,"line":4085},131,[135,4087,570],{"class":141},[135,4089,4091],{"class":137,"line":4090},132,[135,4092,373],{"emptyLinePlaceholder":372},[135,4094,4096,4098,4100,4102,4104,4106],{"class":137,"line":4095},133,[135,4097,516],{"class":141},[135,4099,1860],{"class":167},[135,4101,3735],{"class":141},[135,4103,530],{"class":498},[135,4105,3219],{"class":533},[135,4107,727],{"class":141},[135,4109,4111,4114,4116,4119,4121,4124,4126,4128,4130,4133,4135,4138,4141],{"class":137,"line":4110},134,[135,4112,4113],{"class":141},"    .",[135,4115,1860],{"class":167},[135,4117,4118],{"class":141},"(itemEls, { opacity: ",[135,4120,1924],{"class":533},[135,4122,4123],{"class":141},", stagger: { amount: ",[135,4125,3778],{"class":533},[135,4127,3781],{"class":141},[135,4129,3784],{"class":167},[135,4131,4132],{"class":141},"(currentItem), grid: ",[135,4134,3722],{"class":174},[135,4136,4137],{"class":141}," } }, ",[135,4139,4140],{"class":174},"'\u003C'",[135,4142,924],{"class":141},[135,4144,4146],{"class":137,"line":4145},135,[135,4147,373],{"emptyLinePlaceholder":372},[135,4149,4151,4153,4155],{"class":137,"line":4150},136,[135,4152,1544],{"class":141},[135,4154,519],{"class":167},[135,4156,2140],{"class":141},[135,4158,4160,4162,4164,4166,4168,4171,4173],{"class":137,"line":4159},137,[135,4161,2174],{"class":141},[135,4163,2166],{"class":533},[135,4165,1869],{"class":141},[135,4167,684],{"class":533},[135,4169,4170],{"class":141},", delay: ",[135,4172,685],{"class":533},[135,4174,537],{"class":141},[135,4176,4178,4181,4183,4185,4188,4190],{"class":137,"line":4177},138,[135,4179,4180],{"class":167},"    onInterrupt",[135,4182,3709],{"class":141},[135,4184,3174],{"class":498},[135,4186,4187],{"class":141}," tl.",[135,4189,3799],{"class":167},[135,4191,3187],{"class":141},[135,4193,4195],{"class":137,"line":4194},139,[135,4196,570],{"class":141},[135,4198,4200],{"class":137,"line":4199},140,[135,4201,575],{"class":141},[135,4203,4205,4207,4209],{"class":137,"line":4204},141,[135,4206,362],{"class":141},[135,4208,2385],{"class":151},[135,4210,155],{"class":141},[135,4212,4214],{"class":137,"line":4213},142,[135,4215,373],{"emptyLinePlaceholder":372},[135,4217,4219,4221,4223],{"class":137,"line":4218},143,[135,4220,148],{"class":141},[135,4222,152],{"class":151},[135,4224,155],{"class":141},[135,4226,4228,4230,4232,4234,4236,4239],{"class":137,"line":4227},144,[135,4229,161],{"class":141},[135,4231,164],{"class":151},[135,4233,178],{"class":167},[135,4235,171],{"class":141},[135,4237,4238],{"class":174},"\"gallery-root\"",[135,4240,155],{"class":141},[135,4242,4244,4246,4248,4250,4252,4255,4257,4259,4262],{"class":137,"line":4243},145,[135,4245,191],{"class":141},[135,4247,164],{"class":151},[135,4249,168],{"class":167},[135,4251,171],{"class":141},[135,4253,4254],{"class":174},"\"appRef\"",[135,4256,178],{"class":167},[135,4258,171],{"class":141},[135,4260,4261],{"class":174},"\"app\"",[135,4263,155],{"class":141},[135,4265,4267,4269,4271,4273,4275,4278,4280,4282,4285],{"class":137,"line":4266},146,[135,4268,208],{"class":141},[135,4270,164],{"class":151},[135,4272,168],{"class":167},[135,4274,171],{"class":141},[135,4276,4277],{"class":174},"\"galleryRef\"",[135,4279,178],{"class":167},[135,4281,171],{"class":141},[135,4283,4284],{"class":174},"\"gallery\"",[135,4286,155],{"class":141},[135,4288,4290,4293],{"class":137,"line":4289},147,[135,4291,4292],{"class":141},"        \u003C",[135,4294,4295],{"class":151},"div\n",[135,4297,4299,4302,4304],{"class":137,"line":4298},148,[135,4300,4301],{"class":167},"          v-for",[135,4303,171],{"class":141},[135,4305,4306],{"class":174},"\"(item, i) in items\"\n",[135,4308,4310,4313,4315],{"class":137,"line":4309},149,[135,4311,4312],{"class":167},"          :key",[135,4314,171],{"class":141},[135,4316,4317],{"class":174},"\"i\"\n",[135,4319,4321,4324,4326],{"class":137,"line":4320},150,[135,4322,4323],{"class":167},"          class",[135,4325,171],{"class":141},[135,4327,4328],{"class":174},"\"item\"\n",[135,4330,4332,4335,4337],{"class":137,"line":4331},151,[135,4333,4334],{"class":167},"          @click.stop",[135,4336,171],{"class":141},[135,4338,4339],{"class":174},"\"showDetails($event.currentTarget, i)\"\n",[135,4341,4343],{"class":137,"line":4342},152,[135,4344,4345],{"class":141},"        >\n",[135,4347,4349,4352,4354,4356,4358,4361,4364,4366,4369,4373],{"class":137,"line":4348},153,[135,4350,4351],{"class":141},"          \u003C",[135,4353,164],{"class":151},[135,4355,178],{"class":167},[135,4357,171],{"class":141},[135,4359,4360],{"class":174},"\"item-svg\"",[135,4362,4363],{"class":167}," v-html",[135,4365,171],{"class":141},[135,4367,4368],{"class":174},"\"getSvg(item.color, item.type)\"",[135,4370,4372],{"class":4371},"s7hpK"," \u002F",[135,4374,155],{"class":141},[135,4376,4378,4381,4383],{"class":137,"line":4377},154,[135,4379,4380],{"class":141},"        \u003C\u002F",[135,4382,164],{"class":151},[135,4384,155],{"class":141},[135,4386,4388,4391,4393],{"class":137,"line":4387},155,[135,4389,4390],{"class":141},"      \u003C\u002F",[135,4392,164],{"class":151},[135,4394,155],{"class":141},[135,4396,4398,4400,4402],{"class":137,"line":4397},156,[135,4399,311],{"class":141},[135,4401,164],{"class":151},[135,4403,155],{"class":141},[135,4405,4407],{"class":137,"line":4406},157,[135,4408,373],{"emptyLinePlaceholder":372},[135,4410,4412,4414,4416],{"class":137,"line":4411},158,[135,4413,191],{"class":141},[135,4415,164],{"class":151},[135,4417,4418],{"class":141}," \n",[135,4420,4422,4425,4427,4430],{"class":137,"line":4421},159,[135,4423,4424],{"class":167},"      v-if",[135,4426,171],{"class":141},[135,4428,4429],{"class":174},"\"isOpen\"",[135,4431,4418],{"class":141},[135,4433,4435,4438,4440,4443],{"class":137,"line":4434},160,[135,4436,4437],{"class":167},"      class",[135,4439,171],{"class":141},[135,4441,4442],{"class":174},"\"backdrop\"",[135,4444,4418],{"class":141},[135,4446,4448,4451,4453,4456],{"class":137,"line":4447},161,[135,4449,4450],{"class":167},"      @click.self",[135,4452,171],{"class":141},[135,4454,4455],{"class":174},"\"hideDetails\"",[135,4457,4418],{"class":141},[135,4459,4461],{"class":137,"line":4460},162,[135,4462,4463],{"class":141},"    >\n",[135,4465,4467,4469,4471,4473,4475,4478,4480,4482,4485],{"class":137,"line":4466},163,[135,4468,208],{"class":141},[135,4470,164],{"class":151},[135,4472,168],{"class":167},[135,4474,171],{"class":141},[135,4476,4477],{"class":174},"\"detailRef\"",[135,4479,178],{"class":167},[135,4481,171],{"class":141},[135,4483,4484],{"class":174},"\"detail\"",[135,4486,155],{"class":141},[135,4488,4490,4492,4494,4496,4498,4501,4503,4505,4508,4510,4512,4514,4516,4518,4521,4523],{"class":137,"line":4489},164,[135,4491,4292],{"class":141},[135,4493,164],{"class":151},[135,4495,168],{"class":167},[135,4497,171],{"class":141},[135,4499,4500],{"class":174},"\"detailImgRef\"",[135,4502,178],{"class":167},[135,4504,171],{"class":141},[135,4506,4507],{"class":174},"\"detail-svg\"",[135,4509,214],{"class":167},[135,4511,171],{"class":141},[135,4513,4455],{"class":174},[135,4515,4363],{"class":167},[135,4517,171],{"class":141},[135,4519,4520],{"class":174},"\"getSvg(activeData.color, activeData.type)\"",[135,4522,4372],{"class":4371},[135,4524,155],{"class":141},[135,4526,4528,4530,4532,4534,4536,4539,4541,4543,4546],{"class":137,"line":4527},165,[135,4529,4292],{"class":141},[135,4531,164],{"class":151},[135,4533,168],{"class":167},[135,4535,171],{"class":141},[135,4537,4538],{"class":174},"\"detailContentRef\"",[135,4540,178],{"class":167},[135,4542,171],{"class":141},[135,4544,4545],{"class":174},"\"content\"",[135,4547,155],{"class":141},[135,4549,4551,4553,4555,4558,4560,4563,4565,4567,4570,4573,4575],{"class":137,"line":4550},166,[135,4552,4351],{"class":141},[135,4554,164],{"class":151},[135,4556,4557],{"class":167}," :ref",[135,4559,171],{"class":141},[135,4561,4562],{"class":174},"\"el => textRefs.title.value = el\"",[135,4564,178],{"class":167},[135,4566,171],{"class":141},[135,4568,4569],{"class":174},"\"title\"",[135,4571,4572],{"class":141},">\u003C\u002F",[135,4574,164],{"class":151},[135,4576,155],{"class":141},[135,4578,4580,4582,4584,4586,4588,4591,4593,4595,4598,4600,4602],{"class":137,"line":4579},167,[135,4581,4351],{"class":141},[135,4583,164],{"class":151},[135,4585,4557],{"class":167},[135,4587,171],{"class":141},[135,4589,4590],{"class":174},"\"el => textRefs.secondary.value = el\"",[135,4592,178],{"class":167},[135,4594,171],{"class":141},[135,4596,4597],{"class":174},"\"secondary\"",[135,4599,4572],{"class":141},[135,4601,164],{"class":151},[135,4603,155],{"class":141},[135,4605,4607,4609,4611,4613,4615,4618,4620,4622,4625,4627,4629],{"class":137,"line":4606},168,[135,4608,4351],{"class":141},[135,4610,164],{"class":151},[135,4612,4557],{"class":167},[135,4614,171],{"class":141},[135,4616,4617],{"class":174},"\"el => textRefs.description.value = el\"",[135,4619,178],{"class":167},[135,4621,171],{"class":141},[135,4623,4624],{"class":174},"\"description\"",[135,4626,4572],{"class":141},[135,4628,164],{"class":151},[135,4630,155],{"class":141},[135,4632,4634,4636,4638],{"class":137,"line":4633},169,[135,4635,4380],{"class":141},[135,4637,164],{"class":151},[135,4639,155],{"class":141},[135,4641,4643,4645,4647],{"class":137,"line":4642},170,[135,4644,4390],{"class":141},[135,4646,164],{"class":151},[135,4648,155],{"class":141},[135,4650,4652,4654,4656],{"class":137,"line":4651},171,[135,4653,311],{"class":141},[135,4655,164],{"class":151},[135,4657,155],{"class":141},[135,4659,4661,4663,4665],{"class":137,"line":4660},172,[135,4662,352],{"class":141},[135,4664,164],{"class":151},[135,4666,155],{"class":141},[135,4668,4670,4672,4674],{"class":137,"line":4669},173,[135,4671,362],{"class":141},[135,4673,152],{"class":151},[135,4675,155],{"class":141},[135,4677,4679],{"class":137,"line":4678},174,[135,4680,373],{"emptyLinePlaceholder":372},[135,4682,4684,4686,4689,4692],{"class":137,"line":4683},175,[135,4685,148],{"class":141},[135,4687,4688],{"class":151},"style",[135,4690,4691],{"class":167}," scoped",[135,4693,155],{"class":141},[135,4695,4697,4700,4703,4706,4709,4712],{"class":137,"line":4696},176,[135,4698,4699],{"class":167},".gallery-root",[135,4701,4702],{"class":141}," { ",[135,4704,4705],{"class":533},"position",[135,4707,4708],{"class":141},": ",[135,4710,4711],{"class":533},"relative",[135,4713,4714],{"class":141},"; }\n",[135,4716,4718],{"class":137,"line":4717},177,[135,4719,373],{"emptyLinePlaceholder":372},[135,4721,4723,4726],{"class":137,"line":4722},178,[135,4724,4725],{"class":167},".backdrop",[135,4727,1669],{"class":141},[135,4729,4731,4734,4736,4739],{"class":137,"line":4730},179,[135,4732,4733],{"class":533},"  position",[135,4735,4708],{"class":141},[135,4737,4738],{"class":533},"fixed",[135,4740,4741],{"class":141},";\n",[135,4743,4745,4748,4750,4752],{"class":137,"line":4744},180,[135,4746,4747],{"class":533},"  inset",[135,4749,4708],{"class":141},[135,4751,545],{"class":533},[135,4753,4741],{"class":141},[135,4755,4757,4760,4762,4765],{"class":137,"line":4756},181,[135,4758,4759],{"class":533},"  z-index",[135,4761,4708],{"class":141},[135,4763,4764],{"class":533},"99",[135,4766,4741],{"class":141},[135,4768,4770,4773,4775,4778,4780,4782,4784,4786,4788,4790,4792,4794],{"class":137,"line":4769},182,[135,4771,4772],{"class":533},"  background",[135,4774,4708],{"class":141},[135,4776,4777],{"class":533},"rgba",[135,4779,738],{"class":141},[135,4781,545],{"class":533},[135,4783,1724],{"class":141},[135,4785,545],{"class":533},[135,4787,1724],{"class":141},[135,4789,545],{"class":533},[135,4791,1724],{"class":141},[135,4793,816],{"class":533},[135,4795,4796],{"class":141},");\n",[135,4798,4800,4803,4805,4808],{"class":137,"line":4799},183,[135,4801,4802],{"class":533},"  display",[135,4804,4708],{"class":141},[135,4806,4807],{"class":533},"flex",[135,4809,4741],{"class":141},[135,4811,4813,4816,4818,4821],{"class":137,"line":4812},184,[135,4814,4815],{"class":533},"  align-items",[135,4817,4708],{"class":141},[135,4819,4820],{"class":533},"center",[135,4822,4741],{"class":141},[135,4824,4826,4829,4831,4833],{"class":137,"line":4825},185,[135,4827,4828],{"class":533},"  justify-content",[135,4830,4708],{"class":141},[135,4832,4820],{"class":533},[135,4834,4741],{"class":141},[135,4836,4838],{"class":137,"line":4837},186,[135,4839,575],{"class":141},[135,4841,4843],{"class":137,"line":4842},187,[135,4844,373],{"emptyLinePlaceholder":372},[135,4846,4848,4851],{"class":137,"line":4847},188,[135,4849,4850],{"class":167},".app",[135,4852,1669],{"class":141},[135,4854,4856,4859,4861,4864,4867,4870,4873,4875,4877,4879],{"class":137,"line":4855},189,[135,4857,4858],{"class":533},"  height",[135,4860,4708],{"class":141},[135,4862,4863],{"class":533},"90",[135,4865,4866],{"class":498},"vmin",[135,4868,4869],{"class":141},"; ",[135,4871,4872],{"class":533},"width",[135,4874,4708],{"class":141},[135,4876,4863],{"class":533},[135,4878,4866],{"class":498},[135,4880,4741],{"class":141},[135,4882,4884,4886,4888,4891,4893,4896,4898,4901],{"class":137,"line":4883},190,[135,4885,4772],{"class":533},[135,4887,4708],{"class":141},[135,4889,4890],{"class":533},"var",[135,4892,738],{"class":141},[135,4894,4895],{"class":1281},"--color-just-black",[135,4897,1724],{"class":141},[135,4899,4900],{"class":533},"#0e100f",[135,4902,4796],{"class":141},[135,4904,4906,4908,4910,4912,4914,4917,4919,4922],{"class":137,"line":4905},191,[135,4907,4733],{"class":533},[135,4909,4708],{"class":141},[135,4911,4711],{"class":533},[135,4913,4869],{"class":141},[135,4915,4916],{"class":533},"overflow",[135,4918,4708],{"class":141},[135,4920,4921],{"class":533},"auto",[135,4923,4741],{"class":141},[135,4925,4927,4930,4932,4935,4937,4939,4941,4944],{"class":137,"line":4926},192,[135,4928,4929],{"class":533},"  color-scheme",[135,4931,4708],{"class":141},[135,4933,4934],{"class":533},"dark",[135,4936,4869],{"class":141},[135,4938,2348],{"class":533},[135,4940,4708],{"class":141},[135,4942,4943],{"class":533},"hidden",[135,4945,4741],{"class":141},[135,4947,4949,4952,4954,4956,4959],{"class":137,"line":4948},193,[135,4950,4951],{"class":533},"  margin",[135,4953,4708],{"class":141},[135,4955,545],{"class":533},[135,4957,4958],{"class":533}," auto",[135,4960,4741],{"class":141},[135,4962,4964],{"class":137,"line":4963},194,[135,4965,575],{"class":141},[135,4967,4969],{"class":137,"line":4968},195,[135,4970,373],{"emptyLinePlaceholder":372},[135,4972,4974,4977,4979,4982,4984,4987,4989,4992,4994,4997,4999,5002,5004,5006,5009,5012,5015,5017,5019,5022,5024,5027,5029,5032,5035],{"class":137,"line":4973},196,[135,4975,4976],{"class":167},".gallery",[135,4978,4702],{"class":141},[135,4980,4981],{"class":533},"display",[135,4983,4708],{"class":141},[135,4985,4986],{"class":533},"grid",[135,4988,4869],{"class":141},[135,4990,4991],{"class":533},"grid-template-columns",[135,4993,4708],{"class":141},[135,4995,4996],{"class":533},"repeat",[135,4998,738],{"class":141},[135,5000,5001],{"class":533},"3",[135,5003,1724],{"class":141},[135,5005,1924],{"class":533},[135,5007,5008],{"class":498},"fr",[135,5010,5011],{"class":141},"); ",[135,5013,5014],{"class":533},"gap",[135,5016,4708],{"class":141},[135,5018,1924],{"class":533},[135,5020,5021],{"class":498},"rem",[135,5023,4869],{"class":141},[135,5025,5026],{"class":533},"padding",[135,5028,4708],{"class":141},[135,5030,5031],{"class":533},"10",[135,5033,5034],{"class":498},"px",[135,5036,4714],{"class":141},[135,5038,5040,5043,5045,5048,5050,5053],{"class":137,"line":5039},197,[135,5041,5042],{"class":167},".item",[135,5044,4702],{"class":141},[135,5046,5047],{"class":533},"cursor",[135,5049,4708],{"class":141},[135,5051,5052],{"class":533},"pointer",[135,5054,4714],{"class":141},[135,5056,5058],{"class":137,"line":5057},198,[135,5059,373],{"emptyLinePlaceholder":372},[135,5061,5063,5066,5068,5071],{"class":137,"line":5062},199,[135,5064,5065],{"class":167},".item-svg",[135,5067,1724],{"class":141},[135,5069,5070],{"class":167},".detail-svg",[135,5072,1669],{"class":141},[135,5074,5076,5079,5081,5083,5086,5088,5091,5093,5095,5098,5100],{"class":137,"line":5075},200,[135,5077,5078],{"class":533},"  width",[135,5080,4708],{"class":141},[135,5082,3219],{"class":533},[135,5084,5085],{"class":498},"%",[135,5087,4869],{"class":141},[135,5089,5090],{"class":533},"aspect-ratio",[135,5092,4708],{"class":141},[135,5094,1924],{"class":533},[135,5096,5097],{"class":141}," \u002F ",[135,5099,1924],{"class":533},[135,5101,4741],{"class":141},[135,5103,5105,5107,5109,5111,5113,5116,5118,5120,5122,5125,5127,5129],{"class":137,"line":5104},201,[135,5106,4802],{"class":533},[135,5108,4708],{"class":141},[135,5110,4807],{"class":533},[135,5112,4869],{"class":141},[135,5114,5115],{"class":533},"align-items",[135,5117,4708],{"class":141},[135,5119,4820],{"class":533},[135,5121,4869],{"class":141},[135,5123,5124],{"class":533},"justify-content",[135,5126,4708],{"class":141},[135,5128,4820],{"class":533},[135,5130,4741],{"class":141},[135,5132,5134,5136,5138,5141,5143,5145,5147,5150,5152,5154,5157,5159,5162],{"class":137,"line":5133},202,[135,5135,4772],{"class":533},[135,5137,4708],{"class":141},[135,5139,5140],{"class":533},"#1c1d1f",[135,5142,4869],{"class":141},[135,5144,5026],{"class":533},[135,5146,4708],{"class":141},[135,5148,5149],{"class":533},"12",[135,5151,5085],{"class":498},[135,5153,4869],{"class":141},[135,5155,5156],{"class":533},"box-sizing",[135,5158,4708],{"class":141},[135,5160,5161],{"class":533},"border-box",[135,5163,4741],{"class":141},[135,5165,5167],{"class":137,"line":5166},203,[135,5168,575],{"class":141},[135,5170,5172,5174,5176,5179,5181,5183,5185],{"class":137,"line":5171},204,[135,5173,5065],{"class":167},[135,5175,4702],{"class":141},[135,5177,5178],{"class":533},"border-radius",[135,5180,4708],{"class":141},[135,5182,5031],{"class":533},[135,5184,5034],{"class":498},[135,5186,4714],{"class":141},[135,5188,5190,5192,5194,5196,5198,5200,5202,5205,5207,5210,5212,5214,5216,5218,5220,5222,5225,5227,5229,5231,5233,5235,5237],{"class":137,"line":5189},205,[135,5191,5070],{"class":167},[135,5193,4702],{"class":141},[135,5195,5178],{"class":533},[135,5197,4708],{"class":141},[135,5199,5031],{"class":533},[135,5201,5034],{"class":498},[135,5203,5204],{"class":533}," 10",[135,5206,5034],{"class":498},[135,5208,5209],{"class":533}," 0",[135,5211,5209],{"class":533},[135,5213,4869],{"class":141},[135,5215,4705],{"class":533},[135,5217,4708],{"class":141},[135,5219,4711],{"class":533},[135,5221,4869],{"class":141},[135,5223,5224],{"class":533},"z-index",[135,5226,4708],{"class":141},[135,5228,1924],{"class":533},[135,5230,4869],{"class":141},[135,5232,5047],{"class":533},[135,5234,4708],{"class":141},[135,5236,5052],{"class":533},[135,5238,4714],{"class":141},[135,5240,5242],{"class":137,"line":5241},206,[135,5243,373],{"emptyLinePlaceholder":372},[135,5245,5247,5249,5252,5255,5258,5260,5262,5264,5267,5269,5271,5273,5275,5277,5280,5282,5284,5286],{"class":137,"line":5246},207,[135,5248,5065],{"class":167},[135,5250,5251],{"class":141}," :deep(",[135,5253,5254],{"class":151},"svg",[135,5256,5257],{"class":141},"), ",[135,5259,5070],{"class":167},[135,5261,5251],{"class":141},[135,5263,5254],{"class":151},[135,5265,5266],{"class":141},") { ",[135,5268,4872],{"class":533},[135,5270,4708],{"class":141},[135,5272,3219],{"class":533},[135,5274,5085],{"class":498},[135,5276,4869],{"class":141},[135,5278,5279],{"class":533},"height",[135,5281,4708],{"class":141},[135,5283,3219],{"class":533},[135,5285,5085],{"class":498},[135,5287,4714],{"class":141},[135,5289,5291],{"class":137,"line":5290},208,[135,5292,373],{"emptyLinePlaceholder":372},[135,5294,5296,5299],{"class":137,"line":5295},209,[135,5297,5298],{"class":167},".detail",[135,5300,1669],{"class":141},[135,5302,5304,5306,5308,5311,5313],{"class":137,"line":5303},210,[135,5305,5078],{"class":533},[135,5307,4708],{"class":141},[135,5309,5310],{"class":533},"90.1",[135,5312,4866],{"class":498},[135,5314,4741],{"class":141},[135,5316,5318,5320,5322,5324,5326,5329,5331,5334],{"class":137,"line":5317},211,[135,5319,4802],{"class":533},[135,5321,4708],{"class":141},[135,5323,4807],{"class":533},[135,5325,4869],{"class":141},[135,5327,5328],{"class":533},"flex-direction",[135,5330,4708],{"class":141},[135,5332,5333],{"class":533},"column",[135,5335,4741],{"class":141},[135,5337,5339,5342,5344,5346,5348,5351,5353,5355,5358,5360,5362,5364,5366],{"class":137,"line":5338},212,[135,5340,5341],{"class":533},"  visibility",[135,5343,4708],{"class":141},[135,5345,4943],{"class":533},[135,5347,4869],{"class":141},[135,5349,5350],{"class":533},"max-height",[135,5352,4708],{"class":141},[135,5354,4863],{"class":533},[135,5356,5357],{"class":498},"vh",[135,5359,4869],{"class":141},[135,5361,4916],{"class":533},[135,5363,4708],{"class":141},[135,5365,4921],{"class":533},[135,5367,4741],{"class":141},[135,5369,5371],{"class":137,"line":5370},213,[135,5372,575],{"class":141},[135,5374,5376],{"class":137,"line":5375},214,[135,5377,373],{"emptyLinePlaceholder":372},[135,5379,5381,5383,5386,5388,5391,5393,5396,5398,5400,5402,5404,5406,5409,5411,5413,5416,5418,5420],{"class":137,"line":5380},215,[135,5382,5298],{"class":167},[135,5384,5385],{"class":167}," .content",[135,5387,4702],{"class":141},[135,5389,5390],{"class":533},"background",[135,5392,4708],{"class":141},[135,5394,5395],{"class":533},"#232323",[135,5397,4869],{"class":141},[135,5399,5026],{"class":533},[135,5401,4708],{"class":141},[135,5403,1721],{"class":533},[135,5405,5021],{"class":498},[135,5407,5408],{"class":533}," 1.5",[135,5410,5021],{"class":498},[135,5412,4869],{"class":141},[135,5414,5415],{"class":533},"flex-grow",[135,5417,4708],{"class":141},[135,5419,1924],{"class":533},[135,5421,4714],{"class":141},[135,5423,5425,5427,5429,5432,5435,5437,5440,5442,5444,5446],{"class":137,"line":5424},216,[135,5426,5298],{"class":167},[135,5428,5385],{"class":167},[135,5430,5431],{"class":498}," >",[135,5433,5434],{"class":151}," *",[135,5436,4702],{"class":141},[135,5438,5439],{"class":533},"margin-bottom",[135,5441,4708],{"class":141},[135,5443,1924],{"class":533},[135,5445,5021],{"class":498},[135,5447,4714],{"class":141},[135,5449,5451,5453,5456,5458,5461,5463,5465,5467,5469,5472,5474,5477,5479,5481,5483,5486],{"class":137,"line":5450},217,[135,5452,5298],{"class":167},[135,5454,5455],{"class":167}," .title",[135,5457,4702],{"class":141},[135,5459,5460],{"class":533},"font-size",[135,5462,4708],{"class":141},[135,5464,1721],{"class":533},[135,5466,5021],{"class":498},[135,5468,4869],{"class":141},[135,5470,5471],{"class":533},"text-transform",[135,5473,4708],{"class":141},[135,5475,5476],{"class":533},"uppercase",[135,5478,4869],{"class":141},[135,5480,3010],{"class":533},[135,5482,4708],{"class":141},[135,5484,5485],{"class":533},"#fffce1",[135,5487,4714],{"class":141},[135,5489,5491,5493,5496,5498,5500,5502,5505],{"class":137,"line":5490},218,[135,5492,5298],{"class":167},[135,5494,5495],{"class":167}," .secondary",[135,5497,4702],{"class":141},[135,5499,3010],{"class":533},[135,5501,4708],{"class":141},[135,5503,5504],{"class":533},"lightgray",[135,5506,4714],{"class":141},[135,5508,5510,5512,5515,5517,5520,5522,5525,5527,5529,5531,5534],{"class":137,"line":5509},219,[135,5511,5298],{"class":167},[135,5513,5514],{"class":167}," .description",[135,5516,4702],{"class":141},[135,5518,5519],{"class":533},"line-height",[135,5521,4708],{"class":141},[135,5523,5524],{"class":533},"1.5",[135,5526,4869],{"class":141},[135,5528,3010],{"class":533},[135,5530,4708],{"class":141},[135,5532,5533],{"class":533},"#bbbaa6",[135,5535,4714],{"class":141},[135,5537,5539,5541,5543],{"class":137,"line":5538},220,[135,5540,362],{"class":141},[135,5542,4688],{"class":151},[135,5544,155],{"class":141},[10,5546,5547],{},"效果如下：",[5549,5550],"gsap-gallery",{},[10,5552,5553],{},"接下里我们看看其他几个比较受欢迎的插件，比如说滚动驱动的ScrollTrigger和一些文字特效，都是一些能够直接提升内容展示效果的插件。",[110,5555,5557],{"id":5556},"scrolltrigger","scrollTrigger",[10,5559,5560,5561,5564],{},"这是 GSAP 最受欢迎的插件之一。它能让动画不再局限于“页面加载即播放”，而是",[14,5562,5563],{},"由滚动位置触发","。比如文章里的某一段落滚动到视口时再淡入，或者让某个元素在滚动过程中“钉”在屏幕上（pin）并播放一段动画。",[32,5566,5567],{},[35,5568,5569,5572],{},[14,5570,5571],{},"适用场景","：长文档的渐进式呈现、横向滚动画廊、视差效果。",[10,5574,5575],{},"我们来做个导航栏逐个滑入的效果：",[114,5577,5579],{"animation":810,":duration":816,"trigger":5578,"ease":817},"scroll",[164,5580,821,5582,821,5587,821,5591],{"style":5581},"display: flex; flex-direction: column; gap: 8px;",[823,5583,1020],{"className":5584,"href":5585,"style":5586},[826],"#","padding: 10px; background: #eef2ff; border-radius: 6px;",[823,5588,1024],{"className":5589,"href":5585,"style":5590},[826],"padding: 10px; background: #fce7f3; border-radius: 6px;",[823,5592,1028],{"className":5593,"href":5585,"style":5594},[826],"padding: 10px; background: #ecfdf5; border-radius: 6px;",[10,5596,5597,5598,5601,5602,5605,5606],{},"默认情况下，当组件顶部到达视口高度的 ",[14,5599,5600],{},"85%"," 时开始播放（",[132,5603,5604],{},"start=\"top 85%\"","）。如果你希望它更早或更晚触发，可以传入 ",[132,5607,5608],{},"start",[10,5610,5611],{},"这个是屏幕正中间才显示：",[114,5613,5616],{"animation":5614,"trigger":5578,"start":5615},"scale","top 50%",[10,5617,5618],{},"我是在屏幕正中间才弹出来的。",[10,5620,5621],{},"这个是进入视口才显示：",[114,5623,5625],{"animation":683,"trigger":5578,"start":5624},"top bottom",[10,5626,5627],{},"我是等完全进入屏幕才逐字显示的。",[10,5629,5630,5631,5634,5635],{},"有些时候我们不想“触发一次播放”，而是想让",[14,5632,5633],{},"滚动条变成动画的进度条","，也就是“滚多少，动画播多少”。这需要用到 ",[132,5636,5637],{},"scrub",[5639,5640,5642,5645,5648],"gsap-scroll-parallax",{":height":5641},"200vh",[10,5643,5644],{},"这是一段随着你的滚动条进度，从缩小、旋转、透明的状态，慢慢放大、旋转回正并显现的文本。",[10,5646,5647],{},"你可以在这里放任何 HTML，比如：",[164,5649,5651],{"style":5650},"margin-top: 20px; padding: 10px; background: #0ae448; color: #000; border-radius: 8px;","\n  甚至是一个带背景的卡片\n",[10,5653,5654],{},"代码实现如下：",[125,5656,5658],{"className":127,"code":5657,"language":129,"meta":130,"style":130},"\u003Cscript setup>\nimport { ref, onMounted, onUnmounted, nextTick } from 'vue'\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap\u002FScrollTrigger'\ngsap.registerPlugin(ScrollTrigger)\n\nconst props = defineProps({\n  \u002F\u002F 滚动跟随区域的高度（默认 200vh，留出足够的滚动距离）\n  height: { type: String, default: '200vh' },\n  \u002F\u002F 动画的起始和结束缓动\n  ease: { type: String, default: 'none' }\n})\n\nconst containerRef = ref(null)\nconst stickyRef = ref(null)\nconst contentRef = ref(null)\n\nonMounted(async () => {\n  await nextTick()\n  if (!containerRef.value || !contentRef.value) return\n\n  \u002F\u002F 核心逻辑：让内部的内容吸顶，并让动画进度与滚动条绑定\n  const tl = gsap.timeline({\n    scrollTrigger: {\n      trigger: containerRef.value,\n      start: 'top top', \u002F\u002F 当容器的顶部到达视口顶部时开始\n      end: 'bottom bottom', \u002F\u002F 当容器的底部到达视口底部时结束\n      scrub: 1, \u002F\u002F 平滑跟随：1 表示有 1 秒的缓动延迟，让手感更顺滑\n      pin: stickyRef.value, \u002F\u002F 把内容区域钉在屏幕上\n      pinSpacing: false, \u002F\u002F 因为外层容器已经有 height，这里不需要额外加 padding\n      anticipatePin: 1 \u002F\u002F 防止快速滚动时产生 1px 的抖动\n    }\n  })\n\n  \u002F\u002F 下面是你希望随着滚动进度发生的动画\n  \u002F\u002F 这里以“文字放大、颜色渐变、旋转”为例，你可以任意修改\n  tl.fromTo(contentRef.value,\n    { \n      scale: 0.5, \n      rotation: -45,\n      opacity: 0 \n    },\n    { \n      scale: 1.2, \n      rotation: 0, \n      opacity: 1,\n      ease: props.ease,\n      \u002F\u002F 你可以在这里继续叠加其他属性\n    }\n  )\n})\n\nonUnmounted(() => {\n  \u002F\u002F 必须清理 ScrollTrigger，防止页面切换后残留\n  ScrollTrigger.getAll().forEach(t => t.kill())\n})\n\nfunction scrollToTop() {\n  window.scrollTo({ top: containerRef.value.offsetTop, behavior: 'smooth' })\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv \n    ref=\"containerRef\" \n    class=\"scroll-parallax-container\" \n    :style=\"{ height: props.height }\"\n  >\n    \u003Cdiv ref=\"stickyRef\" class=\"sticky-wrapper\">\n      \u003Cdiv ref=\"contentRef\" class=\"scroll-content\">\n        \u003C!-- 默认插槽，由 MDC 传入内容 -->\n        \u003Cslot \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n.scroll-parallax-container {\n  position: relative;\n  width: 100%;\n  background: var(--ui-backdrop, #f6f6f7);\n  border-radius: 12px;\n  border: 1px solid var(--ui-line, #e2e2e3);\n  margin: 2rem 0;\n  overflow: hidden;\n}\n\n.sticky-wrapper {\n  width: 100%;\n  height: 100vh; \u002F* 占满整个屏幕 *\u002F\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.scroll-content {\n  \u002F* 这里可以自定义内容的基础样式，动画由 GSAP 控制 *\u002F\n  padding: 2rem;\n  max-width: 800px;\n  text-align: center;\n  color: #0e100f;\n  font-size: 1.5rem;\n  font-weight: bold;\n  will-change: transform, opacity; \u002F* 提示浏览器开启硬件加速 *\u002F\n}\n\u003C\u002Fstyle>\n",[132,5659,5660,5670,5680,5690,5702,5711,5715,5729,5734,5744,5749,5759,5763,5767,5784,5801,5818,5822,5836,5844,5864,5868,5873,5887,5892,5897,5910,5923,5935,5943,5955,5965,5969,5973,5977,5982,5987,5997,6002,6012,6024,6032,6037,6041,6049,6057,6065,6070,6075,6079,6084,6088,6092,6102,6107,6135,6139,6143,6152,6168,6172,6180,6184,6192,6200,6211,6223,6233,6238,6260,6282,6287,6298,6306,6314,6322,6330,6334,6344,6351,6361,6373,6393,6406,6435,6449,6460,6464,6468,6475,6487,6502,6512,6522,6532,6536,6540,6547,6552,6565,6579,6590,6601,6614,6626,6637,6641],{"__ignoreMap":130},[135,5661,5662,5664,5666,5668],{"class":137,"line":138},[135,5663,148],{"class":141},[135,5665,2385],{"class":151},[135,5667,2388],{"class":167},[135,5669,155],{"class":141},[135,5671,5672,5674,5676,5678],{"class":137,"line":145},[135,5673,2395],{"class":498},[135,5675,2398],{"class":141},[135,5677,519],{"class":498},[135,5679,2403],{"class":174},[135,5681,5682,5684,5686,5688],{"class":137,"line":158},[135,5683,2395],{"class":498},[135,5685,2410],{"class":141},[135,5687,519],{"class":498},[135,5689,2415],{"class":174},[135,5691,5692,5694,5697,5699],{"class":137,"line":188},[135,5693,2395],{"class":498},[135,5695,5696],{"class":141}," { ScrollTrigger } ",[135,5698,519],{"class":498},[135,5700,5701],{"class":174}," 'gsap\u002FScrollTrigger'\n",[135,5703,5704,5706,5708],{"class":137,"line":205},[135,5705,2432],{"class":141},[135,5707,2435],{"class":167},[135,5709,5710],{"class":141},"(ScrollTrigger)\n",[135,5712,5713],{"class":137,"line":245},[135,5714,373],{"emptyLinePlaceholder":372},[135,5716,5717,5719,5722,5724,5727],{"class":137,"line":280},[135,5718,1214],{"class":498},[135,5720,5721],{"class":533}," props",[135,5723,910],{"class":498},[135,5725,5726],{"class":167}," defineProps",[135,5728,4041],{"class":141},[135,5730,5731],{"class":137,"line":308},[135,5732,5733],{"class":610},"  \u002F\u002F 滚动跟随区域的高度（默认 200vh，留出足够的滚动距离）\n",[135,5735,5736,5739,5742],{"class":137,"line":318},[135,5737,5738],{"class":141},"  height: { type: String, default: ",[135,5740,5741],{"class":174},"'200vh'",[135,5743,2493],{"class":141},[135,5745,5746],{"class":137,"line":334},[135,5747,5748],{"class":610},"  \u002F\u002F 动画的起始和结束缓动\n",[135,5750,5751,5754,5757],{"class":137,"line":340},[135,5752,5753],{"class":141},"  ease: { type: String, default: ",[135,5755,5756],{"class":174},"'none'",[135,5758,2778],{"class":141},[135,5760,5761],{"class":137,"line":349},[135,5762,461],{"class":141},[135,5764,5765],{"class":137,"line":359},[135,5766,373],{"emptyLinePlaceholder":372},[135,5768,5769,5771,5774,5776,5778,5780,5782],{"class":137,"line":369},[135,5770,1214],{"class":498},[135,5772,5773],{"class":533}," containerRef",[135,5775,910],{"class":498},[135,5777,168],{"class":167},[135,5779,738],{"class":141},[135,5781,2803],{"class":533},[135,5783,924],{"class":141},[135,5785,5786,5788,5791,5793,5795,5797,5799],{"class":137,"line":376},[135,5787,1214],{"class":498},[135,5789,5790],{"class":533}," stickyRef",[135,5792,910],{"class":498},[135,5794,168],{"class":167},[135,5796,738],{"class":141},[135,5798,2803],{"class":533},[135,5800,924],{"class":141},[135,5802,5803,5805,5808,5810,5812,5814,5816],{"class":137,"line":382},[135,5804,1214],{"class":498},[135,5806,5807],{"class":533}," contentRef",[135,5809,910],{"class":498},[135,5811,168],{"class":167},[135,5813,738],{"class":141},[135,5815,2803],{"class":533},[135,5817,924],{"class":141},[135,5819,5820],{"class":137,"line":388},[135,5821,373],{"emptyLinePlaceholder":372},[135,5823,5824,5826,5828,5830,5832,5834],{"class":137,"line":394},[135,5825,3163],{"class":167},[135,5827,738],{"class":141},[135,5829,3168],{"class":498},[135,5831,3171],{"class":141},[135,5833,3174],{"class":498},[135,5835,1669],{"class":141},[135,5837,5838,5840,5842],{"class":137,"line":400},[135,5839,3181],{"class":498},[135,5841,3184],{"class":167},[135,5843,3187],{"class":141},[135,5845,5846,5848,5850,5852,5855,5857,5859,5862],{"class":137,"line":405},[135,5847,1416],{"class":498},[135,5849,1278],{"class":141},[135,5851,1421],{"class":498},[135,5853,5854],{"class":141},"containerRef.value ",[135,5856,3139],{"class":498},[135,5858,1432],{"class":498},[135,5860,5861],{"class":141},"contentRef.value) ",[135,5863,1438],{"class":498},[135,5865,5866],{"class":137,"line":411},[135,5867,373],{"emptyLinePlaceholder":372},[135,5869,5870],{"class":137,"line":417},[135,5871,5872],{"class":610},"  \u002F\u002F 核心逻辑：让内部的内容吸顶，并让动画进度与滚动条绑定\n",[135,5874,5875,5877,5879,5881,5883,5885],{"class":137,"line":422},[135,5876,904],{"class":498},[135,5878,4031],{"class":533},[135,5880,910],{"class":498},[135,5882,3714],{"class":141},[135,5884,4038],{"class":167},[135,5886,4041],{"class":141},[135,5888,5889],{"class":137,"line":428},[135,5890,5891],{"class":141},"    scrollTrigger: {\n",[135,5893,5894],{"class":137,"line":434},[135,5895,5896],{"class":141},"      trigger: containerRef.value,\n",[135,5898,5899,5902,5905,5907],{"class":137,"line":440},[135,5900,5901],{"class":141},"      start: ",[135,5903,5904],{"class":174},"'top top'",[135,5906,1724],{"class":141},[135,5908,5909],{"class":610},"\u002F\u002F 当容器的顶部到达视口顶部时开始\n",[135,5911,5912,5915,5918,5920],{"class":137,"line":446},[135,5913,5914],{"class":141},"      end: ",[135,5916,5917],{"class":174},"'bottom bottom'",[135,5919,1724],{"class":141},[135,5921,5922],{"class":610},"\u002F\u002F 当容器的底部到达视口底部时结束\n",[135,5924,5925,5928,5930,5932],{"class":137,"line":452},[135,5926,5927],{"class":141},"      scrub: ",[135,5929,1924],{"class":533},[135,5931,1724],{"class":141},[135,5933,5934],{"class":610},"\u002F\u002F 平滑跟随：1 表示有 1 秒的缓动延迟，让手感更顺滑\n",[135,5936,5937,5940],{"class":137,"line":458},[135,5938,5939],{"class":141},"      pin: stickyRef.value, ",[135,5941,5942],{"class":610},"\u002F\u002F 把内容区域钉在屏幕上\n",[135,5944,5945,5948,5950,5952],{"class":137,"line":464},[135,5946,5947],{"class":141},"      pinSpacing: ",[135,5949,1226],{"class":533},[135,5951,1724],{"class":141},[135,5953,5954],{"class":610},"\u002F\u002F 因为外层容器已经有 height，这里不需要额外加 padding\n",[135,5956,5957,5960,5962],{"class":137,"line":469},[135,5958,5959],{"class":141},"      anticipatePin: ",[135,5961,1924],{"class":533},[135,5963,5964],{"class":610}," \u002F\u002F 防止快速滚动时产生 1px 的抖动\n",[135,5966,5967],{"class":137,"line":1475},[135,5968,1319],{"class":141},[135,5970,5971],{"class":137,"line":1488},[135,5972,570],{"class":141},[135,5974,5975],{"class":137,"line":1510},[135,5976,373],{"emptyLinePlaceholder":372},[135,5978,5979],{"class":137,"line":1530},[135,5980,5981],{"class":610},"  \u002F\u002F 下面是你希望随着滚动进度发生的动画\n",[135,5983,5984],{"class":137,"line":1535},[135,5985,5986],{"class":610},"  \u002F\u002F 这里以“文字放大、颜色渐变、旋转”为例，你可以任意修改\n",[135,5988,5989,5991,5994],{"class":137,"line":1541},[135,5990,516],{"class":141},[135,5992,5993],{"class":167},"fromTo",[135,5995,5996],{"class":141},"(contentRef.value,\n",[135,5998,5999],{"class":137,"line":1552},[135,6000,6001],{"class":141},"    { \n",[135,6003,6004,6007,6009],{"class":137,"line":1562},[135,6005,6006],{"class":141},"      scale: ",[135,6008,684],{"class":533},[135,6010,6011],{"class":141},", \n",[135,6013,6014,6017,6019,6022],{"class":137,"line":1572},[135,6015,6016],{"class":141},"      rotation: ",[135,6018,530],{"class":498},[135,6020,6021],{"class":533},"45",[135,6023,537],{"class":141},[135,6025,6026,6028,6030],{"class":137,"line":1582},[135,6027,3765],{"class":141},[135,6029,545],{"class":533},[135,6031,4418],{"class":141},[135,6033,6034],{"class":137,"line":1591},[135,6035,6036],{"class":141},"    },\n",[135,6038,6039],{"class":137,"line":1596},[135,6040,6001],{"class":141},[135,6042,6043,6045,6047],{"class":137,"line":2085},[135,6044,6006],{"class":141},[135,6046,116],{"class":533},[135,6048,6011],{"class":141},[135,6050,6051,6053,6055],{"class":137,"line":2097},[135,6052,6016],{"class":141},[135,6054,545],{"class":533},[135,6056,6011],{"class":141},[135,6058,6059,6061,6063],{"class":137,"line":2107},[135,6060,3765],{"class":141},[135,6062,1924],{"class":533},[135,6064,537],{"class":141},[135,6066,6067],{"class":137,"line":2117},[135,6068,6069],{"class":141},"      ease: props.ease,\n",[135,6071,6072],{"class":137,"line":2128},[135,6073,6074],{"class":610},"      \u002F\u002F 你可以在这里继续叠加其他属性\n",[135,6076,6077],{"class":137,"line":2133},[135,6078,1319],{"class":141},[135,6080,6081],{"class":137,"line":2143},[135,6082,6083],{"class":141},"  )\n",[135,6085,6086],{"class":137,"line":2152},[135,6087,461],{"class":141},[135,6089,6090],{"class":137,"line":2161},[135,6091,373],{"emptyLinePlaceholder":372},[135,6093,6094,6096,6098,6100],{"class":137,"line":2171},[135,6095,3311],{"class":167},[135,6097,3314],{"class":141},[135,6099,3174],{"class":498},[135,6101,1669],{"class":141},[135,6103,6104],{"class":137,"line":2181},[135,6105,6106],{"class":610},"  \u002F\u002F 必须清理 ScrollTrigger，防止页面切换后残留\n",[135,6108,6109,6112,6115,6117,6120,6122,6125,6127,6130,6132],{"class":137,"line":2189},[135,6110,6111],{"class":141},"  ScrollTrigger.",[135,6113,6114],{"class":167},"getAll",[135,6116,1702],{"class":141},[135,6118,6119],{"class":167},"forEach",[135,6121,738],{"class":141},[135,6123,6124],{"class":1281},"t",[135,6126,1666],{"class":498},[135,6128,6129],{"class":141}," t.",[135,6131,3799],{"class":167},[135,6133,6134],{"class":141},"())\n",[135,6136,6137],{"class":137,"line":2194},[135,6138,461],{"class":141},[135,6140,6141],{"class":137,"line":2199},[135,6142,373],{"emptyLinePlaceholder":372},[135,6144,6145,6147,6150],{"class":137,"line":2205},[135,6146,1346],{"class":498},[135,6148,6149],{"class":167}," scrollToTop",[135,6151,1352],{"class":141},[135,6153,6154,6157,6160,6163,6166],{"class":137,"line":2224},[135,6155,6156],{"class":141},"  window.",[135,6158,6159],{"class":167},"scrollTo",[135,6161,6162],{"class":141},"({ top: containerRef.value.offsetTop, behavior: ",[135,6164,6165],{"class":174},"'smooth'",[135,6167,727],{"class":141},[135,6169,6170],{"class":137,"line":2234},[135,6171,575],{"class":141},[135,6173,6174,6176,6178],{"class":137,"line":2244},[135,6175,362],{"class":141},[135,6177,2385],{"class":151},[135,6179,155],{"class":141},[135,6181,6182],{"class":137,"line":2254},[135,6183,373],{"emptyLinePlaceholder":372},[135,6185,6186,6188,6190],{"class":137,"line":3308},[135,6187,148],{"class":141},[135,6189,152],{"class":151},[135,6191,155],{"class":141},[135,6193,6194,6196,6198],{"class":137,"line":3321},[135,6195,161],{"class":141},[135,6197,164],{"class":151},[135,6199,4418],{"class":141},[135,6201,6202,6205,6207,6209],{"class":137,"line":3336},[135,6203,6204],{"class":167},"    ref",[135,6206,171],{"class":141},[135,6208,175],{"class":174},[135,6210,4418],{"class":141},[135,6212,6213,6216,6218,6221],{"class":137,"line":3341},[135,6214,6215],{"class":167},"    class",[135,6217,171],{"class":141},[135,6219,6220],{"class":174},"\"scroll-parallax-container\"",[135,6222,4418],{"class":141},[135,6224,6225,6228,6230],{"class":137,"line":3346},[135,6226,6227],{"class":167},"    :style",[135,6229,171],{"class":141},[135,6231,6232],{"class":174},"\"{ height: props.height }\"\n",[135,6234,6235],{"class":137,"line":3365},[135,6236,6237],{"class":141},"  >\n",[135,6239,6240,6242,6244,6246,6248,6251,6253,6255,6258],{"class":137,"line":3381},[135,6241,191],{"class":141},[135,6243,164],{"class":151},[135,6245,168],{"class":167},[135,6247,171],{"class":141},[135,6249,6250],{"class":174},"\"stickyRef\"",[135,6252,178],{"class":167},[135,6254,171],{"class":141},[135,6256,6257],{"class":174},"\"sticky-wrapper\"",[135,6259,155],{"class":141},[135,6261,6262,6264,6266,6268,6270,6273,6275,6277,6280],{"class":137,"line":3386},[135,6263,208],{"class":141},[135,6265,164],{"class":151},[135,6267,168],{"class":167},[135,6269,171],{"class":141},[135,6271,6272],{"class":174},"\"contentRef\"",[135,6274,178],{"class":167},[135,6276,171],{"class":141},[135,6278,6279],{"class":174},"\"scroll-content\"",[135,6281,155],{"class":141},[135,6283,6284],{"class":137,"line":3399},[135,6285,6286],{"class":610},"        \u003C!-- 默认插槽，由 MDC 传入内容 -->\n",[135,6288,6289,6291,6294,6296],{"class":137,"line":3410},[135,6290,4292],{"class":141},[135,6292,6293],{"class":151},"slot",[135,6295,4372],{"class":4371},[135,6297,155],{"class":141},[135,6299,6300,6302,6304],{"class":137,"line":3416},[135,6301,4390],{"class":141},[135,6303,164],{"class":151},[135,6305,155],{"class":141},[135,6307,6308,6310,6312],{"class":137,"line":3427},[135,6309,311],{"class":141},[135,6311,164],{"class":151},[135,6313,155],{"class":141},[135,6315,6316,6318,6320],{"class":137,"line":3438},[135,6317,352],{"class":141},[135,6319,164],{"class":151},[135,6321,155],{"class":141},[135,6323,6324,6326,6328],{"class":137,"line":3449},[135,6325,362],{"class":141},[135,6327,152],{"class":151},[135,6329,155],{"class":141},[135,6331,6332],{"class":137,"line":3454},[135,6333,373],{"emptyLinePlaceholder":372},[135,6335,6336,6338,6340,6342],{"class":137,"line":3464},[135,6337,148],{"class":141},[135,6339,4688],{"class":151},[135,6341,4691],{"class":167},[135,6343,155],{"class":141},[135,6345,6346,6349],{"class":137,"line":3474},[135,6347,6348],{"class":167},".scroll-parallax-container",[135,6350,1669],{"class":141},[135,6352,6353,6355,6357,6359],{"class":137,"line":3479},[135,6354,4733],{"class":533},[135,6356,4708],{"class":141},[135,6358,4711],{"class":533},[135,6360,4741],{"class":141},[135,6362,6363,6365,6367,6369,6371],{"class":137,"line":3491},[135,6364,5078],{"class":533},[135,6366,4708],{"class":141},[135,6368,3219],{"class":533},[135,6370,5085],{"class":498},[135,6372,4741],{"class":141},[135,6374,6375,6377,6379,6381,6383,6386,6388,6391],{"class":137,"line":3505},[135,6376,4772],{"class":533},[135,6378,4708],{"class":141},[135,6380,4890],{"class":533},[135,6382,738],{"class":141},[135,6384,6385],{"class":1281},"--ui-backdrop",[135,6387,1724],{"class":141},[135,6389,6390],{"class":533},"#f6f6f7",[135,6392,4796],{"class":141},[135,6394,6395,6398,6400,6402,6404],{"class":137,"line":3518},[135,6396,6397],{"class":533},"  border-radius",[135,6399,4708],{"class":141},[135,6401,5149],{"class":533},[135,6403,5034],{"class":498},[135,6405,4741],{"class":141},[135,6407,6408,6411,6413,6415,6417,6420,6423,6425,6428,6430,6433],{"class":137,"line":3531},[135,6409,6410],{"class":533},"  border",[135,6412,4708],{"class":141},[135,6414,1924],{"class":533},[135,6416,5034],{"class":498},[135,6418,6419],{"class":533}," solid",[135,6421,6422],{"class":533}," var",[135,6424,738],{"class":141},[135,6426,6427],{"class":1281},"--ui-line",[135,6429,1724],{"class":141},[135,6431,6432],{"class":533},"#e2e2e3",[135,6434,4796],{"class":141},[135,6436,6437,6439,6441,6443,6445,6447],{"class":137,"line":3552},[135,6438,4951],{"class":533},[135,6440,4708],{"class":141},[135,6442,1721],{"class":533},[135,6444,5021],{"class":498},[135,6446,5209],{"class":533},[135,6448,4741],{"class":141},[135,6450,6451,6454,6456,6458],{"class":137,"line":3557},[135,6452,6453],{"class":533},"  overflow",[135,6455,4708],{"class":141},[135,6457,4943],{"class":533},[135,6459,4741],{"class":141},[135,6461,6462],{"class":137,"line":3574},[135,6463,575],{"class":141},[135,6465,6466],{"class":137,"line":3590},[135,6467,373],{"emptyLinePlaceholder":372},[135,6469,6470,6473],{"class":137,"line":3595},[135,6471,6472],{"class":167},".sticky-wrapper",[135,6474,1669],{"class":141},[135,6476,6477,6479,6481,6483,6485],{"class":137,"line":3609},[135,6478,5078],{"class":533},[135,6480,4708],{"class":141},[135,6482,3219],{"class":533},[135,6484,5085],{"class":498},[135,6486,4741],{"class":141},[135,6488,6489,6491,6493,6495,6497,6499],{"class":137,"line":3619},[135,6490,4858],{"class":533},[135,6492,4708],{"class":141},[135,6494,3219],{"class":533},[135,6496,5357],{"class":498},[135,6498,4869],{"class":141},[135,6500,6501],{"class":610},"\u002F* 占满整个屏幕 *\u002F\n",[135,6503,6504,6506,6508,6510],{"class":137,"line":3648},[135,6505,4802],{"class":533},[135,6507,4708],{"class":141},[135,6509,4807],{"class":533},[135,6511,4741],{"class":141},[135,6513,6514,6516,6518,6520],{"class":137,"line":3663},[135,6515,4815],{"class":533},[135,6517,4708],{"class":141},[135,6519,4820],{"class":533},[135,6521,4741],{"class":141},[135,6523,6524,6526,6528,6530],{"class":137,"line":3669},[135,6525,4828],{"class":533},[135,6527,4708],{"class":141},[135,6529,4820],{"class":533},[135,6531,4741],{"class":141},[135,6533,6534],{"class":137,"line":3674},[135,6535,575],{"class":141},[135,6537,6538],{"class":137,"line":3683},[135,6539,373],{"emptyLinePlaceholder":372},[135,6541,6542,6545],{"class":137,"line":3703},[135,6543,6544],{"class":167},".scroll-content",[135,6546,1669],{"class":141},[135,6548,6549],{"class":137,"line":3727},[135,6550,6551],{"class":610},"  \u002F* 这里可以自定义内容的基础样式，动画由 GSAP 控制 *\u002F\n",[135,6553,6554,6557,6559,6561,6563],{"class":137,"line":3747},[135,6555,6556],{"class":533},"  padding",[135,6558,4708],{"class":141},[135,6560,1721],{"class":533},[135,6562,5021],{"class":498},[135,6564,4741],{"class":141},[135,6566,6567,6570,6572,6575,6577],{"class":137,"line":3752},[135,6568,6569],{"class":533},"  max-width",[135,6571,4708],{"class":141},[135,6573,6574],{"class":533},"800",[135,6576,5034],{"class":498},[135,6578,4741],{"class":141},[135,6580,6581,6584,6586,6588],{"class":137,"line":3762},[135,6582,6583],{"class":533},"  text-align",[135,6585,4708],{"class":141},[135,6587,4820],{"class":533},[135,6589,4741],{"class":141},[135,6591,6592,6595,6597,6599],{"class":137,"line":3772},[135,6593,6594],{"class":533},"  color",[135,6596,4708],{"class":141},[135,6598,4900],{"class":533},[135,6600,4741],{"class":141},[135,6602,6603,6606,6608,6610,6612],{"class":137,"line":3794},[135,6604,6605],{"class":533},"  font-size",[135,6607,4708],{"class":141},[135,6609,5524],{"class":533},[135,6611,5021],{"class":498},[135,6613,4741],{"class":141},[135,6615,6616,6619,6621,6624],{"class":137,"line":3805},[135,6617,6618],{"class":533},"  font-weight",[135,6620,4708],{"class":141},[135,6622,6623],{"class":533},"bold",[135,6625,4741],{"class":141},[135,6627,6628,6631,6634],{"class":137,"line":3810},[135,6629,6630],{"class":533},"  will-change",[135,6632,6633],{"class":141},": transform, opacity; ",[135,6635,6636],{"class":610},"\u002F* 提示浏览器开启硬件加速 *\u002F\n",[135,6638,6639],{"class":137,"line":3815},[135,6640,575],{"class":141},[135,6642,6643,6645,6647],{"class":137,"line":3820},[135,6644,362],{"class":141},[135,6646,4688],{"class":151},[135,6648,155],{"class":141},[10,6650,6651],{},"然后还有横线滚动的类型：",[6653,6654,6655,6670,6683,6696],"gsap-horizontal-scroll",{},[164,6656,821,6659],{"className":6657},[6658],"panel",[164,6660,829,6663,829,6667,821],{"className":6661},[6662],"panel-content",[94,6664,6666],{"id":6665},"panel-1","Panel 1",[10,6668,6669],{},"向下滚动页面，这整个区域会变成横向滑动。",[164,6671,821,6673],{"className":6672},[6658],[164,6674,829,6676,829,6680,821],{"className":6675},[6662],[94,6677,6679],{"id":6678},"panel-2","Panel 2",[10,6681,6682],{},"你可以在这里放任意内容。",[164,6684,821,6686],{"className":6685},[6658],[164,6687,829,6689,829,6693,821],{"className":6688},[6662],[94,6690,6692],{"id":6691},"panel-3","Panel 3",[10,6694,6695],{},"也可以放图片，或者代码块。",[164,6697,821,6699],{"className":6698},[6658],[164,6700,829,6702,829,6706,821],{"className":6701},[6662],[94,6703,6705],{"id":6704},"panel-4","Panel 4",[10,6707,6708],{},"滑到底部就会恢复正常的垂直滚动。",[10,6710,6711,6712,6715,6716,6719],{},"横向滚动非常耗性能（因为是直接修改 layout 属性），所以组件里加了 ",[132,6713,6714],{},"will-change: transform"," 提示浏览器硬件加速。另外，如果在移动端（手机）上，这种交互经常会和原生的左右滑动冲突，建议在移动端通过媒体查询关掉 ",[132,6717,6718],{},"pin"," 效果，但这对于 PC 端阅读体验来说，绝对是个加分项",[10,6721,6722],{},"这个在gsap里是一个视觉欺骗的办法，它是把垂直方向的滚动距离映射成了水平方向的移动距离。",[10,6724,6725],{},"在DOM结构上，我们的所有内容都在一个track容器里，通过css的display: flex; flex-wrap: nowrap;强制排列在一行，如果不加限制，那么超出的内容会被挤压，我们需要给track设置width: fit-content，让他撑开，暴露出真实的超长宽度。",[10,6727,6728,6729,6731,6732,6735,6736,6739],{},"由于用户滚轮，页面会一直往下走，横向内容没有人看，那么我们在 ",[132,6730,74],{}," 里设置了 ",[132,6733,6734],{},"pin: true","。一旦这个容器顶部碰到屏幕顶部，GSAP 就会给容器加上固定定位（类似于 CSS 的 ",[132,6737,6738],{},"position: fixed","），把整个横向轨道“冻”在屏幕正中。同时，GSAP 会在页面底部自动插入等高的占位符，保证页面的滚动条依然存在，用户可以继续往下滚",[10,6741,6742,6743,6745,6746,6748,6749,6752],{},"既然屏幕冻住了，用户往下滚的时候，页面上看不到任何位移。但实际上，用户的滚动事件被 ",[132,6744,74],{}," 拦截了。",[2361,6747],{},"\n我们在 ",[132,6750,6751],{},"gsap.to()"," 里写了",[125,6754,6756],{"className":489,"code":6755,"language":491,"meta":130,"style":130},"x: () => -(track.scrollWidth - window.innerWidth)\n",[132,6757,6758],{"__ignoreMap":130},[135,6759,6760,6763,6765,6767,6770,6773,6775],{"class":137,"line":138},[135,6761,6762],{"class":167},"x",[135,6764,3709],{"class":141},[135,6766,3174],{"class":498},[135,6768,6769],{"class":498}," -",[135,6771,6772],{"class":141},"(track.scrollWidth ",[135,6774,530],{"class":498},[135,6776,6777],{"class":141}," window.innerWidth)\n",[10,6779,6780,6781,6784],{},"这行代码的意思是：",[14,6782,6783],{},"让轨道的 X 轴向左移动，移动的总距离 = 轨道总宽度 - 屏幕宽度","。",[10,6786,6787,6788,6791],{},"结合 ",[132,6789,6790],{},"scrub: 1","，这个位移不再是瞬间发生的，而是完全跟你的滚动条深度绑定的。你往下滚 10 像素，轨道就向左移 10 像素（带点平滑延迟）。用户以为自己是在“往下滚”，但在视觉上，内容是从右往左滑过去的",[10,6793,5654],{},[125,6795,6797],{"className":127,"code":6796,"language":129,"meta":130,"style":130},"\u003Cscript setup>\nimport { ref, onMounted, onUnmounted, nextTick } from 'vue'\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap\u002FScrollTrigger'\ngsap.registerPlugin(ScrollTrigger)\n\nconst containerRef = ref(null)\nconst trackRef = ref(null)\n\nonMounted(async () => {\n  await nextTick()\n  if (!containerRef.value || !trackRef.value) return\n\n  \u002F\u002F 获取需要横向滚动的轨道元素\n  const track = trackRef.value\n  \u002F\u002F 获取所有面板项\n  const panels = gsap.utils.toArray('.panel', track)\n\n  \u002F\u002F 关键逻辑：垂直滚动转换为横向平移\n  gsap.to(track, {\n    x: () => -(track.scrollWidth - window.innerWidth),\n    ease: 'none',\n    scrollTrigger: {\n      trigger: containerRef.value,\n      start: 'top top', \u002F\u002F 当容器顶部到达视口顶部时开始\n      end: () => '+=' + (track.scrollWidth - window.innerWidth), \u002F\u002F 滚动距离等于横向超出的宽度\n      pin: true, \u002F\u002F 把容器钉在屏幕上\n      scrub: 1, \u002F\u002F 平滑跟随，1秒延迟让手感更顺\n      invalidateOnRefresh: true, \u002F\u002F 窗口尺寸变化时重新计算\n      anticipatePin: 1\n    }\n  })\n\n  \u002F\u002F 附加效果：每个面板进入屏幕时的轻微动画（可选）\n  panels.forEach((panel) => {\n    gsap.from(panel.querySelector('.panel-content'), {\n      scale: 0.8,\n      opacity: 0.5,\n      scrollTrigger: {\n        trigger: panel,\n        containerAnimation: gsap.getTweensOf(track)[0], \u002F\u002F 这是横向滚动中触发内部动画的关键\n        start: 'left center', \u002F\u002F 当面板左侧到达屏幕中心时\n        end: 'right center',\n        scrub: true,\n        toggleActions: 'play none none reverse'\n      }\n    })\n  })\n})\n\nonUnmounted(() => {\n  ScrollTrigger.getAll().forEach(t => t.kill())\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv ref=\"containerRef\" class=\"horizontal-container\">\n    \u003Cdiv ref=\"trackRef\" class=\"horizontal-track\">\n      \u003Cslot \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n\u002F* 容器：固定在屏幕上，阻止原生横向滚动 *\u002F\n.horizontal-container {\n  width: 100%;\n  height: 100vh;\n  overflow: hidden;\n  background: #1D1F20;\n}\n\n\u002F* 轨道：弹性排布所有面板 *\u002F\n.horizontal-track {\n  display: flex;\n  flex-wrap: nowrap;\n  width: fit-content;\n  height: 100vh;\n  align-items: center;\n  padding: 0 10vw; \u002F* 两侧留白 *\u002F\n  will-change: transform;\n}\n\n\u002F* 针对 slot 传入的面板默认样式（可被 MDC 内联覆盖） *\u002F\n.horizontal-track :deep(.panel) {\n  width: 80vw;\n  height: 60vh;\n  flex-shrink: 0;\n  margin-right: 5vw;\n  border-radius: 16px;\n  background: #232323;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.3);\n}\n\n.horizontal-track :deep(.panel-content) {\n  padding: 2rem;\n  text-align: center;\n}\n\u003C\u002Fstyle>\n",[132,6798,6799,6809,6819,6829,6839,6847,6851,6867,6884,6888,6902,6910,6929,6933,6938,6950,6955,6978,6982,6987,6996,7014,7022,7026,7030,7041,7066,7078,7089,7101,7108,7112,7116,7120,7125,7143,7161,7170,7178,7183,7188,7207,7220,7230,7239,7247,7252,7256,7260,7264,7268,7278,7300,7304,7312,7316,7324,7345,7367,7377,7385,7393,7401,7405,7415,7420,7427,7439,7451,7461,7472,7476,7480,7485,7492,7502,7514,7525,7537,7547,7565,7572,7576,7580,7585,7596,7609,7622,7633,7647,7660,7670,7680,7690,7700,7711,7751,7755,7759,7770,7782,7792,7796],{"__ignoreMap":130},[135,6800,6801,6803,6805,6807],{"class":137,"line":138},[135,6802,148],{"class":141},[135,6804,2385],{"class":151},[135,6806,2388],{"class":167},[135,6808,155],{"class":141},[135,6810,6811,6813,6815,6817],{"class":137,"line":145},[135,6812,2395],{"class":498},[135,6814,2398],{"class":141},[135,6816,519],{"class":498},[135,6818,2403],{"class":174},[135,6820,6821,6823,6825,6827],{"class":137,"line":158},[135,6822,2395],{"class":498},[135,6824,2410],{"class":141},[135,6826,519],{"class":498},[135,6828,2415],{"class":174},[135,6830,6831,6833,6835,6837],{"class":137,"line":188},[135,6832,2395],{"class":498},[135,6834,5696],{"class":141},[135,6836,519],{"class":498},[135,6838,5701],{"class":174},[135,6840,6841,6843,6845],{"class":137,"line":205},[135,6842,2432],{"class":141},[135,6844,2435],{"class":167},[135,6846,5710],{"class":141},[135,6848,6849],{"class":137,"line":245},[135,6850,373],{"emptyLinePlaceholder":372},[135,6852,6853,6855,6857,6859,6861,6863,6865],{"class":137,"line":280},[135,6854,1214],{"class":498},[135,6856,5773],{"class":533},[135,6858,910],{"class":498},[135,6860,168],{"class":167},[135,6862,738],{"class":141},[135,6864,2803],{"class":533},[135,6866,924],{"class":141},[135,6868,6869,6871,6874,6876,6878,6880,6882],{"class":137,"line":308},[135,6870,1214],{"class":498},[135,6872,6873],{"class":533}," trackRef",[135,6875,910],{"class":498},[135,6877,168],{"class":167},[135,6879,738],{"class":141},[135,6881,2803],{"class":533},[135,6883,924],{"class":141},[135,6885,6886],{"class":137,"line":318},[135,6887,373],{"emptyLinePlaceholder":372},[135,6889,6890,6892,6894,6896,6898,6900],{"class":137,"line":334},[135,6891,3163],{"class":167},[135,6893,738],{"class":141},[135,6895,3168],{"class":498},[135,6897,3171],{"class":141},[135,6899,3174],{"class":498},[135,6901,1669],{"class":141},[135,6903,6904,6906,6908],{"class":137,"line":340},[135,6905,3181],{"class":498},[135,6907,3184],{"class":167},[135,6909,3187],{"class":141},[135,6911,6912,6914,6916,6918,6920,6922,6924,6927],{"class":137,"line":349},[135,6913,1416],{"class":498},[135,6915,1278],{"class":141},[135,6917,1421],{"class":498},[135,6919,5854],{"class":141},[135,6921,3139],{"class":498},[135,6923,1432],{"class":498},[135,6925,6926],{"class":141},"trackRef.value) ",[135,6928,1438],{"class":498},[135,6930,6931],{"class":137,"line":359},[135,6932,373],{"emptyLinePlaceholder":372},[135,6934,6935],{"class":137,"line":369},[135,6936,6937],{"class":610},"  \u002F\u002F 获取需要横向滚动的轨道元素\n",[135,6939,6940,6942,6945,6947],{"class":137,"line":376},[135,6941,904],{"class":498},[135,6943,6944],{"class":533}," track",[135,6946,910],{"class":498},[135,6948,6949],{"class":141}," trackRef.value\n",[135,6951,6952],{"class":137,"line":382},[135,6953,6954],{"class":610},"  \u002F\u002F 获取所有面板项\n",[135,6956,6957,6959,6962,6964,6967,6970,6972,6975],{"class":137,"line":388},[135,6958,904],{"class":498},[135,6960,6961],{"class":533}," panels",[135,6963,910],{"class":498},[135,6965,6966],{"class":141}," gsap.utils.",[135,6968,6969],{"class":167},"toArray",[135,6971,738],{"class":141},[135,6973,6974],{"class":174},"'.panel'",[135,6976,6977],{"class":141},", track)\n",[135,6979,6980],{"class":137,"line":394},[135,6981,373],{"emptyLinePlaceholder":372},[135,6983,6984],{"class":137,"line":400},[135,6985,6986],{"class":610},"  \u002F\u002F 关键逻辑：垂直滚动转换为横向平移\n",[135,6988,6989,6991,6993],{"class":137,"line":405},[135,6990,2208],{"class":141},[135,6992,1860],{"class":167},[135,6994,6995],{"class":141},"(track, {\n",[135,6997,6998,7001,7003,7005,7007,7009,7011],{"class":137,"line":411},[135,6999,7000],{"class":167},"    x",[135,7002,3709],{"class":141},[135,7004,3174],{"class":498},[135,7006,6769],{"class":498},[135,7008,6772],{"class":141},[135,7010,530],{"class":498},[135,7012,7013],{"class":141}," window.innerWidth),\n",[135,7015,7016,7018,7020],{"class":137,"line":417},[135,7017,562],{"class":141},[135,7019,5756],{"class":174},[135,7021,537],{"class":141},[135,7023,7024],{"class":137,"line":422},[135,7025,5891],{"class":141},[135,7027,7028],{"class":137,"line":428},[135,7029,5896],{"class":141},[135,7031,7032,7034,7036,7038],{"class":137,"line":434},[135,7033,5901],{"class":141},[135,7035,5904],{"class":174},[135,7037,1724],{"class":141},[135,7039,7040],{"class":610},"\u002F\u002F 当容器顶部到达视口顶部时开始\n",[135,7042,7043,7046,7048,7050,7053,7055,7058,7060,7063],{"class":137,"line":440},[135,7044,7045],{"class":167},"      end",[135,7047,3709],{"class":141},[135,7049,3174],{"class":498},[135,7051,7052],{"class":174}," '+='",[135,7054,1693],{"class":498},[135,7056,7057],{"class":141}," (track.scrollWidth ",[135,7059,530],{"class":498},[135,7061,7062],{"class":141}," window.innerWidth), ",[135,7064,7065],{"class":610},"\u002F\u002F 滚动距离等于横向超出的宽度\n",[135,7067,7068,7071,7073,7075],{"class":137,"line":446},[135,7069,7070],{"class":141},"      pin: ",[135,7072,2166],{"class":533},[135,7074,1724],{"class":141},[135,7076,7077],{"class":610},"\u002F\u002F 把容器钉在屏幕上\n",[135,7079,7080,7082,7084,7086],{"class":137,"line":452},[135,7081,5927],{"class":141},[135,7083,1924],{"class":533},[135,7085,1724],{"class":141},[135,7087,7088],{"class":610},"\u002F\u002F 平滑跟随，1秒延迟让手感更顺\n",[135,7090,7091,7094,7096,7098],{"class":137,"line":458},[135,7092,7093],{"class":141},"      invalidateOnRefresh: ",[135,7095,2166],{"class":533},[135,7097,1724],{"class":141},[135,7099,7100],{"class":610},"\u002F\u002F 窗口尺寸变化时重新计算\n",[135,7102,7103,7105],{"class":137,"line":464},[135,7104,5959],{"class":141},[135,7106,7107],{"class":533},"1\n",[135,7109,7110],{"class":137,"line":469},[135,7111,1319],{"class":141},[135,7113,7114],{"class":137,"line":1475},[135,7115,570],{"class":141},[135,7117,7118],{"class":137,"line":1488},[135,7119,373],{"emptyLinePlaceholder":372},[135,7121,7122],{"class":137,"line":1510},[135,7123,7124],{"class":610},"  \u002F\u002F 附加效果：每个面板进入屏幕时的轻微动画（可选）\n",[135,7126,7127,7130,7132,7135,7137,7139,7141],{"class":137,"line":1530},[135,7128,7129],{"class":141},"  panels.",[135,7131,6119],{"class":167},[135,7133,7134],{"class":141},"((",[135,7136,6658],{"class":1281},[135,7138,750],{"class":141},[135,7140,3174],{"class":498},[135,7142,1669],{"class":141},[135,7144,7145,7147,7149,7152,7154,7156,7159],{"class":137,"line":1535},[135,7146,1857],{"class":141},[135,7148,519],{"class":167},[135,7150,7151],{"class":141},"(panel.",[135,7153,1263],{"class":167},[135,7155,738],{"class":141},[135,7157,7158],{"class":174},"'.panel-content'",[135,7160,3275],{"class":141},[135,7162,7163,7165,7168],{"class":137,"line":1541},[135,7164,6006],{"class":141},[135,7166,7167],{"class":533},"0.8",[135,7169,537],{"class":141},[135,7171,7172,7174,7176],{"class":137,"line":1552},[135,7173,3765],{"class":141},[135,7175,684],{"class":533},[135,7177,537],{"class":141},[135,7179,7180],{"class":137,"line":1562},[135,7181,7182],{"class":141},"      scrollTrigger: {\n",[135,7184,7185],{"class":137,"line":1572},[135,7186,7187],{"class":141},"        trigger: panel,\n",[135,7189,7190,7193,7196,7199,7201,7204],{"class":137,"line":1582},[135,7191,7192],{"class":141},"        containerAnimation: gsap.",[135,7194,7195],{"class":167},"getTweensOf",[135,7197,7198],{"class":141},"(track)[",[135,7200,545],{"class":533},[135,7202,7203],{"class":141},"], ",[135,7205,7206],{"class":610},"\u002F\u002F 这是横向滚动中触发内部动画的关键\n",[135,7208,7209,7212,7215,7217],{"class":137,"line":1591},[135,7210,7211],{"class":141},"        start: ",[135,7213,7214],{"class":174},"'left center'",[135,7216,1724],{"class":141},[135,7218,7219],{"class":610},"\u002F\u002F 当面板左侧到达屏幕中心时\n",[135,7221,7222,7225,7228],{"class":137,"line":1596},[135,7223,7224],{"class":141},"        end: ",[135,7226,7227],{"class":174},"'right center'",[135,7229,537],{"class":141},[135,7231,7232,7235,7237],{"class":137,"line":2085},[135,7233,7234],{"class":141},"        scrub: ",[135,7236,2166],{"class":533},[135,7238,537],{"class":141},[135,7240,7241,7244],{"class":137,"line":2097},[135,7242,7243],{"class":141},"        toggleActions: ",[135,7245,7246],{"class":174},"'play none none reverse'\n",[135,7248,7249],{"class":137,"line":2107},[135,7250,7251],{"class":141},"      }\n",[135,7253,7254],{"class":137,"line":2117},[135,7255,3666],{"class":141},[135,7257,7258],{"class":137,"line":2128},[135,7259,570],{"class":141},[135,7261,7262],{"class":137,"line":2133},[135,7263,461],{"class":141},[135,7265,7266],{"class":137,"line":2143},[135,7267,373],{"emptyLinePlaceholder":372},[135,7269,7270,7272,7274,7276],{"class":137,"line":2152},[135,7271,3311],{"class":167},[135,7273,3314],{"class":141},[135,7275,3174],{"class":498},[135,7277,1669],{"class":141},[135,7279,7280,7282,7284,7286,7288,7290,7292,7294,7296,7298],{"class":137,"line":2161},[135,7281,6111],{"class":141},[135,7283,6114],{"class":167},[135,7285,1702],{"class":141},[135,7287,6119],{"class":167},[135,7289,738],{"class":141},[135,7291,6124],{"class":1281},[135,7293,1666],{"class":498},[135,7295,6129],{"class":141},[135,7297,3799],{"class":167},[135,7299,6134],{"class":141},[135,7301,7302],{"class":137,"line":2171},[135,7303,461],{"class":141},[135,7305,7306,7308,7310],{"class":137,"line":2181},[135,7307,362],{"class":141},[135,7309,2385],{"class":151},[135,7311,155],{"class":141},[135,7313,7314],{"class":137,"line":2189},[135,7315,373],{"emptyLinePlaceholder":372},[135,7317,7318,7320,7322],{"class":137,"line":2194},[135,7319,148],{"class":141},[135,7321,152],{"class":151},[135,7323,155],{"class":141},[135,7325,7326,7328,7330,7332,7334,7336,7338,7340,7343],{"class":137,"line":2199},[135,7327,161],{"class":141},[135,7329,164],{"class":151},[135,7331,168],{"class":167},[135,7333,171],{"class":141},[135,7335,175],{"class":174},[135,7337,178],{"class":167},[135,7339,171],{"class":141},[135,7341,7342],{"class":174},"\"horizontal-container\"",[135,7344,155],{"class":141},[135,7346,7347,7349,7351,7353,7355,7358,7360,7362,7365],{"class":137,"line":2205},[135,7348,191],{"class":141},[135,7350,164],{"class":151},[135,7352,168],{"class":167},[135,7354,171],{"class":141},[135,7356,7357],{"class":174},"\"trackRef\"",[135,7359,178],{"class":167},[135,7361,171],{"class":141},[135,7363,7364],{"class":174},"\"horizontal-track\"",[135,7366,155],{"class":141},[135,7368,7369,7371,7373,7375],{"class":137,"line":2224},[135,7370,208],{"class":141},[135,7372,6293],{"class":151},[135,7374,4372],{"class":4371},[135,7376,155],{"class":141},[135,7378,7379,7381,7383],{"class":137,"line":2234},[135,7380,311],{"class":141},[135,7382,164],{"class":151},[135,7384,155],{"class":141},[135,7386,7387,7389,7391],{"class":137,"line":2244},[135,7388,352],{"class":141},[135,7390,164],{"class":151},[135,7392,155],{"class":141},[135,7394,7395,7397,7399],{"class":137,"line":2254},[135,7396,362],{"class":141},[135,7398,152],{"class":151},[135,7400,155],{"class":141},[135,7402,7403],{"class":137,"line":3308},[135,7404,373],{"emptyLinePlaceholder":372},[135,7406,7407,7409,7411,7413],{"class":137,"line":3321},[135,7408,148],{"class":141},[135,7410,4688],{"class":151},[135,7412,4691],{"class":167},[135,7414,155],{"class":141},[135,7416,7417],{"class":137,"line":3336},[135,7418,7419],{"class":610},"\u002F* 容器：固定在屏幕上，阻止原生横向滚动 *\u002F\n",[135,7421,7422,7425],{"class":137,"line":3341},[135,7423,7424],{"class":167},".horizontal-container",[135,7426,1669],{"class":141},[135,7428,7429,7431,7433,7435,7437],{"class":137,"line":3346},[135,7430,5078],{"class":533},[135,7432,4708],{"class":141},[135,7434,3219],{"class":533},[135,7436,5085],{"class":498},[135,7438,4741],{"class":141},[135,7440,7441,7443,7445,7447,7449],{"class":137,"line":3365},[135,7442,4858],{"class":533},[135,7444,4708],{"class":141},[135,7446,3219],{"class":533},[135,7448,5357],{"class":498},[135,7450,4741],{"class":141},[135,7452,7453,7455,7457,7459],{"class":137,"line":3381},[135,7454,6453],{"class":533},[135,7456,4708],{"class":141},[135,7458,4943],{"class":533},[135,7460,4741],{"class":141},[135,7462,7463,7465,7467,7470],{"class":137,"line":3386},[135,7464,4772],{"class":533},[135,7466,4708],{"class":141},[135,7468,7469],{"class":533},"#1D1F20",[135,7471,4741],{"class":141},[135,7473,7474],{"class":137,"line":3399},[135,7475,575],{"class":141},[135,7477,7478],{"class":137,"line":3410},[135,7479,373],{"emptyLinePlaceholder":372},[135,7481,7482],{"class":137,"line":3416},[135,7483,7484],{"class":610},"\u002F* 轨道：弹性排布所有面板 *\u002F\n",[135,7486,7487,7490],{"class":137,"line":3427},[135,7488,7489],{"class":167},".horizontal-track",[135,7491,1669],{"class":141},[135,7493,7494,7496,7498,7500],{"class":137,"line":3438},[135,7495,4802],{"class":533},[135,7497,4708],{"class":141},[135,7499,4807],{"class":533},[135,7501,4741],{"class":141},[135,7503,7504,7507,7509,7512],{"class":137,"line":3449},[135,7505,7506],{"class":533},"  flex-wrap",[135,7508,4708],{"class":141},[135,7510,7511],{"class":533},"nowrap",[135,7513,4741],{"class":141},[135,7515,7516,7518,7520,7523],{"class":137,"line":3454},[135,7517,5078],{"class":533},[135,7519,4708],{"class":141},[135,7521,7522],{"class":533},"fit-content",[135,7524,4741],{"class":141},[135,7526,7527,7529,7531,7533,7535],{"class":137,"line":3464},[135,7528,4858],{"class":533},[135,7530,4708],{"class":141},[135,7532,3219],{"class":533},[135,7534,5357],{"class":498},[135,7536,4741],{"class":141},[135,7538,7539,7541,7543,7545],{"class":137,"line":3474},[135,7540,4815],{"class":533},[135,7542,4708],{"class":141},[135,7544,4820],{"class":533},[135,7546,4741],{"class":141},[135,7548,7549,7551,7553,7555,7557,7560,7562],{"class":137,"line":3479},[135,7550,6556],{"class":533},[135,7552,4708],{"class":141},[135,7554,545],{"class":533},[135,7556,5204],{"class":533},[135,7558,7559],{"class":498},"vw",[135,7561,4869],{"class":141},[135,7563,7564],{"class":610},"\u002F* 两侧留白 *\u002F\n",[135,7566,7567,7569],{"class":137,"line":3491},[135,7568,6630],{"class":533},[135,7570,7571],{"class":141},": transform;\n",[135,7573,7574],{"class":137,"line":3505},[135,7575,575],{"class":141},[135,7577,7578],{"class":137,"line":3518},[135,7579,373],{"emptyLinePlaceholder":372},[135,7581,7582],{"class":137,"line":3531},[135,7583,7584],{"class":610},"\u002F* 针对 slot 传入的面板默认样式（可被 MDC 内联覆盖） *\u002F\n",[135,7586,7587,7589,7591,7594],{"class":137,"line":3552},[135,7588,7489],{"class":167},[135,7590,5251],{"class":141},[135,7592,7593],{"class":167},".panel",[135,7595,511],{"class":141},[135,7597,7598,7600,7602,7605,7607],{"class":137,"line":3557},[135,7599,5078],{"class":533},[135,7601,4708],{"class":141},[135,7603,7604],{"class":533},"80",[135,7606,7559],{"class":498},[135,7608,4741],{"class":141},[135,7610,7611,7613,7615,7618,7620],{"class":137,"line":3574},[135,7612,4858],{"class":533},[135,7614,4708],{"class":141},[135,7616,7617],{"class":533},"60",[135,7619,5357],{"class":498},[135,7621,4741],{"class":141},[135,7623,7624,7627,7629,7631],{"class":137,"line":3590},[135,7625,7626],{"class":533},"  flex-shrink",[135,7628,4708],{"class":141},[135,7630,545],{"class":533},[135,7632,4741],{"class":141},[135,7634,7635,7638,7640,7643,7645],{"class":137,"line":3595},[135,7636,7637],{"class":533},"  margin-right",[135,7639,4708],{"class":141},[135,7641,7642],{"class":533},"5",[135,7644,7559],{"class":498},[135,7646,4741],{"class":141},[135,7648,7649,7651,7653,7656,7658],{"class":137,"line":3609},[135,7650,6397],{"class":533},[135,7652,4708],{"class":141},[135,7654,7655],{"class":533},"16",[135,7657,5034],{"class":498},[135,7659,4741],{"class":141},[135,7661,7662,7664,7666,7668],{"class":137,"line":3619},[135,7663,4772],{"class":533},[135,7665,4708],{"class":141},[135,7667,5395],{"class":533},[135,7669,4741],{"class":141},[135,7671,7672,7674,7676,7678],{"class":137,"line":3648},[135,7673,4802],{"class":533},[135,7675,4708],{"class":141},[135,7677,4807],{"class":533},[135,7679,4741],{"class":141},[135,7681,7682,7684,7686,7688],{"class":137,"line":3663},[135,7683,4815],{"class":533},[135,7685,4708],{"class":141},[135,7687,4820],{"class":533},[135,7689,4741],{"class":141},[135,7691,7692,7694,7696,7698],{"class":137,"line":3669},[135,7693,4828],{"class":533},[135,7695,4708],{"class":141},[135,7697,4820],{"class":533},[135,7699,4741],{"class":141},[135,7701,7702,7704,7706,7709],{"class":137,"line":3674},[135,7703,6594],{"class":533},[135,7705,4708],{"class":141},[135,7707,7708],{"class":533},"#fff",[135,7710,4741],{"class":141},[135,7712,7713,7716,7718,7720,7722,7724,7727,7729,7732,7734,7736,7739,7741,7743,7745,7747,7749],{"class":137,"line":3683},[135,7714,7715],{"class":533},"  box-shadow",[135,7717,4708],{"class":141},[135,7719,545],{"class":533},[135,7721,5204],{"class":533},[135,7723,5034],{"class":498},[135,7725,7726],{"class":533}," 30",[135,7728,5034],{"class":498},[135,7730,7731],{"class":533}," rgba",[135,7733,738],{"class":141},[135,7735,545],{"class":533},[135,7737,7738],{"class":141},",",[135,7740,545],{"class":533},[135,7742,7738],{"class":141},[135,7744,545],{"class":533},[135,7746,7738],{"class":141},[135,7748,117],{"class":533},[135,7750,4796],{"class":141},[135,7752,7753],{"class":137,"line":3703},[135,7754,575],{"class":141},[135,7756,7757],{"class":137,"line":3727},[135,7758,373],{"emptyLinePlaceholder":372},[135,7760,7761,7763,7765,7768],{"class":137,"line":3747},[135,7762,7489],{"class":167},[135,7764,5251],{"class":141},[135,7766,7767],{"class":167},".panel-content",[135,7769,511],{"class":141},[135,7771,7772,7774,7776,7778,7780],{"class":137,"line":3752},[135,7773,6556],{"class":533},[135,7775,4708],{"class":141},[135,7777,1721],{"class":533},[135,7779,5021],{"class":498},[135,7781,4741],{"class":141},[135,7783,7784,7786,7788,7790],{"class":137,"line":3762},[135,7785,6583],{"class":533},[135,7787,4708],{"class":141},[135,7789,4820],{"class":533},[135,7791,4741],{"class":141},[135,7793,7794],{"class":137,"line":3772},[135,7795,575],{"class":141},[135,7797,7798,7800,7802],{"class":137,"line":3794},[135,7799,362],{"class":141},[135,7801,4688],{"class":151},[135,7803,155],{"class":141},[10,7805,7806,7807,7810,7811,7814,7815,7818],{},"GSAP 生态里还有几个非常顶尖的视觉特效，分别叫做沿着路径移动的",[132,7808,7809],{},"MotionPathPlugin","，然后还有SVG形状变形的 ",[132,7812,7813],{},"MorphSVGPlugin","，辉光和滤镜",[132,7816,7817],{},"Physics2DPlugin"," 或 CSS Filter。接下来有时间我们都会细细讲一下。",[94,7820,7822],{"id":7821},"其他代码的gallery展示","其他代码的Gallery展示",[110,7824,7826],{"id":7825},"彩带大炮-physics2d","彩带大炮 (Physics2D)",[10,7828,7829,7830],{},"这是一次结合了物理引擎的重力与抛物线模拟。",[823,7831,7835],{"href":7832,"rel":7833},"https:\u002F\u002Fgsap.com\u002Fdocs\u002Fv3\u002FPlugins\u002FPhysics2DPlugin\u002F",[7834],"nofollow","Physics2D | GSAP | Docs & Learning",[7837,7838],"gsap-cannon",{},[110,7840,7842],{"id":7841},"浮起来的3d卡片","浮起来的3D卡片",[7844,7845],"gsap-tilt",{},[110,7847,7848],{"id":7848},"文字遮罩效果",[7850,7851],"gsap-reveal-text",{},[110,7853,7854],{"id":7854},"文字沿贝塞尔曲线飞入",[7856,7857],"gsap-motion-path",{},[110,7859,7860],{"id":7860},"流水跑马灯",[10,7862,7863,7864,7867,7868],{},"展示技术栈、品牌 Logo 或合作伙伴最经典的用法。因为它需要",[14,7865,7866],{},"无限循环","，所以实现原理非常简单：",[14,7869,7870],{},"把内容复制两份，然后用 GSAP 让它永远向左平移",[7872,7873],"gsap-marquee",{},[110,7875,7876],{"id":7876},"聚光灯跟随",[10,7878,7879],{},"整个板块背景是暗黑的，一束圆形的“手电筒光芒”会实时跟随着你的鼠标移动，照亮鼠标下方的区域（可以照亮局部文字，也可以照亮一整张图片）。",[7881,7882],"gsap-spotlight",{},[4688,7884,7885],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}",{"title":130,"searchDepth":145,"depth":145,"links":7887},[7888,7889,7897],{"id":96,"depth":145,"text":96},{"id":108,"depth":145,"text":108,"children":7890},[7891,7892,7893,7894,7895,7896],{"id":112,"depth":158,"text":112},{"id":478,"depth":158,"text":478},{"id":679,"depth":158,"text":680},{"id":810,"depth":158,"text":810},{"id":1007,"depth":158,"text":1007},{"id":5556,"depth":158,"text":5557},{"id":7821,"depth":145,"text":7822,"children":7898},[7899,7900,7901,7902,7903,7904],{"id":7825,"depth":158,"text":7826},{"id":7841,"depth":158,"text":7842},{"id":7848,"depth":158,"text":7848},{"id":7854,"depth":158,"text":7854},{"id":7860,"depth":158,"text":7860},{"id":7876,"depth":158,"text":7876},"截至2026年，GSAP的所有模块（包括以前收费的会员专属插件）现在都完全免费了，可以免费用于商业项目。","md",{"date":7908,"tags":7909},"2026-09-02",[7910,7911],"css","gsap","\u002Fcss\u002Fgsap",{"description":7905},"css\u002Fgsap","Oj-5YGIxLtMpufbJ8mwwJISLDYO2s-WbwzFyTfAcGH8",1792338201972]