Chapter 48: useTime

Core Idea

Explore Motion for React'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

const time = useTime();
const rotate = useTransform(time, [0, 4000], [0, 360], { clamp: false });

return <motion.div style={{ rotate }} />

• 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.
• React Animation: related Motion doc page.
• useAnimationFrame: related Motion doc page.
• Multi state badge example & tutorial for React: related Motion doc page.