Motion
Back to framer.com
Documentation
Utilities
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
Hooks
  • useAnimate
  • useAnimationFrame
  • useDragControls
  • useInView
  • useReducedMotion
Universal
  • animate
  • scroll
  • inView
  • transform
  • stagger
  • frame
  • Easing functions
3D
  • Introduction
  • LayoutCamera
  • LayoutOrthographicCamera
  • MotionCanvas
Guides
  • Accessibility
  • Reduce bundle size
  • Upgrade guides
Community
  • GitHub
  • Discord

Utilities

Utilities provide simple helper methods and properties for advanced interactive needs.

#AnimationControls

Returned from useAnimation for manual starting/stopping of animations.

import { motion, useAnimation} from "framer-motion"
export default function() {
const controls = useAnimation()
return <motion.div animate={controls} >
}

#set(definition): void

Instantly set to a set of properties or a variant.

definition: ControlsAnimationDefinition

Properties or variant label to animate to

// With properties
controls.set({ opacity: 0 })
// With variants
controls.set("hidden")

#start(definition, transitionOverride): Promise<any>

Starts an animation on all linked components.

definition: ControlsAnimationDefinition

Properties or variant label to animate to

transitionOverride: Transition

Optional transition to apply to a variant

returns: Promise<any>

A Promise that resolves when all animations have completed

controls.start("variantLabel")
controls.start({
x: 0,
transition: { duration: 1 }
})

#stop(): void

Stops animations on all linked components.

#useCycle

#useCycle(items): CycleState<T>

Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to useState in React. It is provided an initial array of possible states, and returns an array of two arguments.

An index value can be passed to the returned cycle function to cycle to a specific index.

items: T[]

returns: CycleState<T>

import * as React from "react"
import { motion, useCycle } from "framer-motion"
export const MyComponent = () => {
const [x, cycleX] = useCycle(0, 50, 100)
return (
<motion.div
animate={{ x: x }}
onTap={() => cycleX()}
/>
)
}

#useReducedMotion

#useReducedMotion(): boolean | null

A hook that returns true if we should be using reduced motion based on the current device's Reduced Motion setting.

This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing x/y animations with opacity, disabling the autoplay of background videos, or turning off parallax motion.

It will actively respond to changes and re-render your components with the latest setting.

export function Sidebar({ isOpen }) {
const shouldReduceMotion = useReducedMotion()
const closedX = shouldReduceMotion ? 0 : "-100%"
return (
<motion.div animate={{
opacity: isOpen ? 1 : 0,
x: isOpen ? 0 : closedX
}} />
)
}

#useDragControls

#useDragControls(): DragControls

Usually, dragging is initiated by pressing down on a motion component with a drag prop and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we might want to initiate that dragging from a different component than the draggable one.

By creating a dragControls using the useDragControls hook, we can pass this into the draggable component's dragControls prop. It exposes a start method that can start dragging from pointer events on other components.

const dragControls = useDragControls()
function startDrag(event) {
dragControls.start(event, { snapToCursor: true })
}
return (
<>
<div onPointerDown={startDrag} />
<motion.div drag="x" dragControls={dragControls} />
</>
)

#useAnimationFrame

#useAnimationFrame(callback):

Runs a callback once every animation frame. The callback is provided a timestamp, in milliseconds, that is the duration of time since the callback was first called.

import { useAnimationFrame } from "framer-motion"
function Component() {
const ref = useRef(null)
useAnimationFrame(t => {
ref.current.style.transform = `rotateY(${t}deg)`
})
return <div ref={ref} />
}

NextIntroduction
On this page
  • AnimationControls
  • useCycle
  • useReducedMotion
  • useDragControls
  • useAnimationFrame

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement