AOS Incompatibility With Vue Router

[Pckool]

Issue with vue-router when leaving a route then returning. The offset seems to be way off after the page changes. Making AOS reinitialize on the route load does not help either.

This is:

• Bug

Specifications

• AOS version: npm latest
• OS: Windows 10 x64 Pro
• Browser: All major browsers

Expected Behavior

AOS should work properly after returning to the route the elements are on.

Actual Behavior

The offset seems to change and the elements don't animate in until you pass them.

Steps to Reproduce the Problem

1. Use a stack including: vue, vue-router, aos, and webpack.
2. Create a .vue document with some elements defined to be animated by aos and properly route it
3. Create another .vue document to go back to and return
4. run and switch between the two routes

Detailed Description

Possible Solution

[ericuldall]

I'm having a similar issue. AOS is not initializing at all when returning. I'm testing some different lifecycle hook options to see if I can get it working, but so far no luck.

UPDATE: AOS was working for me, I had another component causing issues.

[akacanet87]

me too. It's still happening. :( When page loaded at the first time, it looks like ok. But go to other page and come back to this with router link, it seems like offset set in weird position. Animations are over before I got to that position. Please fix this.

[hudadamar21]

this bug still happening, any solution ?

[ismailkrgz01]

Hello, due to the problems I had with the transitions between routes, I manipulated the aos-animate class and made it work on every transition, I hope I helped.

I adjusted the settime out times according to the transition animation of my page.

export default { created() { setTimeout(function () { document.querySelectorAll('.aos-animate').forEach(item => { item.classList.remove("aos-animate"); setTimeout( function (){ window.scrollTo(0, 2); },600) }) },50,this) }, beforeRouteLeave (to, from, next) { next(); window.scrollTo(0, 0); document.querySelectorAll('.aos-animate').forEach(item => { item.classList.remove("aos-animate"); }) }, beforeRouteEnter (to, from, next) { next(); window.scrollTo(0, 0); } }

[simonepozzobon]

I found a workaround that worked for me using transition. I refresh AOS with AOS.refresh() on enter transition.

<router-view v-slot="{ Component }">
    <transition @enter="enter" @leave="leave">
        <component :is="Component"></component>
    </transition>
</router-view>

then

methods: {
    enter: function (el, done) {
        AOS.refresh();
        done();
    },
}

[leon-io]

I've been trying to find the problem for quite a long time and running a .refresh() in various places, but it just won't work. Not even with any solution mentioned here.

For me the problem only occurs when I work with the third-party component Swiper.js. On all pages, where Swiper.js is included, the offset shifts so that the elements are shown much later.

The problem occurs in my Nuxt 3 app only after a page change. When I reload the page, everything fades in correctly again.

I also had the idea that it might be due to the SSG, because it works on the initial page load, but not after a route change. But it also doesn't work when I have SSR set to true, so I guess it won't be that.

I also tried calling .refresh() after each router change. That did not bring any success. Just like a refresh() after loading the Swiper component into the DOM didn't bring any success.

It also looks like AOS is not maintained anymore. Is there an alternative to AOS or has someone found a workaround for this?

[PhinehasSersah]

Calling the AOS.init() in a setTimeout of 2s solve mine. Seems AOS.init() get called before the page routes

[laurensV]

setTimeout on AOS.init is not working for me (I am calling AOS.init in a plugin). Anyone managed to fix this problem? It works correctly on the first page visit on any page, but on renavigating to a route already visited it is not loading the animations anymore, like it remembered it already played the animation for those elements..

[Skyline96]

If anyone want to try the other way and use AOS directly on <router-view> as below example: <router-view data-aos="fade" data-aos-duration="500" data-aos-easing="ease-in-out"></router-view>

At least this one works for me.