Socket
Socket
Sign inDemoInstall

framer-motion

Package Overview
Dependencies
9
Maintainers
22
Versions
1062
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.3.5 to 0.4.0

10

CHANGELOG.md

@@ -5,2 +5,12 @@ # Changelog

## [0.4.0] 2019-02-12
### Changed
- Standardizing `(event, pointInfo)` as signature for gesture callbacks.
### Fixed
- Gesture priority bugs
## [0.3.2] 2019-02-08

@@ -7,0 +17,0 @@

1762

dist/framer-motion.api.json

@@ -18,1007 +18,5 @@ {

{
"kind": "Class",
"canonicalReference": "(MotionValue:class)",
"docComment": "/**\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare class "
},
{
"kind": "Reference",
"text": "MotionValue"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": " = any> "
}
],
"releaseTag": "Public",
"name": "MotionValue",
"members": [
{
"kind": "Constructor",
"canonicalReference": "(:constructor,instance,0)",
"docComment": "",
"excerptTokens": [
{
"kind": "Content",
"text": "constructor("
},
{
"kind": "Reference",
"text": "init"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ", { "
},
{
"kind": "Reference",
"text": "transformer"
},
{
"kind": "Content",
"text": ", "
},
{
"kind": "Reference",
"text": "parent"
},
{
"kind": "Content",
"text": " }?: "
},
{
"kind": "Reference",
"text": "Config"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": ");"
}
],
"isStatic": false,
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [
{
"parameterName": "init",
"parameterTypeTokenRange": {
"startIndex": 3,
"endIndex": 4
}
},
{
"parameterName": "{ transformer, parent }",
"parameterTypeTokenRange": {
"startIndex": 9,
"endIndex": 13
}
}
]
},
{
"kind": "Method",
"canonicalReference": "(addChild:instance,0)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "addChild"
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "config"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "Config"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Reference",
"text": "MotionValue"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 9,
"endIndex": 13
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [
{
"parameterName": "config",
"parameterTypeTokenRange": {
"startIndex": 4,
"endIndex": 8
}
}
],
"name": "addChild"
},
{
"kind": "Method",
"canonicalReference": "(addRenderSubscription:instance,0)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "addRenderSubscription"
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "subscription"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "Subscriber"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "() => boolean"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 9,
"endIndex": 10
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [
{
"parameterName": "subscription",
"parameterTypeTokenRange": {
"startIndex": 4,
"endIndex": 8
}
}
],
"name": "addRenderSubscription"
},
{
"kind": "Method",
"canonicalReference": "(addUpdateSubscription:instance,0)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "addUpdateSubscription"
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "subscription"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "Subscriber"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "() => boolean"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 9,
"endIndex": 10
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [
{
"parameterName": "subscription",
"parameterTypeTokenRange": {
"startIndex": 4,
"endIndex": 8
}
}
],
"name": "addUpdateSubscription"
},
{
"kind": "Method",
"canonicalReference": "(control:instance,0)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "control"
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "controller"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "ActionFactory"
},
{
"kind": "Content",
"text": ", "
},
{
"kind": "Reference",
"text": "config"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "PopmotionTransitionProps"
},
{
"kind": "Content",
"text": ", "
},
{
"kind": "Reference",
"text": "transformer"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Reference",
"text": "Transformer"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Reference",
"text": "Promise"
},
{
"kind": "Content",
"text": "<{}>"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 17,
"endIndex": 19
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [
{
"parameterName": "controller",
"parameterTypeTokenRange": {
"startIndex": 4,
"endIndex": 5
}
},
{
"parameterName": "config",
"parameterTypeTokenRange": {
"startIndex": 8,
"endIndex": 9
}
},
{
"parameterName": "transformer",
"parameterTypeTokenRange": {
"startIndex": 12,
"endIndex": 16
}
}
],
"name": "control"
},
{
"kind": "Method",
"canonicalReference": "(destroy:instance,0)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "destroy"
},
{
"kind": "Content",
"text": "(): "
},
{
"kind": "Content",
"text": "void"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [],
"name": "destroy"
},
{
"kind": "Method",
"canonicalReference": "(get:instance,0)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "get"
},
{
"kind": "Content",
"text": "(): "
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [],
"name": "get"
},
{
"kind": "Method",
"canonicalReference": "(getVelocity:instance,0)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "getVelocity"
},
{
"kind": "Content",
"text": "(): "
},
{
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [],
"name": "getVelocity"
},
{
"kind": "Property",
"canonicalReference": "(notifySubscriber:instance)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "notifySubscriber"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "subscriber"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "Subscriber"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ">) => void"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "notifySubscriber",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 9
},
"isStatic": false
},
{
"kind": "Method",
"canonicalReference": "(removeChild:instance,0)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "removeChild"
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "child"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "MotionValue"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "void"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 6,
"endIndex": 7
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [
{
"parameterName": "child",
"parameterTypeTokenRange": {
"startIndex": 4,
"endIndex": 5
}
}
],
"name": "removeChild"
},
{
"kind": "Property",
"canonicalReference": "(scheduleVelocityCheck:instance)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "scheduleVelocityCheck"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Content",
"text": "() => import(\"framesync/lib/types\")."
},
{
"kind": "Reference",
"text": "Process"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "scheduleVelocityCheck",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 4
},
"isStatic": false
},
{
"kind": "Method",
"canonicalReference": "(set:instance,0)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "set"
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "v"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ", "
},
{
"kind": "Reference",
"text": "render"
},
{
"kind": "Content",
"text": "?: "
},
{
"kind": "Content",
"text": "boolean"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "void"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 10,
"endIndex": 11
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [
{
"parameterName": "v",
"parameterTypeTokenRange": {
"startIndex": 4,
"endIndex": 5
}
},
{
"parameterName": "render",
"parameterTypeTokenRange": {
"startIndex": 8,
"endIndex": 9
}
}
],
"name": "set"
},
{
"kind": "Property",
"canonicalReference": "(setChild:instance)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "setChild"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "child"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "MotionValue"
},
{
"kind": "Content",
"text": "<any>) => void"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "setChild",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 7
},
"isStatic": false
},
{
"kind": "Method",
"canonicalReference": "(stop:instance,0)",
"docComment": "",
"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"
},
{
"kind": "Method",
"canonicalReference": "(subscribeTo:instance,0)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "subscribeTo"
},
{
"kind": "Content",
"text": "("
},
{
"kind": "Reference",
"text": "subscriptions"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "Set"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "Subscriber"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ">>"
},
{
"kind": "Content",
"text": ", "
},
{
"kind": "Reference",
"text": "subscription"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "Subscriber"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "() => boolean"
},
{
"kind": "Content",
"text": ";"
}
],
"isStatic": false,
"returnTypeTokenRange": {
"startIndex": 18,
"endIndex": 19
},
"releaseTag": "Public",
"overloadIndex": 0,
"parameters": [
{
"parameterName": "subscriptions",
"parameterTypeTokenRange": {
"startIndex": 4,
"endIndex": 10
}
},
{
"parameterName": "subscription",
"parameterTypeTokenRange": {
"startIndex": 13,
"endIndex": 17
}
}
],
"name": "subscribeTo"
},
{
"kind": "Property",
"canonicalReference": "(velocityCheck:instance)",
"docComment": "",
"excerptTokens": [
{
"kind": "Reference",
"text": "velocityCheck"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Content",
"text": "({ "
},
{
"kind": "Reference",
"text": "timestamp"
},
{
"kind": "Content",
"text": " }: "
},
{
"kind": "Reference",
"text": "FrameData"
},
{
"kind": "Content",
"text": ") => void"
},
{
"kind": "Content",
"text": ";"
}
],
"releaseTag": "Public",
"name": "velocityCheck",
"propertyTypeTokenRange": {
"startIndex": 2,
"endIndex": 7
},
"isStatic": false
}
],
"implementsTokenRanges": []
},
{
"kind": "Function",
"canonicalReference": "(unwrapMotionValue:0)",
"docComment": "/**\n * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself\n *\n * @param - value\n *\n * @public\n */\n",
"canonicalReference": "(useAnimation:0)",
"docComment": "/**\n * Manually start, stop and sequence animations\n *\n * @remarks\n *\n * `useAnimation` is used to manually start, stop and sequence animations.\n *\n * Create an animation controller with `useAnimation`:\n * ```jsx\n * const animation = useAnimation()\n * ```\n *\n * Pass this to one or more components that you want to animate via the `animate` property:\n * ```jsx\n * return <motion.div animate={animation} />\n * ```\n *\n * Now you can start animations with `animation.start`. It accepts the same properties as the `animate` prop:\n * ```jsx\n * const animation = useAnimation()\n * const moveRight = () => animation.start({\n * x: 100,\n * transition: { duration: 1 }\n * })\n *\n * return <motion.div animate={animation} onClick={moveRight} />\n * ```\n *\n * `start` returns a `Promise`, so animations can be sequenced using `async` functions:\n * ```jsx\n * const sequence = async () => {\n * await animation.start({ opacity: 1 })\n * return animation.start({ scale: 2 })\n * }\n * ```\n *\n * `useAnimation` can optionally accept `variants`:\n * ```jsx\n * const animation = useAnimation({\n * visible: { opacity: 1 },\n * hidden: { opacity: 0 }\n * })\n * ```\n *\n * That can be later referenced by `start`:\n * ```jsx\n * animation.start('visible')\n * ```\n *\n * @params variants - List of variants. Optional\n *\n * @returns Animation controller with `start` and `stop` methods\n *\n * @public\n */\n",
"excerptTokens": [

@@ -1031,50 +29,38 @@ {

"kind": "Reference",
"text": "unwrapMotionValue"
"text": "useAnimation"
},
{
"kind": "Content",
"text": "<"
"text": "("
},
{
"kind": "Reference",
"text": "V"
"text": "variants"
},
{
"kind": "Content",
"text": ">("
"text": "?: "
},
{
"kind": "Reference",
"text": "value"
"text": "Variants"
},
{
"kind": "Content",
"text": ": "
"text": ", "
},
{
"kind": "Reference",
"text": "V"
"text": "defaultTransition"
},
{
"kind": "Content",
"text": " | "
"text": "?: "
},
{
"kind": "Reference",
"text": "MotionValue"
"text": "Transition"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "V"
},
{
"kind": "Content",
"text": ">"
},
{
"kind": "Content",
"text": "): "

@@ -1084,3 +70,3 @@ },

"kind": "Reference",
"text": "V"
"text": "AnimationGroupControls"
},

@@ -1093,4 +79,4 @@ {

"returnTypeTokenRange": {
"startIndex": 14,
"endIndex": 15
"startIndex": 11,
"endIndex": 12
},

@@ -1101,15 +87,22 @@ "releaseTag": "Public",

{
"parameterName": "value",
"parameterName": "variants",
"parameterTypeTokenRange": {
"startIndex": 7,
"endIndex": 13
"startIndex": 5,
"endIndex": 6
}
},
{
"parameterName": "defaultTransition",
"parameterTypeTokenRange": {
"startIndex": 9,
"endIndex": 10
}
}
],
"name": "unwrapMotionValue"
"name": "useAnimation"
},
{
"kind": "Function",
"canonicalReference": "(usePanGesture:0)",
"docComment": "/**\n * @param - handlers\n *\n * @param - ref\n *\n * @public\n */\n",
"canonicalReference": "(useCycle:0)",
"docComment": "/**\n * Cycles through a series of states.\n *\n * @remarks\n *\n * `useCycle` works similar to React's `useState`.\n *\n * It's provided an array of possible states, and returns an array of two arguments.\n *\n * The first item is the current state. The second item is a function that cycles to the next state.\n * ```jsx\n * const [x, cycleX] = useCycle([0, 100, 200])\n *\n * return <motion.div animate={{ x }} onClick={cycleX} />\n * ```\n *\n * By default, the initial state is the first item in the provided array (`0` in the above example).\n *\n * `useCycle` accepts a second parameter, that can set a different index. For example:\n * ```jsx\n * const [x, cycleX] = useCycle([0, 100, 200], 2)\n * ```\n *\n * `x` would initially be `200`.\n *\n * The returned `cycleState` function, by default, cycles to the next item in the array.\n *\n * Optionally, it accepts an index that will cycle to a specific item in the array.\n *\n * @param items - An array of the possible states\n *\n * @param initialIndex - Index of initial state. Optional, defaults to 0\n *\n * @returns [currentState, cycleState]\n *\n * @public\n */\n",
"excerptTokens": [

@@ -1122,14 +115,22 @@ {

"kind": "Reference",
"text": "usePanGesture"
"text": "useCycle"
},
{
"kind": "Content",
"text": "("
"text": "<"
},
{
"kind": "Reference",
"text": "handlers"
"text": "T"
},
{
"kind": "Content",
"text": ">("
},
{
"kind": "Reference",
"text": "items"
},
{
"kind": "Content",
"text": ": "

@@ -1139,6 +140,10 @@ },

"kind": "Reference",
"text": "PanHandlers"
"text": "T"
},
{
"kind": "Content",
"text": "[]"
},
{
"kind": "Content",
"text": ", "

@@ -1148,31 +153,35 @@ },

"kind": "Reference",
"text": "ref"
"text": "initialIndex"
},
{
"kind": "Content",
"text": ": "
"text": "?: "
},
{
"kind": "Reference",
"text": "RefObject"
"kind": "Content",
"text": "number"
},
{
"kind": "Content",
"text": "<"
"text": "): "
},
{
"kind": "Content",
"text": "["
},
{
"kind": "Reference",
"text": "Element"
"text": "T"
},
{
"kind": "Content",
"text": ">"
"text": ", ("
},
{
"kind": "Content",
"text": "): "
"kind": "Reference",
"text": "i"
},
{
"kind": "Content",
"text": "undefined"
"text": "?: any) => void]"
},

