onMount doesn't get called a second time

Question

I am building a simple website in SvelteKit and Gsap + scrollTrigger. The structure is something like this: Startpage / About / Services / Contact

Throughout the site, I use many simple animations on SVG, texts and other elements. Everything seemed fine, but as I was moving back and forth between pages, I noticed that the webpage was really slowing down and eventually started to crash. After refreshing the browser everything was fine again… (until I started navigating between pages again). I found out that I need to kill the GSAP ScrollTriggers on page transition and re-initialize them again.

So I kill the scrollTriggers, but here comes a new problem: when I start navigating (eg from /about to /contact) and come back to the previously visited page - onMount doesn't get called again and all my animations don’t start ... I use gsap like this on all route pages:

<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>

I checked in console.log if the onMount and onDestroy fire when I navigate to one of the pages. Here is the result:

// 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

I am not an expert in programming and SvelteKit combined with GSAP seemed like a great choice for my project… but now I’m stuck :-/

I would appreciate any help

In which file is this script tag? In a __layout file which controls both pages? — dummdidumm, Sep 19 '21 at 07:42
@dummdidumm I have different animations for each page so I put the GSAP related code in four index files: src/routes/index.svelte, src/routes/contact/about.svelte, src/routes/contact/index.svelte and src/routes/contact/index.svelte — Zofija, Sep 19 '21 at 09:35
Please make a [minimal, complete, and verifiable example](https://stackoverflow.com/help/minimal-reproducible-example). — Zach Saucier, Sep 20 '21 at 14:46

score 0 · Answer 1 · answered Nov 07 '22 at 12:38

This is how svelte kit works, if you navigate to the same page with a different slug then the component will not unmount - instead svelte kit will keep all the state values intact to solve this you will need to use the afterNavigate hook and use it for any state resets or in your case calling gsap.registerPlugin(ScrollTrigger);

score 0 · Answer 2 · answered Nov 07 '22 at 12:51

I think the problem here is that you are registering ScrollTrigger inside the onMount() hook. GSAP plugins should be registered globally. So you should register ScrollTrigger or any other plugins outside your main function but as soon as your App level js file. For example please try this.

// GSAP
import { gsap }                 from 'gsap/dist/gsap.js'; // Try using this path instead
import { ScrollTrigger }        from 'gsap/dist/ScrollTrigger.js';
import { onMount, onDestroy }   from 'svelte';

gsap.registerPlugin(ScrollTrigger); // Try registering it like this

const init = () => {
  // your init function code
}

Otherwise simply try using ScrollTrigger with a <script> tag.

onMount doesn't get called a second time

2 Answers2