useAnimate provides a way of using the animate function that is scoped to the elements within the provided domRef.
useAnimate provides a way of using the animate function that is scoped to the elements within the provided domRef.
This allows you to use manual animation controls, timelines, selectors scoped to your component, and automatic cleanup.
It provides a scope ref, and an animate function where every DOM selector is scoped to this ref.
<script setup lang="ts">
import { Motion, stagger, useAnimate } from 'motion-v'
import { onMounted } from 'vue'
const [scope, animate] = useAnimate()
onMounted(() => {
animate('li', { y: 0, opacity: 1 }, {
delay: stagger(0.1),
})
})
</script>
<template>
<ul
ref="scope"
class="space-y-4"
>
<Motion
v-for="i in 3"
:key="i"
as="li"
:initial="{ y: 10, opacity: 0 }"
class="w-20 h-5 bg-primary rounded"
>
Item {{ i }}
</Motion>
</ul>
</template>
<style scoped>
</style>
<script setup lang="ts">
import { watch } from 'vue'
import { Motion, useAnimate, useInView } from 'motion-v'
const [scope, animate] = useAnimate()
const isInView = useInView(scope)
watch(isInView, () => {
if (isInView.value) {
animate(scope.value, { opacity: 1, y: 0 }, {
duration: 1,
})
}
}, { immediate: true })
</script>
<template>
<Motion
ref="scope"
:initial="{ opacity: 0, y: 30 }"
class="bg-primary p-4 rounded w-20 h-20"
/>
</template>
