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.

[MaskowLabs]

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?