Socket
Socket
Sign inDemoInstall

framer-motion

Package Overview
Dependencies
Maintainers
26
Versions
1147
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

framer-motion - npm Package Compare versions

Comparing version 0.6.8 to 0.7.0

6

CHANGELOG.md

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

## [0.7.0] 2019-03-07
### Added
- Animation targets can be set as `keyframes`.
## [0.6.8] 2019-03-05

@@ -7,0 +13,0 @@

1002

dist/framer-motion.d.ts

@@ -44,3 +44,3 @@ /// <reference types="react" />

/**
* Values to animate to, variant label(s), or `AnimationControls`
* Values to animate to, variant label(s), or `AnimationControls`.
*

@@ -63,12 +63,11 @@ * ```jsx

/**
* Object of labelled variants.
* Object of labelled variants. Variants are visual states that can be defined externally from a `Frame` and passed in via the variants property. This allows variant labels to be used in place of values on the `animate`, `initial`, `press`, and `hover` properties.
*
* ```jsx
* function App() {
* const variants = {
* active: {
* backgroundColor: '#f00'
* const variants = {
* active: {
* backgroundColor: "#f00"
* },
* inactive: {
* backgroundColor: '#fff',
* inactive: {
* backgroundColor: "#fff",
* transition: { duration: 2 }

@@ -78,4 +77,3 @@ * }

*
* return <motion.div variants={variants} animate="active" />
* }
* <motion.div variants={variants} animate="active" />
* ```

@@ -85,14 +83,12 @@ */

/**
* Default transition, to fall back on if no `transition` is defined in `animate`.
* Default transition. If no `transition` is defined in `animate`, it will use the transition defined here.
*
* ```jsx
* function App() {
* const transition = {
* type: 'spring',
* damping: 10,
* stiffness: 100
* }
* const spring = {
* type: "spring",
* damping: 10,
* stiffness: 100
* }
*
* return <motion.div transition={transition} animate={{ scale: 1.2 }} />
* }
* <motion.div transition={spring} animate={{ scale: 1.2 }} />
* ```

@@ -115,11 +111,10 @@ */

