Motion
Back to framer.com
DocumentationMotion values
useTime
Motion
Back to framer.com
Design and publish your first free site today.
Getting started
  • Introduction
  • Examples
Animation
  • Overview
  • Layout
  • Gestures
  • Scroll
  • Transition
Components
  • motion
  • AnimatePresence
  • LayoutGroup
  • LazyMotion
  • MotionConfig
  • Reorder
Motion values
  • Overview
  • useMotionValueEvent
  • useMotionTemplate
  • useScroll
  • useSpring
  • useTime
  • useTransform
  • useVelocity
  • useWillChange
Utilities
  • animate
  • transform
  • useAnimationControls
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

useTime

A motion value that updates every animation frame with the duration, in ms, since it was created.

useTime returns a motion value that updates once per frame with the duration, in milliseconds, since the motion value was first created.

This is particulary useful for driving animations perpetually.

#Usage

Import from Framer Motion.

import { useTime } from "framer-motion"

When called, useTime will create a new motion value. This value will update every frame with the time since its creation.

You can use this either directly or by composing with other motion value hooks.

const time = useTime()
const rotate = useTransform(
time,
[0, 4000], // For every 4 seconds...
[0, 360], // ...rotate 360deg
{ clamp: false }
)

#Example

PrevioususeSpringNextuseTransform
On this page
  • Usage
  • Example

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement