1 line
1.5 KiB
Plaintext
1 line
1.5 KiB
Plaintext
{"version":3,"file":"use-animation.mjs","sources":["../../../../src/animation/hooks/use-animation.ts"],"sourcesContent":["\"use client\"\n\nimport { LegacyAnimationControls } from \"motion-dom\"\nimport { useConstant } from \"../../utils/use-constant\"\nimport { useIsomorphicLayoutEffect } from \"../../utils/use-isomorphic-effect\"\nimport { animationControls } from \"./animation-controls\"\n\n/**\n * Creates `LegacyAnimationControls`, which can be used to manually start, stop\n * and sequence animations on one or more components.\n *\n * The returned `LegacyAnimationControls` should be passed to the `animate` property\n * of the components you want to animate.\n *\n * These components can then be animated with the `start` method.\n *\n * ```jsx\n * import * as React from 'react'\n * import { motion, useAnimation } from 'framer-motion'\n *\n * export function MyComponent(props) {\n * const controls = useAnimation()\n *\n * controls.start({\n * x: 100,\n * transition: { duration: 0.5 },\n * })\n *\n * return <motion.div animate={controls} />\n * }\n * ```\n *\n * @returns Animation controller with `start` and `stop` methods\n *\n * @public\n */\nexport function useAnimationControls(): LegacyAnimationControls {\n const controls = useConstant(animationControls)\n\n useIsomorphicLayoutEffect(controls.mount, [])\n\n return controls\n}\n\nexport const useAnimation = useAnimationControls\n"],"names":[],"mappings":";;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BG;;AAEC;AAEA;AAEA;AACJ;AAEO;;"} |