Chapter 122: useTime

Core Idea

Explore Motion for Vue's useTime hook. It returns elapsed time in ms every frame. Learn how it creates perpetual animations & composes with other motion values.

Key Concepts

• Animate faster with Motion+.: Unlock 430+ premium examples

Code Examples

<script setup>
const time = useTime()
const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false })
</script>

<template>
  <motion.div :style="{ rotate }" />
</template>

• What it demonstrates: Core usage pattern for useTime.

Key Takeaways

1. useTime supports Animate faster with Motion+..

Connects To

• Motion values: related Motion doc page.
• Vue animations with Motion for Vue: related Motion doc page.
• useAnimationFrame: related Motion doc page.
• Multi state badge example & tutorial for React: related Motion doc page.