Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | 30x 30x 30x 30x 64x 64x 64x | import { animationControls } from "./animation-controls" import { AnimationControls } from "./types" import { useEffect } from "react" import { useConstant } from "../utils/use-constant" /** * Creates `AnimationControls`, which can be used to manually start, stop * and sequence animations on one or more components. * * The returned `AnimationControls` should be passed to the `animate` property * of the components you want to animate. * * These components can then be animated with the `start` method. * * ```jsx * import * as React from 'react' * import { motion, useAnimation } from 'framer-motion' * * export function MyComponent(props) { * const controls = useAnimation() * * controls.start({ * x: 100, * transition: { duration: 0.5 }, * }) * * return <motion.div animate={controls} /> * } * ``` * * @returns Animation controller with `start` and `stop` methods * * @public */ export function useAnimation(): AnimationControls { const controls = useConstant(animationControls) useEffect(controls.mount, []) return controls } |