SvelteKit结合GSAP ScrollTrigger开发时onMount二次不触发问题求助

我完全懂你现在的挫败感——本来以为SvelteKit+GSAP是做动画网站的完美组合，结果来回切页面就卡顿崩溃，返回旧页面连动画都跑不起来，太闹心了！咱们一步步拆解问题，解决掉这些坑：

核心问题分析 #

1. 卡顿/崩溃根源：ScrollTrigger实例没被精准清理，每次页面切换都新增实例，积累起来导致内存泄漏。你之前用ScrollTrigger.getAll().forEach(trigger => trigger.kill())会把所有页面的触发器都杀掉，不仅会影响当前活跃页面，还可能引发意想不到的副作用。
2. onMount不触发：大概率是组件缓存或清理逻辑影响了组件生命周期，加上你在每个页面重复注册ScrollTrigger，可能干扰了SvelteKit的客户端导航机制。

分步解决方案 #

1. 全局注册GSAP插件，避免重复注册 #

不要在每个页面的onMount里注册ScrollTrigger，这会导致重复注册（哪怕GSAP兼容重复注册，也没必要）。直接在根布局+layout.svelte里注册一次：

<script>
  import { gsap } from 'gsap';
  import { ScrollTrigger } from 'gsap/dist/ScrollTrigger.js';

  // 全局注册一次，所有页面共享
  gsap.registerPlugin(ScrollTrigger);
</script>

<slot />

2. 精准清理当前页面的ScrollTrigger实例 #

不要杀掉所有触发器，只清理当前页面创建的实例。修改你的页面组件代码，保存每个ScrollTrigger的引用：

<script>
  import { gsap } from 'gsap';
  import { onMount, onDestroy } from 'svelte';

  // 保存当前页面的所有ScrollTrigger实例
  let pageTriggers = [];
  // 可选：保存timeline引用，方便彻底清理
  let pageTimelines = [];

  const initAnimations = () => {
    // Hero区域动画
    const tlHero = gsap.timeline({ 
      defaults: { duration: 1, ease: "power2" },
      scrollTrigger: {
        trigger: ".index h1",
        toggleActions: "restart none restart none",
      }
    });
    tlHero
      .from(".index h1", { x: 40, delay: 0.3 })
      .from(".hero-c2", { duration: 0.8, scale: 0.1, transformOrigin: "50% 100%" })
      .from(".hero-c3", { y: -31, delay: 0.3 })
      .from(".hero-c1", { y: 32 }, "-=1");
    
    // 保存timeline和对应的scrollTrigger
    pageTimelines.push(tlHero);
    pageTriggers.push(tlHero.scrollTrigger);

    // 列表区域动画
    const sections = gsap.utils.toArray('.lists section');
    sections.forEach((section) => {
      const anim = gsap.from(section, {
        x: 100,
        duration: 2,
        stagger: 5,
        ease: 'power4',
        opacity: 0,
        scrollTrigger: {
          trigger: section,
          toggleActions: 'restart none none reverse',
          start: 'top 80%',
        }
      });
      pageTriggers.push(anim.scrollTrigger);
    });

    // 其他动画同理，记得保存对应的scrollTrigger或timeline
  };

  onMount(() => {
    // 先重置元素状态（避免SSR渲染后的状态干扰动画）
    gsap.set(".index h1, .hero-c2, .hero-c3, .hero-c1, .lists section", {
      x: 0,
      y: 0,
      scale: 1,
      opacity: 1,
      transformOrigin: "50% 50%"
    });
    
    initAnimations();
    // 页面切换后重置滚动位置（可选，根据需求调整）
    window.scrollTo(0, 0);
  });

  onDestroy(() => {
    // 清理当前页面的所有ScrollTrigger
    pageTriggers.forEach(trigger => {
      if (trigger) trigger.kill();
    });
    // 清理timeline（彻底释放内存）
    pageTimelines.forEach(tl => {
      if (tl) tl.kill();
    });
    // 清空数组
    pageTriggers = [];
    pageTimelines = [];
  });
</script>

3. 排查组件缓存导致的onMount不触发 #

检查你的页面组件是否设置了preserveState或preserveScroll：

// 如果你加了这行，会让组件导航离开后保持状态，不会重新挂载
export const preserveState = true;

如果有，直接删掉这行——SvelteKit默认会在客户端导航时卸载旧页面组件，返回时重新挂载，preserveState会破坏这个逻辑，导致onMount不触发。

4. 调试生命周期触发情况 #

如果还是有问题，加个日志确认导航时的生命周期：

onMount(() => {
  console.log(`[${location.pathname}] 页面挂载，onTrigger触发`);
  // ... 其他代码
});

onDestroy(() => {
  console.log(`[${location.pathname}] 页面卸载，onDestroy触发`);
  // ... 其他代码
});

如果返回页面时onMount真的没触发，尝试在页面组件里临时添加export const ssr = false禁用SSR，排查是否是 hydration 冲突导致的。

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