Function useCycle

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.

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()}
     />
   )
}
Copy