GSAP动画在安卓移动端Brave、Chrome浏览器运行卡顿如何优化？

1. 修复重复动画冲突 #

你当前的代码存在逻辑冗余冲突：外层gsap.fromTo已经绑定了.box-1的滚动入场/退场属性过渡，同时onEnter、onEnterBack回调中又重复定义了相同属性的动画，两个动画同时控制同一元素的y和opacity属性，会引发重复计算、属性覆盖，直接删除回调中针对.box-1的gsap.to语句即可。

2. 字符动画性能优化 #

• 提前给拆分后的字符元素开启硬件加速：给.box-1 .char类增加CSS属性will-change: transform, opacity; transform: translateZ(0);，避免动画过程中频繁重绘
• 修正动画属性错误：你当前gsap.from配置的起始opacity: 1属于无效配置，实际应该是从opacity: 0过渡到默认的opacity: 1，多余的属性计算会浪费性能
• 降低动画复杂度：移动端可将按字符动画改为按词动画，减少同时执行的动画实例数量；back缓动的回弹计算量更大，移动端可替换为power1.out等轻量缓动函数
• 提前预创建动画实例：不要每次触发回调都新建动画，提前将字符动画存入暂停状态的时间线，触发时直接调用播放即可，避免重复实例化的性能开销

3. ScrollTrigger 配置优化 #

• 增加ignoreMobileResize: true配置：该属性专门用于适配移动端浏览器导航栏/地址栏收起弹出导致的视口变化，不会强制重新计算触发位置，解决你推测的第一个卡顿诱因
• 生产环境关闭markers: true：调试用的标记会额外渲染DOM节点，增加不必要的性能消耗
• 调整pin逻辑：不要pin动画元素本身，建议pin其父级容器，避免pin操作引发的页面重排
• 增加fastScrollEnd: true配置：优化快速滚动场景下的触发逻辑，减少掉帧概率

4. 通用移动端适配 #

• 给滚动根容器添加CSS属性touch-action: pan-y，避免安卓端触摸事件与滚动逻辑冲突
• 不要给动画元素添加box-shadow、filter等重绘成本高的CSS属性，动画执行过程中会大幅降低帧率

优化后代码示例 #

<div class="container" id="contentContainer">
  <div class="content-start">
    <!-- 父级作为pin载体 -->
    <div class="pin-wrapper">
      <div class="medium-box box-1">
        The Mekong river originates in the Himalayas in China, where it is known as the Lancang. It flows through the Lower Mekong Basin countries of Myanmar, Laos, Thailand, Cambodia and Vietnam, where it reaches the South China Sea.
      </div>
    </div>
  </div>
</div>

.box-1 .char {
  will-change: transform, opacity;
  transform: translateZ(0);
}
#contentContainer {
  touch-action: pan-y;
}

let mySplitText = new SplitText('.box-1', { type: "words,chars" }),
chars = mySplitText.chars;

// 提前预创建字符动画时间线
const charTl = gsap.timeline({paused: true})
charTl.from(chars, {
  duration: 0.5,
  opacity: 0,
  scale: 0,
  ease: gsap.isTouchDevice ? "power1.out" : "back",
  stagger: gsap.isTouchDevice ? 0.02 : 0.01
})

gsap.fromTo('.box-1',
  {y: '100%', opacity: 0},
  {
    y: 0,
    opacity: 1,
    duration: 1,
    scrollTrigger: {
      trigger: '.pin-wrapper',
      start: 'top 60%',
      end: "bottom 50%",
      pin: true,
      pinSpacing: false,
      markers: false,
      ignoreMobileResize: true,
      fastScrollEnd: true,
      onEnter: () => charTl.play(0),
      onLeave: () => charTl.pause(0),
      onEnterBack: () => charTl.play(0),
      onLeaveBack: () => charTl.pause(0)
    }
})

// 页面加载完成后刷新一次触发位置
window.addEventListener('load', () => ScrollTrigger.refresh())

内容的提问来源于stack exchange，提问作者Apophis