Having issues using AOS animation with svelte kit

Question

I'm using for the first time svelte for a portfolio and coming from React I must say it's really fun and easy to use !

But recently i had issues using AOS with svelte kit. Mostly when I'm going from a page to another using href the animations won't load. But when i'm refreshing the page (with cmd+R) it works again.

The link to the repo

I'm using this method in my __layout.svelte. Putting it in onMount or not doesn't change anything.

    onMount(() => {
        AOS.init();
    });

Then in another page i'm using AOS like below

        <h1
            data-aos="slide-right"
            data-aos-duration="1000"
        >
            Allianz France
        </h1>

And to go from page to page i'm using

            <a
                href="allianz"
                sveltekit:reload
                out:fly|local={{ x: -200, duration: 1000, delay: 300 }}
                in:fly={{ x: 200, duration: 1000, delay: 1300 }}
                id="allianz"
            >

Using sveltekit:reload does not change anything.

package.json

"aos": "^3.0.0-beta.6"

Answer 1

The AOS (Animate on Scroll) library will look inside the DOM for elements with the data-aos attributes, it even watches for DOM changes.

That feature has limitations. When Svelte manages the DOM or the layout changes based on other factors the AOS library needs a little help.

AOS.refresh();

When you should call that method depends on your app.

Tip: For debugging add window.AOS = AOS; inside an onMount, that allows calling the OAS.refresh() from the console.

Answer 2

Maybe you are missing to import the aos.css file?

Your +layout.svelte file should look like this kind of:

<script lang="ts">
   import 'aos/dist/aos.css';
   // @ts-ignore
   import AOS from "aos";

   import { onMount } from 'svelte';

   onMount(() => {
      AOS.init();
   });
</script>

<slot/>