framer-motion
Version:
<p align="center"> <img src="https://user-images.githubusercontent.com/38039349/60953119-d3c6f300-a2fc-11e9-9596-4978e5d52180.png" width="176" height="170" alt="Framer Motion" /> </p>
1,113 lines (1,112 loc) • 646 kB
JSON
{
"metadata": {
"toolPackage": "@microsoft/api-extractor",
"toolVersion": "7.3.4",
"schemaVersion": 1002,
"oldestForwardsCompatibleVersion": 1001
},
"kind": "Package",
"docComment": "",
"name": "framer-motion",
"members": [
{
"kind": "EntryPoint",
"name": "",
"members": [
{
"kind": "Variable",
"docComment": "/**\n * The `AnimatePresence` component enables the use of the `exit` prop to animate components when they're removed from the component tree.\n *\n * When adding/removing more than a single child component, every component **must** be given a unique `key` prop.\n *\n * You can propagate exit animations throughout a tree by using variants.\n *\n * @library\n *\n * You can use any component(s) within `AnimatePresence`, but the first `Frame` in each should have an `exit` property defined.\n * ```jsx\n * import { Frame, AnimatePresence } from 'framer'\n *\n * // As items are added and removed from `items`\n * export function Items({ items }) {\n * return (\n * <AnimatePresence>\n * {items.map(item => (\n * <Frame\n * key={item.id}\n * initial={{ opacity: 0 }}\n * animate={{ opacity: 1 }}\n * exit={{ opacity: 0 }}\n * />\n * ))}\n * </AnimatePresence>\n * )\n * }\n * ```\n *\n * @motion\n *\n * You can use any component(s) within `AnimatePresence`, but the first `motion` component in each should have an `exit` property defined.\n * ```jsx\n * import { motion, AnimatePresence } from 'framer-motion'\n *\n * export const Items = ({ items }) => (\n * <AnimatePresence>\n * {items.map(item => (\n * <motion.div\n * key={item.id}\n * initial={{ opacity: 0 }}\n * animate={{ opacity: 1 }}\n * exit={{ opacity: 0 }}\n * />\n * ))}\n * </AnimatePresence>\n * )\n * ```\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "AnimatePresence"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "FunctionComponent"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "AnimatePresenceProps"
},
{
"kind": "Content",
"text": ">"
}
],
"releaseTag": "Public",
"name": "AnimatePresence",
"variableTypeTokenRange": {
"startIndex": 2,
"endIndex": 6
}
},
{
"kind": "Interface",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export interface "
},
{
"kind": "Reference",
"text": "AnimatePresenceProps"
},
{
"kind": "Content",
"text": " "
}
],
"releaseTag": "Public",
"name": "AnimatePresenceProps",
"members": [
{
"kind": "PropertySignature",
"docComment": "/**\n * When a component is removed, there's no longer a chance to update its props. So if a component's `exit` prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via `AnimatePresence`. This will ensure all leaving components animate using the latest data.\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "custom"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Content",
"text": "any"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "custom",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component will finished its exit animation before the entering component is rendered.\n *\n * @library\n * ```jsx\n * function MyComponent({ currentItem }) {\n * return (\n * <AnimatePresence exitBeforeEnter>\n * <Frame key={currentItem} exit={{ opacity: 0 }} />\n * </AnimatePresence>\n * )\n * }\n * ```\n *\n * @motion\n * ```jsx\n * const MyComponent = ({ currentItem }) => (\n * <AnimatePresence exitBeforeEnter>\n * <motion.div key={currentItem} exit={{ opacity: 0 }} />\n * </AnimatePresence>\n * )\n * ```\n *\n * @beta\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "exitBeforeEnter"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Content",
"text": "boolean"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Beta",
"name": "exitBeforeEnter",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children that are present when the component is first rendered.\n *\n * @library\n * ```jsx\n * <AnimatePresence initial={false}>\n * {isVisible && (\n * <Frame\n * key=\"modal\"\n * initial={{ opacity: 0 }}\n * animate={{ opacity: 1 }}\n * exit={{ opacity: 0 }}\n * />\n * )}\n * </AnimatePresence>\n * ```\n *\n * @motion\n * ```jsx\n * <AnimatePresence initial={false}>\n * {isVisible && (\n * <motion.div\n * key=\"modal\"\n * initial={{ opacity: 0 }}\n * animate={{ opacity: 1 }}\n * exit={{ opacity: 0 }}\n * />\n * )}\n * </AnimatePresence>\n * ```\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "initial"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Content",
"text": "boolean"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "initial",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * Fires when all exiting nodes have completed animating out.\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "onExitComplete"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Content",
"text": "() => void"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "onExitComplete",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
}
],
"extendsTokenRanges": []
},
{
"kind": "Class",
"docComment": "/**\n * Control animations on one or more components.\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare class "
},
{
"kind": "Reference",
"text": "AnimationControls"
},
{
"kind": "Content",
"text": " "
}
],
"releaseTag": "Public",
"name": "AnimationControls",
"members": [
{
"kind": "Method",
"docComment": "/**\n * Instantly set to a set of properties or a variant.\n * ```jsx\n * // With properties\n * controls.set({ opacity: 0 })\n *\n * // With variants\n * controls.set(\"hidden\")\n * ```\n *\n * @internalremarks\n *\n * We could perform a similar trick to `.start` where this can be called before mount and we maintain a list of of pending actions that get applied on mount. But the expectation of `set` is that it happens synchronously and this would be difficult to do before any children have even attached themselves. It's also poor practise and we should discourage render-synchronous `.start` calls rather than lean into this.\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "set"
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "definition"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "VariantLabels"
},
{
"kind": "Content",
"text": " | "
},
{
"kind": "Reference",
"text": "TargetAndTransition"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "void"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 8,
"endIndex": 9
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [
{
"parameterName": "definition",
"parameterTypeTokenRange": {
"startIndex": 4,
"endIndex": 7
}
}
],
"name": "set"
},
{
"kind": "Method",
"docComment": "/**\n * Starts an animation on all linked components.\n *\n * @remarks\n * ```jsx\n * controls.start(\"variantLabel\")\n * controls.start({\n * x: 0,\n * transition: { duration: 1 }\n * })\n * ```\n *\n * @param definition - Properties or variant label to animate to\n *\n * @param transition - Optional `transtion` to apply to a variant\n *\n * @returns - A `Promise` that resolves when all animations have completed.\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "start"
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "definition"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "AnimationDefinition"
},
{
"kind": "Content",
"text": ", "
},
{
"kind": "Reference",
"text": "transitionOverride"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Reference",
"text": "Transition"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Reference",
"text": "Promise"
},
{
"kind": "Content",
"text": "<any>"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 10,
"endIndex": 12
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [
{
"parameterName": "definition",
"parameterTypeTokenRange": {
"startIndex": 4,
"endIndex": 5
}
},
{
"parameterName": "transitionOverride",
"parameterTypeTokenRange": {
"startIndex": 8,
"endIndex": 9
}
}
],
"name": "start"
},
{
"kind": "Method",
"docComment": "/**\n * Stops animations on all linked components.\n * ```jsx\n * controls.stop()\n * ```\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "stop"
},
{
"kind": "Content",
"text": "(): "
},
{
"kind": "Content",
"text": "void"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [],
"name": "stop"
}
],
"implementsTokenRanges": []
},
{
"kind": "Interface",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export interface "
},
{
"kind": "Reference",
"text": "AnimationProps"
},
{
"kind": "Content",
"text": " "
}
],
"releaseTag": "Public",
"name": "AnimationProps",
"members": [
{
"kind": "PropertySignature",
"docComment": "/**\n * Values to animate to, variant label(s), or `AnimationControls`.\n *\n * @library\n * ```jsx\n * // As values\n * <Frame animate={{ opacity: 1 }} />\n *\n * // As variant\n * <Frame animate=\"visible\" variants={variants} />\n *\n * // Multiple variants\n * <Frame animate={[\"visible\", \"active\"]} variants={variants} />\n *\n * // AnimationControls\n * <Frame animate={animation} />\n * ```\n *\n * @motion\n * ```jsx\n * // As values\n * <motion.div animate={{ opacity: 1 }} />\n *\n * // As variant\n * <motion.div animate=\"visible\" variants={variants} />\n *\n * // Multiple variants\n * <motion.div animate={[\"visible\", \"active\"]} variants={variants} />\n *\n * // AnimationControls\n * <motion.div animate={animation} />\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "animate"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Reference",
"text": "AnimationControls"
},
{
"kind": "Content",
"text": " | "
},
{
"kind": "Reference",
"text": "TargetAndTransition"
},
{
"kind": "Content",
"text": " | "
},
{
"kind": "Reference",
"text": "VariantLabels"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "animate",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 7
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * A target to animate to when this component is removed from the tree.\n *\n * This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation.\n *\n * This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary.\n *\n * @library\n * ```jsx\n * import { Frame, AnimatePresence } from 'framer'\n *\n * export function MyComponent(props) {\n * return (\n * <AnimatePresence>\n * {props.isVisible && (\n * <Frame\n * initial={{ opacity: 0 }}\n * animate={{ opacity: 1 }}\n * exit={{ opacity: 0 }}\n * />\n * )}\n * </AnimatePresence>\n * )\n * }\n * ```\n *\n * @motion\n * ```jsx\n * import { AnimatePresence, motion } from 'framer-motion'\n *\n * export const MyComponent = ({ isVisible }) => {\n * return (\n * <AnimatePresence>\n * {isVisible && (\n * <motion.div\n * initial={{ opacity: 0 }}\n * animate={{ opacity: 1 }}\n * exit={{ opacity: 0 }}\n * />\n * )}\n * </AnimatePresence>\n * )\n * }\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "exit"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Reference",
"text": "TargetAndTransition"
},
{
"kind": "Content",
"text": " | "
},
{
"kind": "Reference",
"text": "VariantLabels"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "exit",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 5
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * @library\n *\n * When a `Frame` is the child of a `Stack`, the `Stack` is responsible for its layout. This makes it difficult for to know when the layout changes and smoothly animate components to their new positions.\n *\n * By adding `layoutTransition` to a child `Frame`, it'll automatically animate to its new position when it moves in the `Stack`, whether the `Stack` layout has changed, or the `Frame` has changed order within it.\n *\n * It can either be set as a `Transition`, or just `true` to use the default layout transition.\n *\n * Animating size with `scale` can introduce visual distortion to the component's children. If unwanted, the `useInvertedScale` function can be used to undo this distortion.\n * ```jsx\n * function MyComponent({ distribution = \"space-around\" }) {\n * const spring = {\n * type: \"spring\",\n * damping: 10,\n * stiffness: 100\n * }\n *\n * return (\n * <Stack distribution={distribution}>\n * <Frame layoutTransition={spring} />\n * </Stack>\n * )\n * }\n * ```\n *\n * @motion\n *\n * If `layoutTransition` is defined on a `motion` component, the component will automatically animate any changes to its position **and** size.\n *\n * It will do so using performant transforms. So if a `motion` component changes position, it'll animate to its new position using `x` and `y`. If it changes size, it'll animate using `scaleX` and `scaleY`.\n *\n * Animating size with `scale` can introduce visual distortion to the component's children. If unwanted, the `useInvertedScale` function can be used to undo this distortion.\n *\n * `layoutTransition` can either be set as a `Transition`, or just `true` to use the default layout transition, which is a smooth `0.8` second ease.\n *\n * It can also be set as a function that will resolve when the component has changed layout. This function should return either a `Transition`, or `true`. For advanced use-cases where you want the component to visually stay in its previous position, this function can also return `false`. This function will receive the `delta` of the changed layout.\n * ```jsx\n * const spring = {\n * type: \"spring\",\n * damping: 10,\n * stiffness: 100\n * }\n *\n * // This component will animate between sizes when `isVisible` is toggled.\n * const MyComponent = ({ isVisible }) => {\n * return (\n * <motion.div layoutTransition={spring}>\n * {isVisible && <Content />}\n * </motion.div>\n * )\n * }\n * ```\n *\n * @beta\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "layoutTransition"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Reference",
"text": "Transition"
},
{
"kind": "Content",
"text": " | boolean | "
},
{
"kind": "Reference",
"text": "ResolveLayoutTransition"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Beta",
"name": "layoutTransition",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 5
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * @library\n *\n * When a `Frame` is the child of a `Stack`, the `Stack` is responsible for its layout. This makes it harder for us to know when a `Frame`'s position changes within the `Stack` and make it animate to its new position.\n *\n * By adding `positionTransition` to a `Frame`, it'll automatically animate to its new position in the `Stack`, whether the `Stack` layout has changed or the `Frame` has changed its order within it.\n *\n * It can either be set as a `Transition`, or just `true` to use the default layout transition.\n * ```jsx\n * function MyComponent({ distribution = \"space-around\" }) {\n * const spring = {\n * type: \"spring\",\n * damping: 10,\n * stiffness: 100\n * }\n *\n * return (\n * <Stack distribution={distribution}>\n * <Frame layoutTransition={spring} />\n * </Stack>\n * )\n * }\n * ```\n *\n * @motion\n *\n * If `positionTransition` is defined on a `motion` component, it will automatically animate any changes to its layout using a performant `x`/`y` transform.\n *\n * `positionTransition` can either be set as a `Transition`, or just `true` to use the default position transition, which is a snappy spring.\n *\n * It can also be set as a function that will resolve when the component has changed layout. This function should return either a `Transition`, or `true`. For advanced use-cases where you want the component to visually stay in its previous position, this function can also return `false`. This function will receive the `delta` of the changed layout.\n * ```jsx\n * const spring = {\n * type: \"spring\",\n * damping: 10,\n * stiffness: 100\n * }\n *\n * // This component will animate position when `isVisible` is toggled.\n * const MyComponent = ({ isOpen }) => {\n * return (\n * <motion.div positionTransition={spring} style={{ left: isOpen ? 0 : 100 }} />\n * )\n * }\n *\n * // This component will animate items to their new position if its place in `items` changes order.\n * const MyComponent = ({ items }) => {\n * return items.map((item) => (\n * <motion.div key={item.id} positionTransition={spring} />\n * ))\n * }\n * ```\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "positionTransition"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Reference",
"text": "Transition"
},
{
"kind": "Content",
"text": " | boolean | "
},
{
"kind": "Reference",
"text": "ResolveLayoutTransition"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "positionTransition",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 5
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * Default transition. If no `transition` is defined in `animate`, it will use the transition defined here.\n *\n * @library\n * ```jsx\n * const spring = {\n * type: \"spring\",\n * damping: 10,\n * stiffness: 100\n * }\n *\n * <Frame transition={spring} animate={{ scale: 1.2 }} />\n * ```\n *\n * @motion\n * ```jsx\n * const spring = {\n * type: \"spring\",\n * damping: 10,\n * stiffness: 100\n * }\n *\n * <motion.div transition={spring} animate={{ scale: 1.2 }} />\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "transition"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Reference",
"text": "Transition"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "transition",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * Variants allow you to define animation states and organise them by name. They allow you to control animations throughout a component tree by switching a single `animate` prop.\n *\n * Using `transition` options like `delayChildren` and `staggerChildren`, you can orchestrate when children animations play relative to their parent.\n *\n * @library\n *\n * After passing variants to one or more `Frame`'s `variants` prop, these variants can be used in place of values on the `animate`, `initial`, `whileTap` and `whileHover` props.\n * ```jsx\n * const variants = {\n * active: {\n * backgroundColor: \"#f00\"\n * },\n * inactive: {\n * backgroundColor: \"#fff\",\n * transition: { duration: 2 }\n * }\n * }\n *\n * <Frame variants={variants} animate=\"active\" />\n * ```\n *\n * @motion\n *\n * After passing variants to one or more `motion` component's `variants` prop, these variants can be used in place of values on the `animate`, `initial`, `whileTap` and `whileHover` props.\n * ```jsx\n * const variants = {\n * active: {\n * backgroundColor: \"#f00\"\n * },\n * inactive: {\n * backgroundColor: \"#fff\",\n * transition: { duration: 2 }\n * }\n * }\n *\n * <motion.div variants={variants} animate=\"active\" />\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "variants"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Reference",
"text": "Variants"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "variants",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
}
],
"extendsTokenRanges": []
},
{
"kind": "Interface",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export interface "
},
{
"kind": "Reference",
"text": "CustomValueType"
},
{
"kind": "Content",
"text": " "
}
],
"releaseTag": "Public",
"name": "CustomValueType",
"members": [
{
"kind": "PropertySignature",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "mix"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "from"
},
{
"kind": "Content",
"text": ": any, "
},
{
"kind": "Reference",
"text": "to"
},
{
"kind": "Content",
"text": ": any) => ("
},
{
"kind": "Reference",
"text": "p"
},
{
"kind": "Content",
"text": ": number) => number | string"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "mix",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 9
}
},
{
"kind": "PropertySignature",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "toValue"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Content",
"text": "() => number | string"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "toValue",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
}
],
"extendsTokenRanges": []
},
{
"kind": "Interface",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export interface "
},
{
"kind": "Reference",
"text": "DraggableProps"
},
{
"kind": "Content",
"text": " extends "
},
{
"kind": "Reference",
"text": "DragHandlers"
},
{
"kind": "Content",
"text": " "
}
],
"releaseTag": "Public",
"name": "DraggableProps",
"members": [
{
"kind": "PropertySignature",
"docComment": "/**\n * Enable dragging for this element. Set to `false` by default. Set `true` to drag in both directions. Set `\"x\"` or `\"y\"` to only drag in a specific direction.\n *\n * @library\n * ```jsx\n * <Frame drag=\"x\" />\n * ```\n *\n * @motion\n * ```jsx\n * <motion.div drag=\"x\" />\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "drag"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Content",
"text": "boolean | \"x\" | \"y\""
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "drag",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * An object of optional `top`, `left`, `right`, `bottom` pixel values, beyond which dragging is constrained.\n *\n * Another component can be used as drag constraints by creating a `ref` with React's `useRef`.hook. This `ref` should be passed to that component's `ref` prop and to this component's `dragConstraints` prop.\n *\n * @library\n * ```jsx\n * // In pixels\n * <Frame\n * drag=\"x\"\n * dragConstraints={{ left: 0, right: 300 }}\n * />\n *\n * // As a ref to another component\n * function MyComponent() {\n * const constraintsRef = useRef(null)\n *\n * return (\n * <Frame ref={constraintsRef} width={400} height={400}>\n * <Frame drag dragConstraints={constraintsRef} />\n * </Frame>\n * )\n * }\n * ```\n *\n * @motion\n * ```jsx\n * // In pixels\n * <motion.div\n * drag=\"x\"\n * dragConstraints={{ left: 0, right: 300 }}\n * />\n *\n * // As a ref to another component\n * const MyComponent = () => {\n * const constraintsRef = useRef(null)\n *\n * return (\n * <motion.div ref={constraintsRef}>\n * <motion.div drag dragConstraints={constraintsRef} />\n * </motion.div>\n * )\n * }\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "dragConstraints"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Content",
"text": "false | {\n "
},
{
"kind": "Reference",
"text": "top"
},
{
"kind": "Content",
"text": "?: number;\n "
},
{
"kind": "Reference",
"text": "right"
},
{
"kind": "Content",
"text": "?: number;\n "
},
{
"kind": "Reference",
"text": "bottom"
},
{
"kind": "Content",
"text": "?: number;\n "
},
{
"kind": "Reference",
"text": "left"
},
{
"kind": "Content",
"text": "?: number;\n } | "
},
{
"kind": "Reference",
"text": "RefObject"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "Element"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "dragConstraints",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 15
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * If `true`, this will lock dragging to the initially-detected direction. Defaults to `false`.\n *\n * @library\n * ```jsx\n * <Frame drag={true} dragDirectionLock={true} />\n * ```\n *\n * @motion\n * ```jsx\n * <motion.div drag dragDirectionLock />\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "dragDirectionLock"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Content",
"text": "boolean"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "dragDirectionLock",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement. Set to `0.5` by default.\n *\n * @library\n * ```jsx\n * <Frame\n * drag={true}\n * dragConstraints={{ left: 0, right: 300 }}\n * dragElastic={0.2}\n * />\n * ```\n *\n * @motion\n * ```jsx\n * <motion.div\n * drag\n * dragConstraints={{ left: 0, right: 300 }}\n * dragElastic={0.2}\n * />\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "dragElastic"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Content",
"text": "boolean | number"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "dragElastic",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * Apply momentum from the pan gesture to the component when dragging finishes. Set to `true` by default.\n *\n * @library\n * ```jsx\n * <Frame\n * drag={true}\n * dragConstraints={{ left: 0, right: 300 }}\n * dragMomentum={false}\n * />\n * ```\n *\n * @motion\n * ```jsx\n * <motion.div\n * drag\n * dragConstraints={{ left: 0, right: 300 }}\n * dragMomentum={false}\n * />\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "dragMomentum"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Content",
"text": "boolean"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "dragMomentum",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * Drag position is calculated by applying the pan offset to the x/y origin measured when the drag gesture begins.\n *\n * By manually creating `dragOriginX` as a `MotionValue`, it can be updated while the gesture is active, for instance to visually offset any movement should the component change layout.\n *\n * @library\n * ```jsx\n * const dragOriginX = useMotionValue(0)\n *\n * return <Frame dragOriginX={dragOriginX} />\n * ```\n *\n * @motion\n * ```jsx\n * const dragOriginX = useMotionValue(0)\n *\n * return <motion.div dragOriginX={dragOriginX} />\n * ```\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "dragOriginX"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Reference",
"text": "MotionValue"
},
{
"kind": "Content",
"text": "<number>"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "dragOriginX",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 4
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * Drag position is calculated by applying the pan offset to the x/y origin measured when the drag gesture begins.\n *\n * By manually creating `dragOriginY` as a `MotionValue`, it can be updated while the gesture is active, for instance to visually offset any movement should the component change layout.\n *\n * @library\n * ```jsx\n * const dragOriginY = useMotionValue(0)\n *\n * return <Frame dragOriginY={dragOriginY} />\n * ```\n *\n * @motion\n * ```jsx\n * const dragOriginY = useMotionValue(0)\n *\n * return <motion.div dragOriginY={dragOriginY} />\n * ```\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "dragOriginY"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Reference",
"text": "MotionValue"
},
{
"kind": "Content",
"text": "<number>"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "dragOriginY",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 4
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * Allows drag gesture propagation to child components. Set to `false` by default.\n *\n * @library\n * ```jsx\n * <Frame drag=\"x\" dragPropagation={true} />\n * ```\n *\n * @motion\n * ```jsx\n * <motion.div drag=\"x\" dragPropagation />\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "dragPropagation"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Content",
"text": "boolean"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "dragPropagation",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
},
{
"kind": "PropertySignature",
"docComment": "/**\n * Allows you to change dragging inertia parameters. When releasing a draggable Frame, an animation with type `inertia` starts. The animation is based on your dragging velocity. This property allows you to customize it. See {@link https://framer.com/api/animation/#inertia | Inertia} for all properties you can use.\n *\n * @library\n * ```jsx\n * <Frame\n * drag={true}\n * dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}\n * />\n * ```\n *\n * @motion\n * ```jsx\n * <motion.div\n * drag\n * dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}\n * />\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "dragTransition"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Reference",
"text": "InertiaOptions"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "dragTransition",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
}
],
"extendsTokenRanges": [
{
"startIndex": 3,
"endIndex": 5
}
]
},
{
"kind": "Interface",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export interface "
},
{
"kind": "Reference",
"text": "DragHandlers"
},
{
"kind": "Content",
"text": " "
}
],
"releaseTag": "Public",
"name": "DragHandlers",
"members": [
{
"kind": "MethodSignature",
"docComment": "/**\n * Callback function that fires a drag direction is determined.\n *\n * @library\n * ```jsx\n * function onDirectionLock(axis) {\n * console.log(axis)\n * }\n *\n * <Frame\n * drag\n * dragDirectionLock\n * onDirectionLock={onDirectionLock}\n * />\n * ```\n *\n * @motion\n * ```jsx\n * <motion.div\n * drag\n * dragDirectionLock\n * onDirectionLock={axis => console.log(axis)}\n * />\n * ```\n *\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "onDirectionLock"
},
{
"kind": "Content",
"text": "?("
},
{
"kind": "Reference",
"text": "axis"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Content",
"text": "\"x\" | \"y\""
},
{
"kind": "Content",
"text": "): "
},
{