Laravel + Livewire SPA wire:navigate animation issue.

[tplsqd]

There is a problem: Laravel 11 + Livewire 3.5 (SPA), without wire:navigate animation works great, but after navigating to a page with wire:navigate animation does not work, tried both AOS.refresh and AOS.refreshHard in the
document.addEventListener('livewire:navigated', () => {}))
(according to the official Livewire documentation).
Below is the code:

resources\js\app.js:
`document.addEventListener("DOMContentLoaded", () => {
AOS.init({
once: false,
duration: 600,
easing: 'ease-out-sine',
});
initializeThemeSwitchers();
initializeFlatpickr();
initializeSpotlights();
if (window.sidebarAccountBalance) {
sidebarAccountBalance();
}
if (window.cryptoDynamics) {
cryptoDynamics();
}
if (window.realTimePrice) {
realTimePrice();
}
});

document.addEventListener('livewire:navigated', () => {
AOS.refresh();
initializeThemeSwitchers();
initializeFlatpickr();
if (window.sidebarAccountBalance) {
sidebarAccountBalance();
}
if (window.cryptoDynamics) {
cryptoDynamics();
}
if (window.realTimePrice) {
realTimePrice('adausdt');
}
});`

resources\views\livewire\core\deposit.blade.php:
<label class="relative block cursor-pointer" data-aos="fade-left"> <input type="radio" name="radio-buttons" class="peer sr-only" checked /> <div class="flex items-center bg-white text-sm font-medium text-gray-800 dark:text-gray-100 p-4 rounded-lg dark:bg-gray-800 border border-gray-200 dark:border-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 shadow-sm transition"> <svg class="w-6 h-6 shrink-0 fill-current mr-4" viewBox="0 0 24 24"> <path class="text-violet-500" d="M12 15.66l4.41-2.2-4.07-2.04a0.75 0.75 0 0 0-0.68 0l-4.07 2.04z" /> </svg> <span>{{ __('pages.deposit.select_deposit_method.payment_methods.crypto_direct') }}</span> </div> <div class="absolute inset-0 border-2 border-transparent peer-checked:border-violet-400 dark:peer-checked:border-violet-500 rounded-lg pointer-events-none" aria-hidden="true"></div> </label>

[sgtcoder]

I have this same issue.

Wowjs works with Livewire, but you have to use Vite 4.

[sgtcoder]

Actually got wowjs to work on vite 6 as well. But it would be nice to have AOS working as it's more modern.

[JuliusMaskow]

I found a messy but working solution for this issue. Basically, I re-initialize AOS after navigation with a small timeout — not elegant, but it fixes the problem.

let isAosInitialized = false;

document.addEventListener("livewire:navigated", () => {
  if (!isAosInitialized) {
      Aos.init({ disableMutationObserver: true });
      isAosInitialized = true;
  } else {
      setTimeout(() => {
          Aos.init({ disableMutationObserver: true });
      }, 100);
  }
});

[sgtcoder]

I found a messy but working solution for this issue. Basically, I re-initialize AOS after navigation with a small timeout — not elegant, but it fixes the problem.

let isAosInitialized = false;

document.addEventListener("livewire:navigated", () => {
if (!isAosInitialized) {
Aos.init({ disableMutationObserver: true });
isAosInitialized = true;
} else {
setTimeout(() => {
Aos.init({ disableMutationObserver: true });
}, 100);
}
});

Thank you for this. I can confirm this is working too.

I was recently doing something like this as well with the 200ms timeout and $("[data-aos]").removeClass("aos-animate"); and AOS.refreshHard();

I wasn't using the disableMutationObserver. What affect does that have?