@@ -1186,3 +195,3 @@ {

"startIndex": 14,
"endIndex": 15
"endIndex": 19
},

@@ -1193,12 +202,12 @@ "releaseTag": "Public",

{
"parameterName": "handlers",
"parameterName": "items",
"parameterTypeTokenRange": {
"startIndex": 5,
"endIndex": 6
"startIndex": 7,
"endIndex": 9
}
},
{
"parameterName": "ref",
"parameterName": "initialIndex",
"parameterTypeTokenRange": {
"startIndex": 9,
"startIndex": 12,
"endIndex": 13

@@ -1208,8 +217,8 @@ }

],
"name": "usePanGesture"
"name": "useCycle"
},
{
"kind": "Function",
"canonicalReference": "(usePanGesture:1)",
"docComment": "",
"canonicalReference": "(useGestures:0)",
"docComment": "/**\n * Add pan and tap gesture recognition to an element.\n *\n * @remarks\n *\n * `useGestures` is an unopinionated way to add pan and tap gesture recognition to an element.\n *\n * ## Pan\n *\n * A pan is defined as when a user's pointer presses an element and move beyond and initial threshold.\n *\n * The pan gesture can be handled with three event handlers: `onPanStart`, `onPan` and `onPanEnd`.\n *\n * Each event handler function receives the originating pointer event as its first argument.\n *\n * As a second argument, the following pointer information is provided as x/y coordinates:\n *\n * - `point`: The point, relative to the page - `delta`: The movement from the previous pan movement - `offset`: The movement from the point's origin, - `velocity`: The velocity of the point\n *\n * ## Tap\n *\n * A tap is defined as a user pressing their pointer on an element and releasing it on the same element.\n *\n * The tap gesture can be handled with three event handlers: `onTapStart`, `onTap`, `onTapCancel`.\n *\n * Each event handler function receives the originating pointer event as its first argument.\n *\n * As a second argument, the following pointer information is provided as x/y coordinates:\n *\n * - `point`: The point, relative to the page\n *\n * @param - props\n *\n * @param - ref\n *\n * @public\n */\n",
"excerptTokens": [

@@ -1222,31 +231,27 @@ {

"kind": "Reference",
"text": "usePanGesture"
"text": "useGestures"
},
{
"kind": "Content",
"text": "("
"text": "<"
},
{
"kind": "Reference",
"text": "handlers"
"text": "P"
},
{
"kind": "Content",
"text": ": "
"text": " extends "
},
{
"kind": "Reference",
"text": "PanHandlers"
"text": "GestureHandlers"
},
{
"kind": "Content",
"text": "): "
"text": ">("
},
{
"kind": "Content",
"text": "{\n "
},
{
"kind": "Reference",
"text": "onPointerDown"
"text": "props"
},

@@ -1259,68 +264,33 @@ {

"kind": "Reference",
"text": "EventHandler"
"text": "P"
},
{
"kind": "Content",
"text": ";\n}"
"text": ", "
},
{
"kind": "Content",
"text": ";"
}
],
"returnTypeTokenRange": {
"startIndex": 7,
"endIndex": 12
},
"releaseTag": "Public",
"overloadIndex": 1,
"parameters": [
{
"parameterName": "handlers",
"parameterTypeTokenRange": {
"startIndex": 5,
"endIndex": 6
}
}
],
"name": "usePanGesture"
},
{
"kind": "Function",
"canonicalReference": "(useTapGesture:0)",
"docComment": "/**\n * @param - handlers\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Content",
"text": "export declare function "
},
{
"kind": "Reference",
"text": "useTapGesture"
"text": "ref"
},
{
"kind": "Content",
"text": "("
"text": ": "
},
{
"kind": "Reference",
"text": "handlers"
"text": "RefObject"
},
{
"kind": "Content",
"text": ": "
"text": "<"
},
{
"kind": "Reference",
"text": "TapHandlers"
"text": "Element"
},
{
"kind": "Content",
"text": " & "
"text": ">"
},
{
"kind": "Reference",
"text": "ControlsProp"
},
{
"kind": "Content",

@@ -1331,22 +301,6 @@ "text": "): "

"kind": "Content",
"text": "{\n "
"text": "void"
},
{
"kind": "Reference",
"text": "onPointerDown"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "EventHandler"
},
{
"kind": "Content",
"text": ";\n}"
},
{
"kind": "Content",
"text": ";"

@@ -1356,4 +310,4 @@ }

