LayoutGroup
motion components with a layout prop will detect and animate layout changes every time they commit a Vue re-render, or their layoutDependency prop changes.
LayoutGroup is used to group components that might not render together but do affect each-other's state.
Usage
Take these accordion items that each handle their own state:
<script setup> const isOpen = ref(false) </script> <template> <motion.div layout @click="isOpen=!isOpen" > <motion.h2 layout>{{header}}</motion.h2> {{isOpen ? content : null}} </motion.div> </template>
If we arrange these next to each other in an Accordion, when their state updates, their siblings have no way of knowing:
<!-- Accordion --> <template> <ToggleContent /> <ToggleContent /> </template>
This can be fixed by grouping both components with LayoutGroup:
<!-- Accordion --> <template> <LayoutGroup> <ToggleContent /> <ToggleContent /> </LayoutGroup> </template>
Namespace layoutId
Components expecting to perform shared layout animations are provided a layoutId prop.
In this following example, each Tab renders an element with the layoutId="underline" prop.
<!-- Tab --> <template> <li> {{label}} <motion.div v-if="isSelected" layoutId="underline" /> </li> </template> <!-- TabRow --> <template> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </template>
layoutId is global across your site. So to render multiple TabRows we want to group them with LayoutGroup and id prop:
<!-- TabRow --> <template> <LayoutGroup :id="id"> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </LayoutGroup> </template>
motion components with a layout prop will detect and animate layout changes every time they commit a Vue re-render, or their layoutDependency prop changes.
LayoutGroup is used to group components that might not render together but do affect each-other's state.
Usage
Take these accordion items that each handle their own state:
<script setup> const isOpen = ref(false) </script> <template> <motion.div layout @click="isOpen=!isOpen" > <motion.h2 layout>{{header}}</motion.h2> {{isOpen ? content : null}} </motion.div> </template>
If we arrange these next to each other in an Accordion, when their state updates, their siblings have no way of knowing:
<!-- Accordion --> <template> <ToggleContent /> <ToggleContent /> </template>
This can be fixed by grouping both components with LayoutGroup:
<!-- Accordion --> <template> <LayoutGroup> <ToggleContent /> <ToggleContent /> </LayoutGroup> </template>
Namespace layoutId
Components expecting to perform shared layout animations are provided a layoutId prop.
In this following example, each Tab renders an element with the layoutId="underline" prop.
<!-- Tab --> <template> <li> {{label}} <motion.div v-if="isSelected" layoutId="underline" /> </li> </template> <!-- TabRow --> <template> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </template>
layoutId is global across your site. So to render multiple TabRows we want to group them with LayoutGroup and id prop:
<!-- TabRow --> <template> <LayoutGroup :id="id"> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </LayoutGroup> </template>
motion components with a layout prop will detect and animate layout changes every time they commit a Vue re-render, or their layoutDependency prop changes.
LayoutGroup is used to group components that might not render together but do affect each-other's state.
Usage
Take these accordion items that each handle their own state:
<script setup> const isOpen = ref(false) </script> <template> <motion.div layout @click="isOpen=!isOpen" > <motion.h2 layout>{{header}}</motion.h2> {{isOpen ? content : null}} </motion.div> </template>
If we arrange these next to each other in an Accordion, when their state updates, their siblings have no way of knowing:
<!-- Accordion --> <template> <ToggleContent /> <ToggleContent /> </template>
This can be fixed by grouping both components with LayoutGroup:
<!-- Accordion --> <template> <LayoutGroup> <ToggleContent /> <ToggleContent /> </LayoutGroup> </template>
Namespace layoutId
Components expecting to perform shared layout animations are provided a layoutId prop.
In this following example, each Tab renders an element with the layoutId="underline" prop.
<!-- Tab --> <template> <li> {{label}} <motion.div v-if="isSelected" layoutId="underline" /> </li> </template> <!-- TabRow --> <template> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </template>
layoutId is global across your site. So to render multiple TabRows we want to group them with LayoutGroup and id prop:
<!-- TabRow --> <template> <LayoutGroup :id="id"> <Tab v-for="item in items" :key="item.id" v-bind="item"/> </LayoutGroup> </template>