0

我正在用 SvelteKit 和 Gsap + scrollTrigger 构建一个简单的网站。结构是这样的：Startpage / About / Services / Contact

在整个站点中，我在 SVG、文本和其他元素上使用了许多简单的动画。一切似乎都很好，但是当我在页面之间来回移动时，我注意到网页真的变慢了，最终开始崩溃。刷新浏览器后一切都很好......（直到我再次开始在页面之间导航）。我发现我需要在页面转换时终止 GSAP ScrollTriggers 并再次重新初始化它们。

所以我杀死了scrollTriggers，但出现了一个新问题：当我开始导航（例如，从/about 到/contact）并返回到之前访问过的页面时 - onMount 不再被调用并且我的所有动画都没有开始...我在所有路由页面上都使用这样的 gsap：

<script>
// GSAP
import { gsap }                 from 'gsap';
import { ScrollTrigger }        from 'gsap/dist/ScrollTrigger.js';
import { onMount, onDestroy }   from 'svelte';
    
    
    
const init = () => {


// Title + Circles
let 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") 


  // Titles - .lists sections
  const sections = gsap.utils.toArray('.lists section');
  sections.forEach((section) => {
    gsap.from(section, {
    x:100,
    duration: 2,
    stagger:5,
    ease: 'power4',
    opacity:0,
      scrollTrigger: {
        trigger: section,
        toggleActions: 'restart none none reverse',
        start: 'top 80%',
      }
    });
  });



  // … and here several other animations…

};


onMount(() => {
    gsap.registerPlugin(ScrollTrigger);
    init();
});

onDestroy(() => {
ScrollTrigger.getAll().forEach(trigger => trigger.kill());
});


</script>

当我导航到其中一个页面时，如果 onMount 和 onDestroy 触发，我检查了 console.log。结果如下：

// Navigating to /routes/index.svelte
index.svelte-016bdddb.js:1 ScrollTriggers before mount 1
index.svelte-016bdddb.js:1 ScrollTriggers after mount 3

// Navigating to /routes/contact/index.svelte
index.svelte-016bdddb.js:1 ScrollTriggers before mount 5
index.svelte-016bdddb.js:1 ScrollTriggers after mount 7
index.svelte-a4654da6.js:1 ScrollTriggers before mount 9
index.svelte-a4654da6.js:1 ScrollTriggers after mount 10
index.svelte-016bdddb.js:1 ScrollTriggers before destroy 10
index.svelte-016bdddb.js:1 ScrollTriggers after destroy 0
index.svelte-016bdddb.js:1 ScrollTriggers before destroy 0
index.svelte-016bdddb.js:1 ScrollTriggers after destroy 0

我不是编程专家，SvelteKit 与 GSAP 相结合似乎是我项目的绝佳选择……但现在我被困住了：-/

我将不胜感激任何帮助

4

0 回答 0