"returnTypeTokenRange": {
"startIndex": 9,
"endIndex": 14
"startIndex": 18,
"endIndex": 19
},

@@ -1364,15 +318,22 @@ "releaseTag": "Public",

{
"parameterName": "handlers",
"parameterName": "props",
"parameterTypeTokenRange": {
"startIndex": 5,
"endIndex": 8
"startIndex": 9,
"endIndex": 10
}
},
{
"parameterName": "ref",
"parameterTypeTokenRange": {
"startIndex": 13,
"endIndex": 17
}
}
],
"name": "useTapGesture"
"name": "useGestures"
},
{
"kind": "Function",
"canonicalReference": "(useTapGesture:1)",
"docComment": "",
"canonicalReference": "(useMotionValue:0)",
"docComment": "/**\n * For advanced use-cases, you can assume external control of the motion values used by `motion` components.\n *\n * This is usually used in conjunction with `useTransform`.\n *\n * ## Import\n * ```javascript\n * import { useMotionValue } from 'framer-motion'\n * ```\n *\n * ## Usage\n *\n * Motion values are created with the `useMotionValue` hook, providing it an initial value:\n * ```javascript\n * const x = useMotionValue(0)\n * ```\n *\n * This can be passed to a motion component via the `motionValue` prop:\n * ```javascript\n * const MotionComponent = motion.div()\n *\n * export const () => {\n * const x = useMotionValue(0)\n *\n * return <MotionComponent motionValues={{ x }} />\n * }\n * ```\n *\n * @param - {number | string} init - The initial state of the `MotionValue`\n *\n * @returns `MotionValue`\n *\n * @public\n */\n",
"excerptTokens": [

@@ -1385,46 +346,38 @@ {

"kind": "Reference",
"text": "useTapGesture"
"text": "useMotionValue"
},
{
"kind": "Content",
"text": "("
"text": "<"
},
{
"kind": "Reference",
"text": "handlers"
"text": "T"
},
{
"kind": "Content",
"text": ": "
"text": ">("
},
{
"kind": "Reference",
"text": "TapHandlers"
"text": "init"
},
{
"kind": "Content",
"text": " & "
"text": ": "
},
{
"kind": "Reference",
"text": "ControlsProp"
"text": "T"
},
{
"kind": "Content",
"text": ", "
"text": "): "
},
{
"kind": "Reference",
"text": "ref"
"text": "MotionValue"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "RefObject"
},
{
"kind": "Content",
"text": "<"

@@ -1434,3 +387,3 @@ },

"kind": "Reference",
"text": "Element"
"text": "T"
},

@@ -1443,10 +396,2 @@ {

"kind": "Content",
"text": "): "
},
{
"kind": "Content",
"text": "undefined"
},
{
"kind": "Content",
"text": ";"

@@ -1456,24 +401,17 @@ }

"returnTypeTokenRange": {
"startIndex": 16,
"endIndex": 17
"startIndex": 9,
"endIndex": 13
},
"releaseTag": "Public",
"overloadIndex": 1,
"overloadIndex": 0,
"parameters": [
{
"parameterName": "handlers",
"parameterName": "init",
"parameterTypeTokenRange": {
"startIndex": 5,
"startIndex": 7,
"endIndex": 8
}
},
{
"parameterName": "ref",
"parameterTypeTokenRange": {
"startIndex": 11,
"endIndex": 15
}
}
],
"name": "useTapGesture"
"name": "useMotionValue"
},

