Layout animations stop working after full page reload (F5)

[HOjWK1414]

Hey there 👋

I'm running into a strange issue with motion-v layout animations and could really use some help figuring out what's going on.
Everything works perfectly while the app is running, but after a full page reload (F5), layout transitions just stop animating.

I’d really appreciate any help or guidance on this - thank you in advance! 🙏

1. Describe the bug

Layout animation (layout prop) in motion-v stops working after a full page reload (F5).
It works perfectly when the component is hot-reloaded or re-mounted manually, but not on the first mount after a full reload.

The bug occurs even in a minimal setup using <motion.div layout> inside a Vue component.

2. Reproduction component

<script setup lang="ts">
import { ref, computed } from "vue"
import { motion, AnimatePresence } from "motion-v"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import AccountTemp from "@/components/ui/AccountTemp.vue"
import PasswordTemp from "@/components/ui/PasswordTemp.vue"

const selectedTab = ref("account")

const CurrentCard = computed(() => {
  switch (selectedTab.value) {
    case "account": return AccountTemp
    case "password": return PasswordTemp
    default: return AccountTemp
  }
})
</script>

<template>
  <div class="bg-background text-foreground flex w-[480px] flex-col rounded-2xl">
    <Tabs v-model="selectedTab" class="ms-2 flex w-full flex-col gap-6">
      <TabsList class="bg-muted border-border flex w-fit rounded-lg border p-1 shadow-sm">
        <TabsTrigger
          value="account"
          class="text-muted-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:text-foreground hover:bg-muted/70 rounded-md px-4 py-2 text-sm font-medium transition-colors"
        >
          Account
        </TabsTrigger>
        <TabsTrigger
          value="password"
          class="text-muted-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground hover:text-foreground hover:bg-muted/70 rounded-md px-4 py-2 text-sm font-medium transition-colors"
        >
          Password
        </TabsTrigger>
      </TabsList>

      <motion.div
        layout
        class="relative rounded-xl border border-border p-8 overflow-hidden"
        :transition="{ layout: { duration: 0.35 } }"
      >
        <AnimatePresence mode="popLayout">
          <motion.div
            :key="selectedTab"
            layout
            :initial="{ opacity: 0, y: 10, filter: 'blur(8px) brightness(1.2)' }"
            :animate="{ opacity: 1, y: 0, filter: 'blur(0px) brightness(1)' }"
            :exit="{ opacity: 0, y: -10, filter: 'blur(8px)' }"
            :transition="{ duration: 0.45, ease: 'easeInOut' }"
          >
            <component :is="CurrentCard" />
          </motion.div>
        </AnimatePresence>
      </motion.div>
    </Tabs>
  </div>
</template>

3. Steps to reproduce

1. Run the app.
2. Open any page in the app.
3. While the app is running, start using (or hot-import) the component that imports and renders AnimatedTabs.vue.
4. Switch between the “Account” and “Password” tabs — the height change animates correctly.
5. Press F5 to perform a full page reload.
6. Switch between the tabs again → the height change no longer animates (no resize transition).

4. Expected behavior

The layout transition (height resizing) should always animate on tab changes, even after a full page reload.

5. Video or screenshots

Before reload → smooth resize animation
After reload → layout jump, no resize animation

6. Environment details

OS: Windows 11
Framework: Vue 3.5 (Vite)
motion-v: latest
UI libs: shadcn-vue + radix-vue