private isAnimating;
private customStyles?;
constructor(values: MotionValuesMap, ref: RefObject<Element>, customStyles?: CustomStyleMap);
constructor(values: MotionValuesMap, ref: RefObject<Element>);
setProps(props: P): void;
setVariants(variants?: Variants): void;
setDefaultTransition(transition?: Transition): void;
setValues(target: Target, isActive?: Set<string>): void;
checkForNewValues(target: Target): void;
setValues(target: TargetWithKeyframes, isActive?: Set<string>): void;
checkForNewValues(target: TargetWithKeyframes): void;
resolveVariant(variant?: Variant): {
target?: Target;
target?: TargetWithKeyframes;
transition?: Transition;

@@ -173,3 +168,3 @@ transitionEnd?: Target;

declare interface CustomProperties {
declare interface CustomStyles {
size?: string | number;

@@ -179,13 +174,2 @@ image?: string;

declare type CustomStyle = {
transformToStyles: (v: number | string) => {
[key: string]: number | string;
};
motionEnabled?: boolean;
};
declare type CustomStyleMap = {
[key: string]: CustomStyle;
};
declare type Cycle = (i?: number) => void;

@@ -198,3 +182,3 @@

*/
export declare interface DraggableProps {
export declare interface DraggableProps extends DragHandlers {
/**

@@ -208,5 +192,3 @@ * Enable dragging for this element. Set to `false` by default.

* ```jsx
* function App() {
* return <motion.div dragEnabled="x" />
* }
* <motion.div dragEnabled="x" />
* ```

@@ -220,5 +202,3 @@ */

* ```jsx
* function App() {
* return <motion.div dragEnabled="x" dragPropagation />
* }
* <motion.div dragEnabled="x" dragPropagation />
* ```

@@ -232,10 +212,6 @@ */

* ```jsx
* function App() {
* return (
* <motion.div
* dragEnabled="x"
* dragConstraints={{ left: 0, right: 300 }}
* />
* )
* }
* <motion.div
* dragEnabled="x"
* dragConstraints={{ left: 0, right: 300 }}
* />
* ```

@@ -254,11 +230,7 @@ */

* ```jsx
* function App() {
* return (
* <motion.div
* dragEnabled
* dragConstraints={{ left: 0, right: 300 }}
* dragElastic={0.2}
* />
* )
* }
* <motion.div
* dragEnabled
* dragConstraints={{ left: 0, right: 300 }}
* dragElastic={0.2}
* />
* ```

@@ -272,14 +244,14 @@ */

* ```jsx
* function App() {
* return (
* <motion.div
* dragEnabled
* dragConstraints={{ left: 0, right: 300 }}
* dragMomentum={false}
* />
* )
* }
* <motion.div
* dragEnabled
* dragConstraints={{ left: 0, right: 300 }}
* dragMomentum={false}
* />
* ```
*/
dragMomentum?: boolean;
}
/** @public */
export declare interface DragHandlers {
/**

@@ -289,9 +261,7 @@ * Callback that fires when dragging starts.

* ```jsx
* function App() {
* const onDragStart = (event, { point, delta, offset, velocity }) => {
* console.log(`Dragging started at ${point.x} ${point.y}`)
* }
* function onDragStart(event, { point, delta, offset, velocity }) {
* console.log(`Dragging started at ${point.x} ${point.y}`)
* }
*
* return <motion.div dragEnabled onDragStart={onDragStart} />
* }
* <motion.div dragEnabled onDragStart={onDragStart} />
* ```

@@ -304,9 +274,7 @@ */

* ```jsx
* function App() {
* const onDragEnd = (event, { point, delta, offset, velocity }) => {
* console.log(`Dragging ended at ${point.x} ${point.y}`)
* }
* function onDragEnd(event, { point, delta, offset, velocity }) {
* console.log(`Dragging ended at ${point.x} ${point.y}`)
* }
*
* return <motion.div dragEnabled onDragEnd={onDragEnd} />
* }
* <motion.div dragEnabled onDragEnd={onDragEnd} />
* ```

@@ -319,9 +287,7 @@ */

* ```jsx
* function App() {
* const onDrag = (event, { point, delta, offset, velocity }) => {
* console.log(`Drag velocity is ${velocity.x} ${velocity.y}`)
* }
* function onDrag (event, { point, delta, offset, velocity }) {
* console.log(`Drag velocity is ${velocity.x} ${velocity.y}`)
* }
*
* return <motion.div dragEnabled onDrag={onDrag} />
* }
* <motion.div dragEnabled onDrag={onDrag} />
* ```

@@ -334,9 +300,7 @@ */

* ```jsx
* function App() {
* const onDirectionLock = (axis) => {
* console.log(`Dragging locked to the ${axis} axis`)
* }
* function onDirectionLock(axis) {
* console.log(`Dragging locked to the ${axis} axis`)
* }
*
* return <motion.div dragEnabled onDirectionLock={onDirectionLock} />
* }
* <motion.div dragEnabled onDirectionLock={onDirectionLock} />
* ```

@@ -370,5 +334,3 @@ */

* ```jsx
* function App() {
* return <motion.div hover={{ scale: 1.2 }} />
* }
* <motion.div hover={{ scale: 1.2 }} />
* ```

@@ -381,9 +343,7 @@ */

* ```jsx
* function App() {
* const onHoverStart = (event) => {
* console.log('Pointer is hovering over this Frame')
* }
* function onHoverStart(event) {
* console.log("Pointer is hovering over this Frame")
* }
*
* return <motion.div onHoverStart={onHoverStart} />
* }
* <motion.div onHoverStart={onHoverStart} />
* ```

@@ -396,9 +356,7 @@ */

* ```jsx
* function App() {
* const onHoverEnd = (event) => {
* console.log('Pointer stopped hovering over this Frame')
* }
* function onHoverEnd(event) {
* console.log("Pointer stopped hovering over this Frame")
* }
*
* return <motion.div onHoverEnd={onHoverEnd} />
* }
* <motion.div onHoverEnd={onHoverEnd} />
* ```

@@ -440,8 +398,16 @@ */

/**
* Set `type` to animate using the inertia animation. Set to `'tween'` by
* default.
* Set `type` to animate using the inertia animation. Set to `"tween"` by
* default. This can be used for natural deceleration, like momentum scrolling.
*
* @remarks
* ```jsx
* const transition = {
* type: "inertia",
* velocity: 50
* }
*
* This can be used for natural deceleration, for instance with momentum scrolling.
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*

@@ -462,2 +428,17 @@ * @public

*
* ```jsx
* const transition = {
* type: "inertia",
* velocity: 500,
* min: 0,
* max: 90,
* bounceStiffness: 100
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -470,2 +451,18 @@ */

* default.
*
* ```jsx
* const transition = {
* type: "inertia",
* velocity: 500,
* min: 0,
* max: 90,
* bounceDamping: 8
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -475,4 +472,17 @@ */

/**
* Higher power = further target. Set to `0.8` by default.
* A higher power value equals a further target. Set to `0.8` by default.
* @public
*
* ```jsx
* const transition = {
* type: "inertia",
* velocity: 500,
* power: 0.5
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*/

@@ -484,2 +494,15 @@ power?: number;

*
* ```jsx
* const transition = {
* type: "inertia",
* velocity: 500,
* timeConstant: 250
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -489,5 +512,19 @@ */

/**
* End animation if distance to to is below this value and speed is below
* `restSpeed`. When animation ends, spring gets “snapped” to to. Set to
* `0.01` by default.
* End the animation if the distance to the animation target is below this value, and the absolute speed is below `restSpeed`.
* When the animation ends, the value gets snapped to the animation target. Set to `0.01` by default.
* Generally the default values provide smooth animation endings, only in rare cases should you need to customize these.
*
* ```jsx
* const transition = {
* type: "inertia",
* velocity: 500,
* restDelta: 10,
* restSpeed: 10
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
* @public

@@ -499,7 +536,35 @@ */

* @public
*
* ```jsx
* const transition = {
* type: "inertia",
* velocity: 300,
* min: 0,
* max: 90
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*/
min?: number;
/**
* Maximum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as more than this value).
* Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).
* @public
*
* ```jsx
* const transition = {
* type: "inertia",
* velocity: 300,
* min: 0,
* max: 90
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*/

@@ -510,7 +575,33 @@ max?: number;

* @public
*
* ```jsx
* const transition = {
* type: "inertia",
* velocity: 300,
* from: 90
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*/
from?: number | string;
/**
* The initial velocity of the animation. By default this is the current velocity of the `MotionValue`.
* The initial velocity of the animation.
* By default this is the current velocity of the component.
* @public
*
* ```jsx
* const transition = {
* type: "inertia",
* velocity: 200
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*/

@@ -529,2 +620,3 @@ velocity?: number;

type: "just";
to?: number | string;
from?: number | string;

@@ -544,13 +636,9 @@ delay?: number;

*
* @public
* @internal
*/
export declare interface Keyframes {
/**
* Set `type` to `'keyframes'` to animate using the keyframes animation.
* Set to `'tween'` by default.
* Set `type` to `"keyframes"` to animate using the keyframes animation.
* Set to `"tween"` by default. This can be used to animate between a series of values.
*
* @remarks
*
* This can be used to animate between a series of values.
*
* @public

@@ -562,18 +650,9 @@ */

*
* ```jsx
* const transition = {
* type: 'keyframes',
* backgroundColor: {
* values: ['#0f0', '#f00', '#00f']
* }
* }
* ```
*
* @public
* @internal
*/
values: number[] | string[];
values: KeyframesTarget;
/**
* An array of numbers between 0 and 1, where `1` represents the `total` duration.
*
* Each value represents at which point during the animation each item in `values` should be hit, so the array should be the same length as `values`.
* Each value represents at which point during the animation each item in the animation target should be hit, so the array should be the same length as `values`.
*

@@ -584,3 +663,3 @@ * Defaults to an array of evenly-spread durations.

*/
times: number[];
times?: number[];
/**

@@ -593,5 +672,4 @@ * An array of easing functions for each generated tween, or a single easing function applied to all tweens.

* const transition = {
* type: 'keyframes',
* backgroundColor: {
* values: ['#0f0', '#f00', '#00f'],
* type: 'keyframes',
* easings: ['circIn', 'circOut']

@@ -612,2 +690,14 @@ * }

*
* ```jsx
* const transition = {
* type: "keyframes",
* duration: 2
* }
*
* <Frame
* animate={{ opacity: 0 }}
* transition={transition}
* />
* ```
*
* @public

@@ -626,5 +716,16 @@ */

* The number of times to flip the animation by swapping the `to` and `from` values.
*
* Set to `Infinity` for perpetual flipping.
*
* ```jsx
* const transition = {
* flip: Infinity,
* duration: 2
* }
*
* <Frame
* animate={{ opacity: 0 }}
* transition={transition}
* />
* ```
*
* @public

@@ -635,5 +736,16 @@ */

* The number of times to reverse the animation.
*
* Set to `Infinity` for perpetual reversing.
*
* ```jsx
* const transition = {
* yoyo: Infinity,
* duration: 2
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
*
* ```
* @public

@@ -660,2 +772,8 @@ */

declare type KeyframesTarget = [null, ...number[]] | number[] | [null, ...string[]] | string[];
declare type MakeKeyframes<T> = {
[K in keyof T]: T[K] | T[K][] | [null, ...T[K][]];
};
declare type MakeMotion<T> = {

@@ -690,11 +808,10 @@ [K in keyof T]: T[K] | MotionValue<T[K]>;

/**
* Set to `false` to prevent inheriting variant changes from a parent
* `motion` component.
* @internal
* Set to `false` to prevent inheriting variant changes from its parent.
*/
inherit?: boolean;
/**
* Set to `true` to block rendering motion values (`animate`, gestures etc)
* on the component.
*
* This can be used to temporarily disable animations for performance reasons.
* @internal
* Set to `true` to block rendering motion values (`animate`, gestures, etcetera)
* on the component. This can be used to temporarily disable animations for performance reasons.
*/

@@ -712,9 +829,7 @@ static?: boolean;

* ```jsx
* function App() {
* const onUpdate = ({ x, opacity }) => {
* console.log(`Latest values: ${x} ${opacity}`)
* }
* function onUpdate({ x, opacity }) {
* console.log(`Latest values: ${x} ${opacity}`)
* }
*
* return <motion.div animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} />
* }
* <motion.div animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} />
* ```

@@ -729,9 +844,7 @@ */

* ```jsx
* function App() {
* const onComplete = () => {
* console.log(`Animation has completed`)
* }
* function onComplete() {
* console.log(`Animation has completed`)
* }
*
* return <motion.div animate={{ x: 100 }} onAnimationComplete={onComplete} />
* }
* <motion.div animate={{ x: 100 }} onAnimationComplete={onComplete} />
* ```

@@ -769,4 +882,2 @@ */

declare type MotionCustom = MakeMotion<CustomProperties>;
/**

@@ -790,3 +901,2 @@ * @internal

transformPagePoint?: (point: Point) => Point;
customStyles?: CustomStyleMap;
}

@@ -820,3 +930,3 @@

* ```jsx
* function App() {
* export function MyComponent() {
* const x = useMotionValue(0)

@@ -851,3 +961,3 @@ *

*/
export declare type MotionStyle = MotionCSS & MotionTransform & MotionCustom;
export declare type MotionStyle = MotionCSS & MotionTransform & CustomStyles;

@@ -897,4 +1007,3 @@ declare type MotionTransform = MakeMotion<TransformProperties>;

private isStatic;
private customStyles?;
constructor(isStatic: boolean, customStyles?: CustomStyleMap);
constructor(isStatic: boolean);
has(key: string): boolean;

@@ -969,4 +1078,4 @@ set(key: string, value: MotionValue): void;

* When using variants, the transition can be scheduled in relation to its
* children with either `'beforeChildren'` to finish this transition before
* starting children transitions, `'afterChildren'` to finish children
* children with either `"beforeChildren"` to finish this transition before
* starting children transitions, `"afterChildren"` to finish children
* transitions before starting this transition.

@@ -978,5 +1087,3 @@ *

* opacity: 0,
* // This will ensure all children animations
* // finish before this animation starts
* transition: { when: 'afterChildren' }
* transition: { when: "afterChildren" }
* }

@@ -986,3 +1093,6 @@ * }

* const item = {
* hidden: { opacity: 0 }
* hidden: {
* opacity: 0,
* transition: { duration: 2 }
* }
* }

@@ -995,5 +1105,4 @@ *

* >
* <Frame variants={item} />
* <Frame variants={item} />
* <Frame variants={item} />
* <Frame variants={item} size={50} />
* <Frame variants={item} size={50} />
* </Frame>

@@ -1008,4 +1117,32 @@ * )

* When using variants, children animations will start after this duration
* (in seconds).
* (in seconds). You can add the `transition` property to both the `Frame` and the `variant` directly. Adding it to the `variant` generally offers more flexibility, as it allows you to customize the delay per visual state.
*
* ```jsx
* const container = {
* hidden: { opacity: 0 },
* show: {
* opacity: 1,
* transition: {
* delayChildren: 0.5
* }
* }
* }
*
* const item = {
* hidden: { opacity: 0 },
* show: { opacity: 1 }
* }
*
* return (
* <Frame
* variants={container}
* initial="hidden"
* animate="show"
* >
* <Frame variants={item} size={50} />
* <Frame variants={item} size={50} />
* </Frame>
* )
* ```
*
* @public

@@ -1015,3 +1152,3 @@ */

/**
* When using variants, children animations can be staggered by this
* When using variants, animations of child Frames can be staggered by this
* duration (in seconds).

@@ -1025,2 +1162,29 @@ *

*
* ```jsx
* const container = {
* hidden: { opacity: 0 },
* show: {
* opacity: 1,
* transition: {
* staggerChildren: 0.5
* }
* }
* }
*
* const item = {
* hidden: { opacity: 0 },
* show: { opacity: 1 }
* }
*
* return (
* <Frame
* variants={container}
* initial="hidden"
* animate="show"
* >
* <Frame variants={item} size={50} />
* <Frame variants={item} size={50} />
* </Frame>
* )
* ```
* @public

@@ -1031,8 +1195,33 @@ */

* The direction in which to stagger children.
* A value of `1` staggers from the first to the last while `-1`
* staggers from the last to the first.
*
* @remarks
* ```jsx
* const container = {
* hidden: { opacity: 0 },
* show: {
* opacity: 1,
* transition: {
* delayChildren: 0.5,
* staggerDirection: -1
* }
* }
* }
*
* A value of `1` staggers from the first child to the last while `-1`
* staggers from the last child to the first.
* const item = {
* hidden: { opacity: 0 },
* show: { opacity: 1 }
* }
*
* return (
* <Frame
* variants={container}
* initial="hidden"
* animate="show"
* >
* <Frame variants={item} size={50} />
* <Frame variants={item} size={50} />
* </Frame>
* )
* ```
* @public

@@ -1051,10 +1240,16 @@ */

* ```jsx
* function App() {
* const onPan = (event, { point, delta, offset, velocity }) => {
* console.log(`Panned to ${point.x} ${point.y}`)
* }
* function onPan(event, { point, delta, offset, velocity }) {
* console.log(`Panned to ${point.x} ${point.y}`)
* }
*
* return <motion.div onPan={onPan} />
* }
* <motion.div onPan={onPan} />
* ```
*
* @param event - The originating pointer event.
* @param info - An {@link PanInfo} object containing `x`/`y` values for:
*
* - `point`: Relative to the document.
* - `delta`: Distance moved since the last event.
* - `offset`: Offset from the original pan event.
* - `velocity`: Current velocity of the pointer.
*/

@@ -1066,10 +1261,16 @@ onPan?(event: MouseEvent | TouchEvent, info: PanInfo): void;

* ```jsx
* function App() {
* const onPanStart = (event, { point, delta, offset, velocity }) => {
* console.log(`Started panning at ${point.x} ${point.y}`)
* }
* function onPanStart(event, { point, delta, offset, velocity }) {
* console.log(`Started panning at ${point.x} ${point.y}`)
* }
*
* return <motion.div onPanStart={onPan} />
* }
* <motion.div onPanStart={onPanStart} />
* ```
*
* @param event - The originating pointer event.
* @param info - An {@link PanInfo} object containing `x`/`y` values for:
*
* - `point`: Relative to the document.
* - `delta`: Distance moved since the last event.
* - `offset`: Offset from the original pan event.
* - `velocity`: Current velocity of the pointer.
*/

@@ -1081,10 +1282,16 @@ onPanStart?(event: MouseEvent | TouchEvent, info: PanInfo): void;

* ```jsx
* function App() {
* const onPanEnd = (event, { point, delta, offset, velocity }) => {
* console.log(`Stopped panning at ${point.x} ${point.y}`)
* }
* function onPanEnd(event, { point, delta, offset, velocity }) {
* console.log(`Stopped panning at ${point.x} ${point.y}`)
* }
*
* return <motion.div onPanEnd={onPan} />
* }
* <motion.div onPanEnd={onPanEnd} />
* ```
*
* @param event - The originating pointer event.
* @param info - An {@link PanInfo} object containing `x`/`y` values for:
*
* - `point`: Relative to the document.
* - `delta`: Distance moved since the last event.
* - `offset`: Offset from the original pan event.
* - `velocity`: Current velocity of the pointer.
*/

@@ -1102,3 +1309,3 @@ onPanEnd?(event: MouseEvent | TouchEvent, info: PanInfo): void;

/**
* An animation that simulates velocity, acceleration, and friction.
* An animation type that simulates velocity, acceleration, and friction.
*

@@ -1110,2 +1317,13 @@ * @public

* Set `type` to `'physics'` to use an animation that will simulate velocity, friction and acceleration.
*
* ```jsx
* const transition = {
* type: "physics",
* velocity: 50,
* friction: 0.05,
* }
*
* <Frame animate={{ rotate: 180 }} transition={transition} />
* ```
*
* @public

@@ -1118,8 +1336,8 @@ */

* ```jsx
* // `velocity` will be `102` after one second:
* const transition = {
* type: 'physics',
* velocity: 100,
* acceleration: 2
* type: "physics",
* velocity: 50,
* }
*
* <Frame animate={{ rotate: 180 }} transition={transition} />
* ```

@@ -1131,5 +1349,14 @@ *

/**
* Amount of friction to apply per frame, from `0` to `1`.
* Amount of friction to apply per frame, from `0` to `1`, where `0` is no friction, and `1` is a total stop. The default value is `0`.
*
* `0` is no friction, `1` is a total stop.
* ```jsx
* const transition = {
* type: "physics",
* velocity: 100,
* friction: 0.1
* }
*
* <Frame animate={{ rotate: 180 }} transition={transition} />
* ```
*
* @public

@@ -1142,7 +1369,31 @@ */

* @public
*
* ```jsx
* const transition = {
* type: "physics",
* velocity: 50,
* friction: 0.05,
* restSpeed: 20
* }
*
* <Frame animate={{ rotate: 180 }} transition={transition} />
* ```
*
*/
restSpeed?: number;
/**
* The value to animate from. By default, this is the current state of the `MotionValue`.
* The value to animate from.
* By default, this is the initial state of the animating value.
*
* ```jsx
* const transition = {
* type: "physics",
* velocity: 50,
* friction: 0.05,
* from: 90
* }
*
* <Frame animate={{ rotate: 180 }} transition={transition} />
* ```
*
* @public

@@ -1152,3 +1403,15 @@ */

/**
* The initial velocity of the spring. By default this is the current velocity of the `MotionValue`.
* The initial velocity of the spring.
* By default, this is the current state of the animating value
*
* ```jsx
* const transition = {
* type: "physics",
* velocity: 50,
* friction: 0.05,
* }
*
* <Frame animate={{ rotate: 180 }} transition={transition} />
* ```
*
* @public

@@ -1203,3 +1466,2 @@ */

* An animation that simulates spring physics for realistic motion.
*
* This is the default animation for physical values like `x`, `y`, `scale` and `rotate`.

@@ -1214,2 +1476,13 @@ *

*
* ```jsx
* const transition = {
* type: "spring"
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1221,2 +1494,15 @@ */

* Set to `100` by default.
*
* ```jsx
* const transition = {
* type: "spring",
* stiffness: 50
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1228,2 +1514,15 @@ */

* indefinitely. Set to `10` by default.
*
* ```jsx
* const transition = {
* type: "spring",
* damping: 300
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1235,2 +1534,15 @@ */

* movement. Set to `1` by default.
*
* ```jsx
* const transition = {
* type: "spring",
* mass: 0.5
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1242,2 +1554,15 @@ */

* value and delta is smaller than `restDelta`. Set to `0.01` by default.
*
* ```jsx
* const transition = {
* type: "spring",
* restSpeed: 0.5
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1247,5 +1572,18 @@ */

/**
* End animation if distance to to is below this value and speed is below
* `restSpeed`. When animation ends, spring gets “snapped” to to. Set to
* End animation if distance is below this value and speed is below
* `restSpeed`. When animation ends, spring gets “snapped” to. Set to
* `0.01` by default.
*
* ```jsx
* const transition = {
* type: "spring",
* restDelta: 0.5
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1255,4 +1593,16 @@ */

/**
* The value to animate from. By default, this is the current state of the `MotionValue`.
* The value to animate from.
* By default, this is the initial state of the animating value.
* ```jsx
* const transition = {
* type: "spring",
* from: 90
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1266,3 +1616,16 @@ */

/**
* The initial velocity of the spring. By default this is the current velocity of the `MotionValue`.
* The initial velocity of the spring. By default this is the current velocity of the component.
*
* ```jsx
* const transition = {
* type: "spring",
* velocity: 2
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1272,3 +1635,3 @@ */

/**
* @public
* @internal
*/

@@ -1304,10 +1667,13 @@ delay?: number;

* ```jsx
* function App() {
* const onTap = (event, { point }) => {
* console.log(`Tapped at ${point.x} ${point.y}`)
* }
* function onTap(event, { point }) {
* console.log(`Tapped at ${point.x} ${point.y}`)
* }
*
* return <motion.div onTap={onPan} />
* }
* <motion.div onTap={onTap} />
* ```
*
* @param event - The originating pointer event.
* @param info - An {@link TapInfo} object containing `x`/`y` values for:
*
* - `point` relative to the document.
*/

@@ -1319,10 +1685,13 @@ onTap?(event: MouseEvent | TouchEvent, info: TapInfo): void;

* ```jsx
* function App() {
* const onTapStart = (event, { point }) => {
* console.log(`Tap started at ${point.x} ${point.y}`)
* }
* function onTapStart(event, { point }) {
* console.log(`Tap started at ${point.x} ${point.y}`)
* }
*
* return <motion.div onTapStart={onPan} />
* }
* <motion.div onTapStart={onTapStart} />
* ```
*
* @param event - The originating pointer event.
* @param info - An {@link TapInfo} object containing `x`/`y` values for:
*
* - `point` relative to the document.
*/

@@ -1334,10 +1703,13 @@ onTapStart?(event: MouseEvent | TouchEvent, info: TapInfo): void;

* ```jsx
* function App() {
* const onTapCancel = (event, { point }) => {
* console.log(`Tap cancelled at ${point.x} ${point.y}`)
* }
* function onTapCancel(event, { point }) {
* console.log(`Tap cancelled at ${point.x} ${point.y}`)
* }
*
* return <motion.div onTapCancel={onPan} />
* }
* return <motion.div onTapCancel={onTapCancel} />
* ```
*
* @param event - The originating pointer event.
* @param info - An {@link TapInfo} object containing `x`/`y` values for:
*
* - `point` relative to the document.
*/

@@ -1349,14 +1721,3 @@ onTapCancel?(event: MouseEvent | TouchEvent, info: TapInfo): void;

* ```jsx
* function App() {
* return <motion.div press={{ scale: 0.8 }} />
* }
*
* // With variants
* function App() {
* const variants = {
* pressed: { scale: 0.8 }
* }
*
* return <motion.div variants={variants} press="pressed" />
* }
* <motion.div press={{ scale: 0.8 }} />
* ```

@@ -1371,3 +1732,3 @@ */

declare type Target = CSSPropertiesWithoutTransition & TransformProperties & CustomProperties & {
declare type Target = CSSPropertiesWithoutTransition & TransformProperties & CustomStyles & {
pathLength?: number;

@@ -1377,3 +1738,3 @@ pathSpacing?: number;

declare type TargetAndTransition = Target & {
declare type TargetAndTransition = TargetWithKeyframes & {
transition?: Transition;

@@ -1385,2 +1746,4 @@ transitionEnd?: Target;

declare type TargetWithKeyframes = MakeKeyframes<Target>;
declare type Transformer<T> = (v: T) => T;

@@ -1425,4 +1788,3 @@

/**
* An animation that animates between two values over a specific duration of time.
*
* An animation that animates between two or more values over a specific duration of time.
* This is the default animation for non-physical values like `color` and `opacity`.

@@ -1434,7 +1796,12 @@ *

/**
* Set `type` to `'tween'` to use a duration-based tween animation.
* Set `type` to `"tween"` to use a duration-based tween animation.
* If any non-orchestration `transition` values are set without a `type` property,
* this is used as the default animation.
*
* @remarks
* If any non-orchestration `transition` values are set without a `type` prop,
* "tween" is used as the default animation.
* ```jsx
* <Frame
* animate={{ opacity: 0 }}
* transition={{ duration: 2, type: "tween" }}
* />
* ```
*

@@ -1445,4 +1812,10 @@ * @public

/**
* The duration of the tween animation. Set to `0.3` by default.
* The duration of the tween animation. Set to `0.3` by default, 0r `0.8` if animating a series of keyframes.
*
* ```jsx
* <Frame
* animate={{ opacity: 0 }}
* transition={{ duration: 2 }}
* />
* ```
* @public

@@ -1452,8 +1825,10 @@ */

/**
* The easing function to use. Set either as:
* The easing function to use. Set as one of the below.
*
* - The name of an inbuilt easing function,
* - An array of four numbers to define a cubic bezier curve,
* - An easing function, that accepts and returns a value `0-1`.
* - The name of an inbuilt easing function
*
* - An array of four numbers to define a cubic bezier curve
*
* - An easing function, that accepts and returns a value `0-1`.
*
* ```jsx

@@ -1463,2 +1838,7 @@ * const transition = {

* }
*
* <Frame
* animate={{ opacity: 0 }}
* transition={transition}
* />
* ```

@@ -1477,6 +1857,60 @@ *

/**
* When animating keyframes, `times` can be used to determine where in the animation each keyframe is reached.
*
* Each value in `times` is a value between `0` adn `1`, `1` representing `duration`
*
* There must be the same number of `times` as there are keyframes.
*
* Defaults to an array of evenly-spread durations.
*
* ```jsx
* const transition = {
* times: [0, 0.1, 0.9, 1]
* }
*
* <Frame
* animate={{ scale: [0, 1, 0.5, 1] }}
* transition={transition}
* />
* ```
*
* @public
*/
times?: number[];
/**
* When animating keyframes, `easings` can be used to define easing functions between each keyframe
*
* This array should be one item fewer than the number of keyframes, as these easings apply to the transitions *between* the keyframes.
*
* ```jsx
* const transition = {
* easings: ['easeIn', 'easeOut']
* }
*
* <Frame
* animate={{ backgroundColor: ['#0f0', '#00f', '#f00'] }}
* transition={transition}
* />
* ```
*
* @public
*/
easings?: Easing[];
/**
* The number of times to loop the animation.
*
* Set to `Infinity` for perpetual looping.
*
* ```jsx
* const transition = {
* loop: Infinity,
* ease: "linear",
* duration: 2
* }
*
* <Frame
* animate={{ rotate: 360 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1486,6 +1920,16 @@ */

/**
* The number of times to flip the animation by swapping the `to` and `from` values.
* The number of times to flip the animation by swapping the `to` and `from` values. Set to `Infinity` for perpetual flipping.
*
* Set to `Infinity` for perpetual flipping.
* ```jsx
* const transition = {
* flip: Infinity,
* duration: 2
* }
*
* <Frame
* animate={{ opacity: 0 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1496,5 +1940,16 @@ */

* The number of times to reverse the animation.
*
* Set to `Infinity` for perpetual reversing.
*
* ```jsx
* const transition = {
* yoyo: Infinity,
* duration: 2
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1504,4 +1959,17 @@ */

/**
* The value to animate from. By default, this is the current state of the `MotionValue`.
* The value to animate from.
* By default, this is the initial state of the animating value.
*
* ```jsx
* const transition = {
* from: 90,
* duration: 2
* }
*
* <Frame
* animate={{ rotate: 180 }}
* transition={transition}
* />
* ```
*
* @public

@@ -1550,3 +2018,3 @@ */

* ```jsx
* function App() {
* export function MyComponent() {
* const [x, cycleX] = useCycle([0, 100, 200])

@@ -1588,3 +2056,3 @@ *

* ```jsx
* function App() {
* export function MyComponent() {
* const scale = useMotionValue(1)

@@ -1630,3 +2098,3 @@ *

*
* function App() {
* export function MyComponent() {
* const x = useMotionValue(0)

@@ -1664,3 +2132,3 @@ * const y = useTransformedValue(x, double)

* ```jsx
* function App() {
* export function MyComponent() {
* const x = useMotionValue(0)

@@ -1695,3 +2163,3 @@ * const xRange = [-200, -100, 100, 200]

* ```jsx
* function App() {
* export function MyComponent() {
* const { scrollYProgress } = useViewportScrollValues()

@@ -1698,0 +2166,0 @@ * const scaleX = useTransformedValue(scrollYProgress, [0, 1], [0, 1])

2

package.json
{
"name": "framer-motion",
"version": "0.6.8",
"version": "0.7.0",
"main": "dist/framer-motion.cjs.js",

@@ -5,0 +5,0 @@ "module": "dist/framer-motion.es.js",

dist/framer-motion.api.json

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

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
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc