使用带有 Svelte 套件的 AOS 动画时遇到问题

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 ( A nimate o n S croll) 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.