Chapter 113: useAnimate

Core Idea

Discover Motion for Vue's useAnimate hook for component-scoped animations. Use its animate function for manual control, scoped selectors & auto cleanup.

Key Concepts

• Scroll-triggered animations: Animations can be triggered when the scope scrolls into view by combining useAnimate with useInView.
• Stay in the loop.: Deep dives on animation
• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

<script setup>
import { useAnimate } from 'motion-v'

const [scope, animate] = useAnimate()

onMounted(() => {
  // This "li" selector will only select children
  // of the element that receives `scope`
  animate('li', { opacity: 1 })
})
</script>

<template>
  <ul ref="scope">
    <slot />
  </ul>
</template>

• What it demonstrates: Core usage pattern for useAnimate.

Key Takeaways

1. useAnimate supports Scroll-triggered animations.
2. useAnimate supports Stay in the loop..
3. useAnimate supports Animate faster with Motion+..

Connects To

• animate(): related Motion doc page.
• Motion values: related Motion doc page.
• Vue transitions: related Motion doc page.
• useInView: related Motion doc page.
• Cursor: Floating target example & tutorial for React: related Motion doc page.