←Back

    import autoAnimate from '@formkit/auto-animate';

Then on the outer container put use:autoAnimate

 <div class="z-1 grid w-full grid-cols-1 gap-8 md:grid-cols-3" use:autoAnimate>
      {#each mixes.data as mix (mix.id)}
          <Link href={route('mixes.show', mix.id)}>
              <MixCard {mix} />
          </Link>
      {/each}
  </div>
    

the mix (mix.id) ensures that each mix has the correct key and movement is possible

Should work when data is coming from backend, however does need preserve-state

function applyFilter() {
        router.get(
            '/',
            {
                page: pageNumber,
                cuisine_id: cuisine_id,
                is_own: isOwn,
                show_favorites: showFavorites,
                filter: { name: searchTerm }
            },
            { preserveState: true, preserveScroll: true }
        );
    }