framer-motion/dist/es/value/use-follow-value.mjs.map

A simple and powerful JavaScript animation library

{"version":3,"file":"use-follow-value.mjs","sources":["../../../src/value/use-follow-value.ts"],"sourcesContent":["\"use client\"\n\nimport {\n    AnyResolvedKeyframe,\n    attachFollow,\n    FollowValueOptions,\n    isMotionValue,\n    MotionValue,\n} from \"motion-dom\"\nimport { useContext, useInsertionEffect } from \"react\"\nimport { MotionConfigContext } from \"../context/MotionConfigContext\"\nimport { useMotionValue } from \"./use-motion-value\"\nimport { useTransform } from \"./use-transform\"\n\n/**\n * Creates a `MotionValue` that, when `set`, will use the specified animation transition to animate to its new state.\n *\n * Unlike `useSpring` which is limited to spring animations, `useFollowValue` accepts any motion transition\n * including spring, tween, inertia, and keyframes.\n *\n * It can either work as a stand-alone `MotionValue` by initialising it with a value, or as a subscriber\n * to another `MotionValue`.\n *\n * @remarks\n *\n * ```jsx\n * // Spring animation (default)\n * const x = useFollowValue(0, { stiffness: 300 })\n *\n * // Tween animation\n * const y = useFollowValue(0, { type: \"tween\", duration: 0.5, ease: \"easeOut\" })\n *\n * // Track another MotionValue with spring\n * const source = useMotionValue(0)\n * const z = useFollowValue(source, { type: \"spring\", damping: 10 })\n *\n * // Inertia animation\n * const w = useFollowValue(0, { type: \"inertia\", velocity: 100 })\n * ```\n *\n * @param inputValue - `MotionValue` or number. If provided a `MotionValue`, when the input `MotionValue` changes, the created `MotionValue` will animate towards that value using the specified transition.\n * @param options - Animation transition options. Supports all transition types: spring, tween, inertia, keyframes.\n * @returns `MotionValue`\n *\n * @public\n */\nexport function useFollowValue(\n    source: MotionValue<string>,\n    options?: FollowValueOptions\n): MotionValue<string>\nexport function useFollowValue(\n    source: string,\n    options?: FollowValueOptions\n): MotionValue<string>\nexport function useFollowValue(\n    source: MotionValue<number>,\n    options?: FollowValueOptions\n): MotionValue<number>\nexport function useFollowValue(\n    source: number,\n    options?: FollowValueOptions\n): MotionValue<number>\nexport function useFollowValue(\n    source: MotionValue<string> | MotionValue<number> | AnyResolvedKeyframe,\n    options: FollowValueOptions = {}\n) {\n    const { isStatic } = useContext(MotionConfigContext)\n    const getFromSource = () => (isMotionValue(source) ? source.get() : source)\n\n    // isStatic will never change, allowing early hooks return\n    if (isStatic) {\n        return useTransform(getFromSource)\n    }\n\n    const value = useMotionValue(getFromSource())\n\n    useInsertionEffect(() => {\n        return attachFollow(value, source, options)\n    }, [value, JSON.stringify(options)])\n\n    return value\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAuEQ;;AAGJ;;;AAIA;AAEA;AACJ;;"}