#870·aos

Laravel + Livewire SPA wire:navigate animation issue.

Author: tplsqdCreated Jan 19, 2025Updated Oct 27, 2025

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>