Socket
Socket
Sign inDemoInstall

framer-motion

Package Overview
Dependencies
Maintainers
23
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.4.5 to 0.5.0

11

CHANGELOG.md

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

## [0.5.0] 2019-02-19
### Added
- `onDrag` event listener
- Exporting `MotionStyles` type.
### Changed
- `tap` -> `press`
## [0.4.5] 2019-02-15

@@ -7,0 +18,0 @@

275

dist/framer-motion.d.ts

@@ -16,48 +16,3 @@ import { Action } from 'popmotion';

declare class AnimationControls<P = {}> {
private props;
private values;
private ref;
private variants;
private baseTarget;
private overrides;
private activeOverrides;
private resolvedOverrides;
private defaultTransition?;
private children?;
private isAnimating;
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;
resolveVariant(variant?: Variant): {
target?: Target;
transition?: Transition;
transitionEnd?: Target;
};
getHighestPriority(): number;
setOverride(definition: AnimationDefinition, overrideIndex: number): void;
startOverride(overrideIndex: number): Promise<any> | undefined;
clearOverride(overrideIndex: number): void;
apply(definition: VariantLabels | TargetAndTransition): void;
private applyVariantLabels;
start(definition: AnimationDefinition, opts?: AnimationOptions): Promise<any>;
isHighestPriority(priority: number): boolean;
private animate;
private animateVariantLabels;
private animateVariant;
private animateChildren;
private checkOverrideIsAnimating;
private resetIsAnimating;
stop(): void;
addChild(controls: AnimationControls): void;
removeChild(controls: AnimationControls): void;
resetChildren(): void;
}
declare type AnimationDefinition = VariantLabels | TargetAndTransition | TargetResolver;
declare class AnimationGroupControls {
declare class AnimationControls {
private hasMounted;

@@ -70,3 +25,3 @@ private defaultTransition;

setDefaultTransition(transition: Transition): void;
subscribe(controls: AnimationControls): () => boolean;
subscribe(controls: ComponentAnimationControls): () => boolean;
start(definition: Variant | string): Promise<any>;

@@ -78,2 +33,4 @@ stop(): void;

declare type AnimationDefinition = VariantLabels | TargetAndTransition | TargetResolver;
declare type AnimationOptions = {

@@ -89,3 +46,3 @@ delay?: number;

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

@@ -102,7 +59,7 @@ * ```jsx

*
* // `AnimationGroupControls`
* // `AnimationControls`
* <motion.div animate={animation} />
* ```
*/
animate?: AnimationGroupControls | TargetAndTransition | VariantLabels;
animate?: AnimationControls | TargetAndTransition | VariantLabels;
/**

@@ -142,2 +99,45 @@ * Object of labelled variants.

declare class ComponentAnimationControls<P = {}> {
private props;
private values;
private ref;
private variants;
private baseTarget;
private overrides;
private activeOverrides;
private resolvedOverrides;
private defaultTransition?;
private children?;
private isAnimating;
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;
resolveVariant(variant?: Variant): {
target?: Target;
transition?: Transition;
transitionEnd?: Target;
};
getHighestPriority(): number;
setOverride(definition: AnimationDefinition, overrideIndex: number): void;
startOverride(overrideIndex: number): Promise<any> | undefined;
clearOverride(overrideIndex: number): void;
apply(definition: VariantLabels | TargetAndTransition): void;
private applyVariantLabels;
start(definition: AnimationDefinition, opts?: AnimationOptions): Promise<any>;
isHighestPriority(priority: number): boolean;
private animate;
private animateVariantLabels;
private animateVariant;
private animateChildren;
private checkOverrideIsAnimating;
private resetIsAnimating;
stop(): void;
addChild(controls: ComponentAnimationControls): void;
removeChild(controls: ComponentAnimationControls): void;
resetChildren(): void;
}
declare type Config<T> = {

@@ -149,3 +149,3 @@ transformer?: Transformer<T>;

declare interface ControlsProp {
controls?: AnimationControls;
controls?: ComponentAnimationControls;
}

@@ -173,4 +173,5 @@

/**
* Enable dragging for this element
* Enable dragging for this element. Set to `false` by default.
*
* @remarks
* Set "x" or "y" to only drag in a specific direction

@@ -182,24 +183,22 @@ * Set "lockDirection" to lock dragging into the initial direction

* ```
*
* @default false
*/
dragEnabled?: boolean | "x" | "y" | "lockDirection";
/**
* Allows drag gesture propagation to child components.
* Allows drag gesture propagation to child components. Set to `false` by
* default.
*
* @remarks
* ```jsx
* <motion.div dragEnabled="x" dragPropagation />
* ```
*
* @default false
*/
dragPropagation?: boolean;
/**
* An object of optional `top`, `left`, `right`, `bottom` pixel values, beyond which dragging is constrained
* An object of optional `top`, `left`, `right`, `bottom` pixel values,
* beyond which dragging is constrained
*
* @remarks
* ```jsx
* <motion.div dragEnabled="x" dragConstraints={{ left: 0, right: 300 }} />
* ```
*
* @default undefined
*/

@@ -213,4 +212,6 @@ dragConstraints?: false | {

/**
* The degree of movement allowed outside constraints. 0 = no movement, 1 = full movement.
* The degree of movement allowed outside constraints. 0 = no movement, 1 =
* full movement. Set to `0.5` by default.
*
* @remarks
* ```jsx

@@ -223,9 +224,9 @@ * <motion.div

* ```
*
* @default 0.5
*/
dragElastic?: boolean | number;
/**
* Apply momentum from the pan gesture to the component when dragging finishes.
* Apply momentum from the pan gesture to the component when dragging
* finishes. Set to `true` by default.
*
* @remarks
* ```jsx

@@ -238,4 +239,2 @@ * <motion.div

* ```
*
* @default true
*/

@@ -252,2 +251,6 @@ dragMomentum?: boolean;

/**
* Callback that fires when the component is dragged
*/
onDrag?(e: MouseEvent | TouchEvent, info: PanInfo): void;
/**
* Callback that fires a drag direction is determined

@@ -307,8 +310,10 @@ */

/**
* Set `type` to animate using the inertia animation.
* Set `type` to animate using the inertia animation. Set to `'tween'` by
* default.
*
* @remarks
*
* This can be used for natural deceleration, for instance with momentum scrolling.
*
* @public
* @default 'tween'
*/

@@ -323,31 +328,33 @@ type: "inertia";

/**
* If `min` or `max` is set, this affects the stiffness of the bounce spring. Higher values will create more sudden movement.
* If `min` or `max` is set, this affects the stiffness of the bounce
* spring. Higher values will create more sudden movement. Set to `500` by
* default.
*
* @public
* @default 500
*/
bounceStiffness?: number;
/**
* If `min` or `max` is set, this affects the damping of the bounce spring. If set to `0`, spring will oscillate indefinitely.
* If `min` or `max` is set, this affects the damping of the bounce spring.
* If set to `0`, spring will oscillate indefinitely. Set to `10` by
* default.
* @public
* @default 10
*/
bounceDamping?: number;
/**
* Higher power = further target.
* Higher power = further target. Set to `0.8` by default.
* @public
* @default 0.8
*/
power?: number;
/**
* Adjusting the time constant will change the duration of the deceleration, thereby affecting its feel.
* Adjusting the time constant will change the duration of the
* deceleration, thereby affecting its feel. Set to `700` by default.
*
* @public
* @default 700
*/
timeConstant?: number;
/**
* End animation if distance to to is below this value and speed is below `restSpeed`. When animation ends, spring gets “snapped” to to.
* 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.
* @public
* @default 0.01
*/

@@ -397,7 +404,9 @@ restDelta?: number;

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

@@ -453,6 +462,5 @@ type: "keyframes";

/**
* The total duration of the animation.
* The total duration of the animation. Set to `0.3` by default.
*
* @public
* @default 0.3
*/

@@ -511,6 +519,11 @@ duration?: number;

/**
* HTML & SVG components, optimised for use with gestures and animation.
* HTML & SVG components, optimised for use with gestures and animation. These can be used as
* drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
*
* ```jsx
* <motion.div animate={{ x: 100 }} />
*
* <motion.p animate={{ height: 200 }} />
*
* <svg><motion.circle r={10} animate={{ r: 20 }} /></svg>
* ```

@@ -527,9 +540,10 @@ *

/**
* Set to `false` to prevent inheriting variant changes from a parent `motion` component.
* @default true
* Set to `false` to prevent inheriting variant changes from a parent
* `motion` component.
*/
inherit?: boolean;
/**
* Set to `false` to block rendering the latest motion values on the component - can be used to temporarily disable animations for performance reasons.
* @default true
* Set to `false` to block rendering the latest motion values on the
* component - can be used to temporarily disable animations for
* performance reasons.
*/

@@ -551,3 +565,3 @@ render?: boolean;

*
* return <motion.li animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} />
* return <motion.div animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} />
* ```

@@ -629,3 +643,6 @@ */

declare type MotionStyle = MakeMotion<Omit_2<CSSProperties, "rotate" | "scale" | "perspective">>;
/**
* @public
*/
export declare type MotionStyle = MakeMotion<Omit_2<CSSProperties, "rotate" | "scale" | "perspective">>;

@@ -744,3 +761,4 @@ declare type MotionStyleProp = string | number | MotionValue;

*
* ```jsx
* @remarks
* ```
* const transition = {

@@ -755,6 +773,10 @@ * delay: 0.2

/**
* When using variants, the transition can be scheduled in relation to its children with either:
* Describes the relationship between the transition and its children. Set
* to `false` by default.
*
* - `'beforeChildren'` to finish this transition before starting children transitions,
* - `'afterChildren'` to finish children transitions before starting this transition.
* @remarks
* 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
* transitions before starting this transition.
*

@@ -768,7 +790,7 @@ * ```jsx

* @public
* @default false
*/
when?: false | "beforeChildren" | "afterChildren";
/**
* When using variants, children animations will start after this duration (in seconds).
* When using variants, children animations will start after this duration
* (in seconds).
*

@@ -779,5 +801,8 @@ * @public

/**
* When using variants, children animations can be staggered by this duration (in seconds).
* When using variants, children animations can be staggered by this
* duration (in seconds).
*
* For instance, if `staggerChildren` is `0.01`, the first child will be delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so on.
* For instance, if `staggerChildren` is `0.01`, the first child will be
* delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so
* on.
*

@@ -792,5 +817,7 @@ * The calculated stagger delay will be added to `delayChildren`.

*
* - `1` staggers from the first child to the last,
* - `-1` staggers from the last child to the first.
* @remarks
*
* A value of `1` staggers from the first child to the last while `-1`
* staggers from the last child to the first.
*
* @public

@@ -864,5 +891,5 @@ */

/**
* End animation if absolute speed (in units per second) drops below this value .
* End animation if absolute speed (in units per second) drops below this
* value. Set to `0.01` by default.
* @public
* @default 0.01
*/

@@ -911,6 +938,6 @@ restSpeed?: number;

/**
* Set `type` to `'spring'` to animate using spring physics for natural movement.
* Set `type` to `'spring'` to animate using spring physics for natural
* movement. Set to `'spring'` by default.
*
* @public
* @default 'tween'
*/

@@ -920,28 +947,29 @@ type: "spring";

* Stiffness of the spring. Higher values will create more sudden movement.
* Set to `100` by default.
* @public
* @default 100
*/
stiffness?: number;
/**
* Strength of opposing force. If set to 0, spring will oscillate indefinitely.
* Strength of opposing force. If set to 0, spring will oscillate
* indefinitely. Set to `10` by default.
* @public
* @default 10
*/
damping?: number;
/**
* Mass of the moving object. Higher values will result in more lethargic movement.
* Mass of the moving object. Higher values will result in more lethargic
* movement. Set to `1` by default.
* @public
* @default 1
*/
mass?: number;
/**
* End animation if absolute speed (in units per second) drops below this value and delta is smaller than `restDelta`.
* End animation if absolute speed (in units per second) drops below this
* value and delta is smaller than `restDelta`. Set to `0.01` by default.
* @public
* @default 0.01
*/
restSpeed?: number;
/**
* End animation if distance to to is below this value and speed is below `restSpeed`. When animation ends, spring gets “snapped” to to.
* 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.
* @public
* @default 0.01
*/

@@ -1004,9 +1032,9 @@ restDelta?: number;

* // As properties
* <motion.button tap={{ scale: 0.8, y: 5 }} />
* <motion.div press={{ scale: 0.8, y: 5 }} />
*
* // As variant
* <motion.button tap="pressed" variants={variants} />
* <motion.div press="pressed" variants={variants} />
* ```
*/
tap?: string | TargetAndTransition;
press?: string | TargetAndTransition;
}

@@ -1070,2 +1098,3 @@

*
* @remarks
* If any `transition` properties are set, the selected animation will default to tween.

@@ -1077,6 +1106,5 @@ *

/**
* The duration of the tween animation.
* The duration of the tween animation. Set to `0.3` by default.
*
* @public
* @default `0.3`
*/

@@ -1101,6 +1129,6 @@ duration?: number;

/**
* The duration of time already elapsed in the animation.
* The duration of time already elapsed in the animation. Set to `0` by
* default.
*
* @internal
* @default 0
*/

@@ -1166,4 +1194,4 @@ elapsed?: number;

*
* @param variants - Named map of variants. Optional.
* @param defaultTransition - A default `Transition` to use when a variant doesn't have a `transition` property set. Optional.
* @param variants - An optional named map of variants.
* @param defaultTransition - An optional default transition to use when a variant doesn’t have an explicit `transition` property set.
* @returns Animation controller with `start` and `stop` methods

@@ -1173,3 +1201,3 @@ *

*/
export declare function useAnimation(variants?: Variants, defaultTransition?: Transition): AnimationGroupControls;
export declare function useAnimation(variants?: Variants, defaultTransition?: Transition): AnimationControls;

@@ -1204,6 +1232,5 @@ /**

/**
* Create a `MotionValue`.
* Returns a `MotionValue` for use in advanced cases like `useTransformedValue()`
*
* @param initial - The initial state of the `MotionValue`
* @returns `MotionValue`
* @param initial - The initial state.
*

@@ -1210,0 +1237,0 @@ * @public

2

package.json
{
"name": "framer-motion",
"version": "0.4.5",
"version": "0.5.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