@@ -1483,3 +421,3 @@ {

"canonicalReference": "(useTransformedValue:0)",
"docComment": "/**\n * @param - value\n *\n * @param - transform\n *\n * @public\n */\n",
"docComment": "/**\n * Creates a new `MotionValue` that takes the output of another `MotionValue` and transforms it with a function\n *\n * @param value - `MotionValue`\n *\n * @param transform - Function that accepts the output of `value` and returns a new value.\n *\n * @returns `MotionValue`\n *\n * @public\n */\n",
"excerptTokens": [

@@ -1566,3 +504,3 @@ {

"canonicalReference": "(useTransformedValue:1)",
"docComment": "",
"docComment": "/**\n * Creates a new `MotionValue` that takes the output of another `MotionValue` and transforms between the `from` range to the `to` range.\n *\n * @remarks\n *\n * Options: - `clamp`: Default `true`. Clamps output to the provided array\n *\n * @param value - `MotionValue`\n *\n * @param from - A linear series of numbers (either all increasing or decreasing)\n *\n * @param to - A series of numbers, colors or strings. Must be the same length as `from`.\n *\n * @param options - Options\n *\n * @returns `MotionValue`\n *\n * @public\n */\n",
"excerptTokens": [

@@ -1697,412 +635,80 @@ {

{
"kind": "Variable",
"canonicalReference": "motion",
"docComment": "/**\n * @internalremarks At some point we might want to explore a \"headless\" component that renders only `children` in the event\n *\n * @public\n */\n",
"kind": "Function",
"canonicalReference": "(useViewportScrollValues:0)",
"docComment": "/**\n * Provides `MotionValue`s that update when the viewport scrolls.\n *\n * @remarks\n *\n * This makes it possible to transform viewport scrolls into other values.\n *\n * Four `MotionValue`s are returned:\n *\n * - `scrollX`/`scrollY`: The x/y scroll offset in pixels. - `scrollXProgress`/`scrollYProgress`: The x/y scroll offset as a progress value between `0` and `1`.\n * ```jsx\n * const { scrollX } = useViewportScrollValues()\n * ```\n *\n * @returns `{ scrollX, scrollY, scrollXProgress, scrollYProgress }` `MotionValue`s\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "motion"
},
{
"kind": "Content",
"text": ": "
"text": "export declare function "
},
{
"kind": "Reference",
"text": "MotionComponents"
}
],
"releaseTag": "Public",
"name": "motion",
"variableTypeTokenRange": {
"startIndex": 2,
"endIndex": 3
}
},
{
"kind": "Variable",
"canonicalReference": "useAnimation",
"docComment": "/**\n * @param - variants\n *\n * @param - defaultTransition\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "useAnimation"
"text": "useViewportScrollValues"
},
{
"kind": "Content",
"text": ": "
"text": "(): "
},
{
"kind": "Content",
"text": "("
"text": "{\n "
},
{
"kind": "Reference",
"text": "variants"
"text": "scrollX"
},
{
"kind": "Content",
"text": "?: "
"text": ": import(\".\")."
},
{
"kind": "Reference",
"text": "Variants"
"text": "MotionValue"
},
{
"kind": "Content",
"text": " | undefined, "
"text": "<number>;\n "
},
{
"kind": "Reference",
"text": "defaultTransition"
"text": "scrollY"
},
{
"kind": "Content",
"text": "?: import(\"../types\")."
"text": ": import(\".\")."
},
{
"kind": "Reference",
"text": "TransitionMap"
"text": "MotionValue"
},
{
"kind": "Content",
"text": " | (import(\"../types\")."
"text": "<number>;\n "
},
{
"kind": "Reference",
"text": "TransitionOrchestration"
"text": "scrollXProgress"
},
{
"kind": "Content",
"text": " & import(\"../types\")."
"text": ": import(\".\")."
},
{
"kind": "Reference",
"text": "Tween"
"text": "MotionValue"
},
{
"kind": "Content",
"text": ") | (import(\"../types\")."
"text": "<number>;\n "
},
{
"kind": "Reference",
"text": "TransitionOrchestration"
"text": "scrollYProgress"
},
{
"kind": "Content",
"text": " & import(\"../types\")."
"text": ": import(\".\")."
},
{
"kind": "Reference",
"text": "Spring"
},
{
"kind": "Content",
"text": ") | (import(\"../types\")."
},
{
"kind": "Reference",
"text": "TransitionOrchestration"
},
{
"kind": "Content",
"text": " & import(\"../types\")."
},
{
"kind": "Reference",
"text": "Decay"
},
{
"kind": "Content",
"text": ") | (import(\"../types\")."
},
{
"kind": "Reference",
"text": "TransitionOrchestration"
},
{
"kind": "Content",
"text": " & import(\"../types\")."
},
{
"kind": "Reference",
"text": "Inertia"
},
{
"kind": "Content",
"text": ") | (import(\"../types\")."
},
{
"kind": "Reference",
"text": "TransitionOrchestration"
},
{
"kind": "Content",
"text": " & import(\"../types\")."
},
{
"kind": "Reference",
"text": "Keyframes"
},
{
"kind": "Content",
"text": ") | (import(\"../types\")."
},
{
"kind": "Reference",
"text": "TransitionOrchestration"
},
{
"kind": "Content",
"text": " & import(\"../types\")."
},
{
"kind": "Reference",
"text": "Physics"
},
{
"kind": "Content",
"text": ") | (import(\"../types\")."
},
{
"kind": "Reference",
"text": "TransitionOrchestration"
},
{
"kind": "Content",
"text": " & import(\"../types\")."
},
{
"kind": "Reference",
"text": "Just"
},
{
"kind": "Content",
"text": ") | (import(\"../types\")."
},
{
"kind": "Reference",
"text": "TransitionOrchestration"
},
{
"kind": "Content",
"text": " & import(\"../types\")."
},
{
"kind": "Reference",
"text": "None"
},
{
"kind": "Content",
"text": ") | undefined) => "
},
{
"kind": "Reference",
"text": "AnimationManager"
}
],
"releaseTag": "Public",
"name": "useAnimation",
"variableTypeTokenRange": {
"startIndex": 2,
"endIndex": 44
}
},
{
"kind": "Variable",
"canonicalReference": "useCycle",
"docComment": "/**\n * Cycles through a series of states.\n *\n * @remarks\n *\n * `useCycle` works similar to React's `useState`.\n *\n * It's provided an array of possible states, and returns an array of two arguments.\n *\n * The first item is the current state. The second item is a function that cycles to the next state.\n * ```jsx\n * const [x, cycleX] = useCycle([0, 100, 200])\n *\n * return <Frame animate={{ x }} onClick={cycleX} />\n * ```\n *\n * By default, the initial state is the first item in the provided array (`0` in the above example).\n *\n * `useCycle` accepts a second parameter, that can set a different index. For example:\n * ```jsx\n * const [x, cycleX] = useCycle([0, 100, 200], 2)\n * ```\n *\n * `x` would initially be `200`.\n *\n * The returned `cycleState` function, by default, cycles to the next item in the array.\n *\n * Optionally, it accepts an index that will cycle to a specific item in the array.\n *\n * @param items - An array of the possible states\n *\n * @param initialIndex - Index of initial state. Optional, defaults to 0\n *\n * @returns [currentState, cycleState]\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "useCycle"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "T"
},
{
"kind": "Content",
"text": ">("
},
{
"kind": "Reference",
"text": "items"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "T"
},
{
"kind": "Content",
"text": "[], "
},
{
"kind": "Reference",
"text": "initialIndex"
},
{
"kind": "Content",
"text": "?: number) => ["
},
{
"kind": "Reference",
"text": "T"
},
{
"kind": "Content",
"text": ", ("
},
{
"kind": "Reference",
"text": "i"
},
{
"kind": "Content",
"text": "?: any) => void]"
}
],
"releaseTag": "Public",
"name": "useCycle",
"variableTypeTokenRange": {
"startIndex": 2,
"endIndex": 15
}
},
{
"kind": "Variable",
"canonicalReference": "useGestures",
"docComment": "/**\n * @param - props\n *\n * @param - ref\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "useGestures"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "P"
},
{
"kind": "Content",
"text": " extends "
},
{
"kind": "Reference",
"text": "GestureHandlers"
},
{
"kind": "Content",
"text": ">("
},
{
"kind": "Reference",
"text": "props"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "P"
},
{
"kind": "Content",
"text": ", "
},
{
"kind": "Reference",
"text": "ref"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "RefObject"
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "Element"
},
{
"kind": "Content",
"text": ">) => void"
}
],
"releaseTag": "Public",
"name": "useGestures",
"variableTypeTokenRange": {
"startIndex": 2,
"endIndex": 17
}
},
{
"kind": "Variable",
"canonicalReference": "useMotionValue",
"docComment": "/**\n * For advanced use-cases, you can assume external control of the motion values used by `motion` components.\n *\n * This is usually used in conjunction with `useTransform`.\n *\n * ## Import\n * ```javascript\n * import { useMotionValue } from 'framer-motion'\n * ```\n *\n * ## Usage\n *\n * Motion values are created with the `useMotionValue` hook, providing it an initial value:\n * ```javascript\n * const x = useMotionValue(0)\n * ```\n *\n * This can be passed to a motion component via the `motionValue` prop:\n * ```javascript\n * const MotionComponent = motion.div()\n *\n * export const () => {\n * const x = useMotionValue(0)\n *\n * return <MotionComponent motionValues={{ x }} />\n * }\n * ```\n *\n * @param - {number | string} init - The initial state of the `MotionValue`\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "useMotionValue"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Content",
"text": "<"
},
{
"kind": "Reference",
"text": "T"
},
{
"kind": "Content",
"text": ">("
},
{
"kind": "Reference",
"text": "init"
},
{
"kind": "Content",
"text": ": "
},
{
"kind": "Reference",
"text": "T"
},
{
"kind": "Content",
"text": ") => "
},
{
"kind": "Reference",
"text": "MotionValue"

@@ -2112,28 +718,26 @@ },

"kind": "Content",
"text": "<"
"text": "<number>;\n}"
},
{
"kind": "Reference",
"text": "T"
},
{
"kind": "Content",
"text": ">"
"text": ";"
}
],
"returnTypeTokenRange": {
"startIndex": 3,
"endIndex": 20
},
"releaseTag": "Public",
"name": "useMotionValue",
"variableTypeTokenRange": {
"startIndex": 2,
"endIndex": 13
}
"overloadIndex": 0,
"parameters": [],
"name": "useViewportScrollValues"
},
{
"kind": "Variable",
"canonicalReference": "useViewportScrollValues",
"docComment": "/**\n * `useViewportScroll` provides `MotionValue`s that update when the viewport scrolls.\n *\n * This makes it possible to transform viewport scroll into other values.\n *\n * For instance, highlighting different table of contents items to correspond with page scroll.\n *\n * @public\n */\n",
"canonicalReference": "motion",
"docComment": "/**\n * Components optimised for use in gestures and animation.\n *\n * @internalremarks We should look into allowing `dragMomentum` and/or other props to config the `inertia` animation props.\n *\n * @remarks\n *\n * `motion` components offer a simple API for adding gestures and animation.\n *\n * They're optimized for motion to keep interfaces running at a smooth 60fps.\n *\n * ## Animation\n *\n * - TODO\n *\n * ## Gestures\n *\n * - TODO\n *\n * ## Supported elements\n *\n * All HTML and SVG elements are supported.\n *\n * ## Supported values\n *\n * All CSS and SVG properties are supported.\n *\n * ### Transforms\n *\n * Transform values can be animated as separate values: - `x`, `y`, `z`, - `rotate`, `rotateX`, `rotateY`, `rotateZ`, - `scale`, `scaleX`, `scaleY`, `scaleZ`, - `skewX`, `skewY`, - `originX`, `originY` - `perspective`\n *\n * ### Value conversion\n *\n * For HTML elements, `x`, `y`, `width`, `height`, `top`, `left`, `bottom` and `right` can be animated between different value types:\n * ```jsx\n * const variants = {\n * closed: { x: 0 },\n * open: { x: 'calc(50vw - 50%)' }\n * }\n * ```\n *\n * ### Path drawing\n *\n * `motion.path` has support for three properties that make it easier to work with path drawing animations than `stroke-dashoffset` and `stroke-dasharray` directly: - `pathLength` - `pathSpacing` - `pathOffset`\n *\n * These are all set as a percentage of the total path length, from `0` to `100`, which is automatically measured by Framer Motion.\n * ```jsx\n * {\n * empty: { pathLength: 0 },\n * fill: { pathLength: 100 }\n * }\n * ```\n *\n * @param animate - Either properties to animate to, variant label, array of variant labels, or `AnimationController`\n *\n * @param initial - Properties, variant label or array of variant labels to start in\n *\n * @param variants - Object of variants\n *\n * @param transition - Default transition\n *\n * @param style - Supports `MotionValue`s and separate `transform` values.\n *\n * @param hover - Properties or variant label to animate to while the hover gesture is recognised\n *\n * @param press - Properties or variant label to animate to while the component is pressed\n *\n * @param onAnimationComplete - Callback when animation to `animate` is complete\n *\n * @param onUpdate - Callback with latest motion values, fired once per frame\n *\n * @param onPanStart - Callback when the pan gesture begins on this element\n *\n * @param onPan - Callback when the pan gesture is recognised on this element\n *\n * @param onPanEnd - Callback when the pan gesture ends on this element\n *\n * @param onTapStart - Callback when the tap gesture starts on this element\n *\n * @param onTap - Callback when the tap gesture successfully ends on this element\n *\n * @param onTapCancel - Callback when the tap gesture ends outside this element\n *\n * @param dragEnabled - `true | 'x' | 'y' | 'lockDirection'` Sets which directions the component can be dragged in\n *\n * @param dragConstraints - An object of optional `top`, `left`, `right`, `bottom` pixel values, beyond which dragging is constrained\n *\n * @param dragElastic - The degree of movement allowed outside constraints. Set to `false` for no movement. Defaults to `0.5`\n *\n * @param dragMomentum - Apply momentum from the pan gesture to the component when dragging finishes. Defaults to `true`\n *\n * @param dragPropagation - Allows drag gesture propagation to child components. Defaults to `false`\n *\n * @param render - Set to `false` to block rendering the latest motion values on the component - can be used to temporarily disable animations for performance reasons. Defaults to `true`\n *\n * @public\n */\n",
"excerptTokens": [
{
"kind": "Reference",
"text": "useViewportScrollValues"
"text": "motion"
},

@@ -2145,75 +749,11 @@ {

{
"kind": "Content",
"text": "() => {\n "
},
{
"kind": "Reference",
"text": "scrollX"
},
{
"kind": "Content",
"text": ": import(\".\")."
},
{
"kind": "Reference",
"text": "MotionValue"
},
{
"kind": "Content",
"text": "<number>;\n "
},
{
"kind": "Reference",
"text": "scrollY"
},
{
"kind": "Content",
"text": ": import(\".\")."
},
{
"kind": "Reference",
"text": "MotionValue"
},
{
"kind": "Content",
"text": "<number>;\n "
},
{
"kind": "Reference",
"text": "scrollXProgress"
},
{
"kind": "Content",
"text": ": import(\".\")."
},
{
"kind": "Reference",
"text": "MotionValue"
},
{
"kind": "Content",
"text": "<number>;\n "
},
{
"kind": "Reference",
"text": "scrollYProgress"
},
{
"kind": "Content",
"text": ": import(\".\")."
},
{
"kind": "Reference",
"text": "MotionValue"
},
{
"kind": "Content",
"text": "<number>;\n}"
"text": "MotionComponents"
}
],
"releaseTag": "Public",
"name": "useViewportScrollValues",
"name": "motion",
"variableTypeTokenRange": {
"startIndex": 2,
"endIndex": 19
"endIndex": 3
}

@@ -2220,0 +760,0 @@ }

262

dist/framer-motion.d.ts

@@ -22,2 +22,3 @@ import { Action } from 'popmotion';

private overrides;
private activeOverrides;
private resolvedOverrides;

@@ -39,2 +40,4 @@ private defaultTransition?;

getHighestPriority(): number;
setOverride(definition: AnimationDefinition, overrideIndex: number): void;
startOverride(overrideIndex: number): Promise<any> | undefined;
clearOverride(overrideIndex: number): void;

@@ -44,3 +47,2 @@ apply(definition: VariantLabels | TargetAndTransition): void;

start(definition: AnimationDefinition, opts?: AnimationOptions): Promise<any>;
setPriorityAnimation(definition: AnimationDefinition, priority: number): void;
isHighestPriority(priority: number): boolean;

@@ -61,3 +63,3 @@ private animate;

declare class AnimationManager {
declare class AnimationGroupControls {
private hasMounted;

@@ -223,4 +225,88 @@ private defaultTransition;

/**
* Components optimised for use in gestures and animation.
*
* @internalremarks
* We should look into allowing `dragMomentum` and/or other props to config the `inertia` animation props.
*
* @remarks
* `motion` components offer a simple API for adding gestures and animation.
*
* They're optimized for motion to keep interfaces running at a smooth 60fps.
*
* ## Animation
*
* - TODO
*
* ## Gestures
*
* - TODO
*
* ## Supported elements
*
* All HTML and SVG elements are supported.
*
* ## Supported values
*
* All CSS and SVG properties are supported.
*
* ### Transforms
*
* Transform values can be animated as separate values:
* - `x`, `y`, `z`,
* - `rotate`, `rotateX`, `rotateY`, `rotateZ`,
* - `scale`, `scaleX`, `scaleY`, `scaleZ`,
* - `skewX`, `skewY`,
* - `originX`, `originY`
* - `perspective`
*
* ### Value conversion
*
* For HTML elements, `x`, `y`, `width`, `height`, `top`, `left`, `bottom` and `right` can be animated between different value types:
*
* ```jsx
* const variants = {
* closed: { x: 0 },
* open: { x: 'calc(50vw - 50%)' }
* }
* ```
*
* ### Path drawing
*
* `motion.path` has support for three properties that make it easier to work with path drawing animations than `stroke-dashoffset` and `stroke-dasharray` directly:
* - `pathLength`
* - `pathSpacing`
* - `pathOffset`
*
* These are all set as a percentage of the total path length, from `0` to `100`, which is automatically measured by Framer Motion.
*
* ```jsx
* {
* empty: { pathLength: 0 },
* fill: { pathLength: 100 }
* }
* ```
*
* @param animate - Either properties to animate to, variant label, array of variant labels, or `AnimationController`
* @param initial - Properties, variant label or array of variant labels to start in
* @param variants - Object of variants
* @param transition - Default transition
* @param style - Supports `MotionValue`s and separate `transform` values.
* @param hover - Properties or variant label to animate to while the hover gesture is recognised
* @param press - Properties or variant label to animate to while the component is pressed
* @param onAnimationComplete - Callback when animation to `animate` is complete
* @param onUpdate - Callback with latest motion values, fired once per frame
* @param onPanStart - Callback when the pan gesture begins on this element
* @param onPan - Callback when the pan gesture is recognised on this element
* @param onPanEnd - Callback when the pan gesture ends on this element
* @param onTapStart - Callback when the tap gesture starts on this element
* @param onTap - Callback when the tap gesture successfully ends on this element
* @param onTapCancel - Callback when the tap gesture ends outside this element
* @param dragEnabled - `true | 'x' | 'y' | 'lockDirection'` Sets which directions the component can be dragged in
* @param dragConstraints - An object of optional `top`, `left`, `right`, `bottom` pixel values, beyond which dragging is constrained
* @param dragElastic - The degree of movement allowed outside constraints. Set to `false` for no movement. Defaults to `0.5`
* @param dragMomentum - Apply momentum from the pan gesture to the component when dragging finishes. Defaults to `true`
* @param dragPropagation - Allows drag gesture propagation to child components. Defaults to `false`
* @param render - Set to `false` to block rendering the latest motion values on the component - can be used to temporarily disable animations for performance reasons. Defaults to `true`
*
* @public
* @internalremarks At some point we might want to explore a "headless" component that renders only `children` in the event
*/

@@ -240,8 +326,3 @@ export declare const motion: MotionComponents;

export declare interface MotionPlugins {
transformPagePoint: (point: Point) => Point;
}
/**
*
* @internal

@@ -251,8 +332,12 @@ * @internalremarks For now I think this should remain a private API for our own use

*/
export declare const MotionPlugins: ({ children, ...props }: MotionPluginProps) => JSX.Element;
export declare function MotionPlugins({ children, ...props }: MotionPluginProps): JSX.Element;
export declare interface MotionPlugins {
transformPagePoint: (point: Point) => Point;
}
declare interface MotionProps extends GestureHandlers, DraggableProps {
ref?: Ref<Element>;
style?: MotionStyle;
animate?: AnimationManager | TargetAndTransition | VariantLabels;
animate?: AnimationGroupControls | TargetAndTransition | VariantLabels;
initial?: Target | VariantLabels;

@@ -262,4 +347,4 @@ variants?: Variants;

inherit?: boolean;
render?: boolean;
onUpdate?: OnUpdate;
render?: boolean;
onAnimationComplete?: () => void;

@@ -295,3 +380,3 @@ [key: string]: any;

/**
* @public
* @internal
*/

@@ -420,3 +505,3 @@ export declare class MotionValue<V = any> {

declare type TapHandler = (session: TapInfo, event: Event) => void;
declare type TapHandler = (event: Event, session: TapInfo) => void;

@@ -508,4 +593,4 @@ declare interface TapHandlers {

* If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
* @param value
* @public
*
* @internal
*/

@@ -515,8 +600,61 @@ export declare function unwrapMotionValue<V>(value: V | MotionValue<V>): V;

/**
* Manually start, stop and sequence animations
*
* @param variants
* @param defaultTransition
* @remarks
* `useAnimation` is used to manually start, stop and sequence animations.
*
* Create an animation controller with `useAnimation`:
*
* ```jsx
* const animation = useAnimation()
* ```
*
* Pass this to one or more components that you want to animate via the `animate` property:
*
* ```jsx
* return <motion.div animate={animation} />
* ```
*
* Now you can start animations with `animation.start`. It accepts the same properties as the `animate` prop:
*
* ```jsx
* const animation = useAnimation()
* const moveRight = () => animation.start({
* x: 100,
* transition: { duration: 1 }
* })
*
* return <motion.div animate={animation} onClick={moveRight} />
* ```
*
* `start` returns a `Promise`, so animations can be sequenced using `async` functions:
*
* ```jsx
* const sequence = async () => {
* await animation.start({ opacity: 1 })
* return animation.start({ scale: 2 })
* }
* ```
*
* `useAnimation` can optionally accept `variants`:
*
* ```jsx
* const animation = useAnimation({
* visible: { opacity: 1 },
* hidden: { opacity: 0 }
* })
* ```
*
* That can be later referenced by `start`:
*
* ```jsx
* animation.start('visible')
* ```
*
* @params variants - List of variants. Optional
* @returns Animation controller with `start` and `stop` methods
*
* @public
*/
export declare const useAnimation: (variants?: Variants | undefined, defaultTransition?: import("../types").TransitionMap | (import("../types").TransitionOrchestration & import("../types").Tween) | (import("../types").TransitionOrchestration & import("../types").Spring) | (import("../types").TransitionOrchestration & import("../types").Decay) | (import("../types").TransitionOrchestration & import("../types").Inertia) | (import("../types").TransitionOrchestration & import("../types").Keyframes) | (import("../types").TransitionOrchestration & import("../types").Physics) | (import("../types").TransitionOrchestration & import("../types").Just) | (import("../types").TransitionOrchestration & import("../types").None) | undefined) => AnimationManager;
export declare function useAnimation(variants?: Variants, defaultTransition?: Transition): AnimationGroupControls;

@@ -537,3 +675,3 @@ /**

*
* return <Frame animate={{ x }} onClick={cycleX} />
* return <motion.div animate={{ x }} onClick={cycleX} />
* ```

@@ -561,6 +699,37 @@ *

*/
export declare const useCycle: <T>(items: T[], initialIndex?: number) => [T, (i?: any) => void];
export declare function useCycle<T>(items: T[], initialIndex?: number): [T, (i?: any) => void];
/**
* Add pan and tap gesture recognition to an element.
*
* @remarks
* `useGestures` is an unopinionated way to add pan and tap gesture recognition to an element.
*
* ## Pan
*
* A pan is defined as when a user's pointer presses an element and move beyond and initial threshold.
*
* The pan gesture can be handled with three event handlers: `onPanStart`, `onPan` and `onPanEnd`.
*
* Each event handler function receives the originating pointer event as its first argument.
*
* As a second argument, the following pointer information is provided as x/y coordinates:
*
* - `point`: The point, relative to the page
* - `delta`: The movement from the previous pan movement
* - `offset`: The movement from the point's origin,
* - `velocity`: The velocity of the point
*
* ## Tap
*
* A tap is defined as a user pressing their pointer on an element and releasing it on the same element.
*
* The tap gesture can be handled with three event handlers: `onTapStart`, `onTap`, `onTapCancel`.
*
* Each event handler function receives the originating pointer event as its first argument.
*
* As a second argument, the following pointer information is provided as x/y coordinates:
*
* - `point`: The point, relative to the page
*
* @param props

@@ -570,3 +739,3 @@ * @param ref

*/
export declare const useGestures: <P extends GestureHandlers>(props: P, ref: RefObject<Element>) => void;
export declare function useGestures<P extends GestureHandlers>(props: P, ref: RefObject<Element>): void;

@@ -605,5 +774,7 @@ /**

* @param {number | string} init - The initial state of the `MotionValue`
* @returns `MotionValue`
*
* @public
*/
export declare const useMotionValue: <T>(init: T) => MotionValue<T>;
export declare function useMotionValue<T>(init: T): MotionValue<T>;

@@ -614,3 +785,3 @@ /**

* @param ref
* @public
* @internal
*/

@@ -624,5 +795,4 @@ export declare function usePanGesture(handlers: PanHandlers, ref: RefObject<Element>): undefined;

/**
*
* @param handlers
* @public
* @internal
*/

@@ -636,5 +806,8 @@ export declare function useTapGesture(handlers: TapHandlers & ControlsProp): {

/**
* Creates a new `MotionValue` that takes the output of another `MotionValue` and transforms it with a function
*
* @param value
* @param transform
* @param value - `MotionValue`
* @param transform - Function that accepts the output of `value` and returns a new value.
* @returns `MotionValue`
*
* @public

@@ -644,13 +817,40 @@ */

/**
* Creates a new `MotionValue` that takes the output of another `MotionValue` and transforms between the `from` range to the `to` range.
*
* @remarks
* Options:
* - `clamp`: Default `true`. Clamps output to the provided array
*
* @param value - `MotionValue`
* @param from - A linear series of numbers (either all increasing or decreasing)
* @param to - A series of numbers, colors or strings. Must be the same length as `from`.
* @param options - Options
* @returns `MotionValue`
*
* @public
*/
export declare function useTransformedValue(value: MotionValue<number>, from: number[], to: any[], options?: TransformerOptions): MotionValue;
/**
* `useViewportScroll` provides `MotionValue`s that update when the viewport scrolls.
* Provides `MotionValue`s that update when the viewport scrolls.
*
* This makes it possible to transform viewport scroll into other values.
* @remarks
*
* For instance, highlighting different table of contents items to correspond with page scroll.
* This makes it possible to transform viewport scrolls into other values.
*
* Four `MotionValue`s are returned:
*
* - `scrollX`/`scrollY`: The x/y scroll offset in pixels.
* - `scrollXProgress`/`scrollYProgress`: The x/y scroll offset as a progress value between `0` and `1`.
*
* ```jsx
* const { scrollX } = useViewportScrollValues()
* ```
*
* @returns `{ scrollX, scrollY, scrollXProgress, scrollYProgress }` `MotionValue`s
*
* @public
*/
export declare const useViewportScrollValues: () => {
export declare function useViewportScrollValues(): {
scrollX: import(".").MotionValue<number>;

@@ -657,0 +857,0 @@ scrollY: import(".").MotionValue<number>;

4

package.json
{
"name": "framer-motion",
"version": "0.3.5",
"version": "0.4.0",
"main": "dist/framer-motion.cjs.js",
"module": "dist/framer-motion.es.js",
"types": "dist/index.d.ts",
"types": "dist/framer-motion.d.ts",
"author": "Framer Motion",

@@ -8,0 +8,0 @@ "license": "MIT",

dist/framer-motion.cjs.js

Sorry, the diff of this file is too big to display

dist/framer-motion.dev.js

Sorry, the diff of this file is too big to display

dist/framer-motion.es.js

Sorry, the diff of this file is too big to display

dist/framer-motion.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc