framer-motion
Advanced tools
framer-motion - npm Package Compare versions
Comparing version 0.5.0 to 0.5.1
@@ -5,2 +5,9 @@ # Changelog | ||
| ## [0.5.1] 2019-02-19 | ||
| ### Added | ||
| - Exporting `MotionComponents`, `CustomMotionComponent`, `HTMLMotionComponents` and `SVGMotionComponents` types. | ||
| - Exporting `safeWindow`. | ||
| ## [0.5.0] 2019-02-19 | ||
@@ -7,0 +14,0 @@ |
@@ -64,13 +64,15 @@ import { Action } from 'popmotion'; | ||
| * ```jsx | ||
| * const variants = { | ||
| * active: { | ||
| * backgroundColor: '#f00' | ||
| * }, | ||
| * inactive: { | ||
| * backgroundColor: '#fff', | ||
| * transition: { duration: 2 } | ||
| * const MyComponent = () => { | ||
| * const variants = { | ||
| * active: { | ||
| * backgroundColor: '#f00' | ||
| * }, | ||
| * inactive: { | ||
| * backgroundColor: '#fff', | ||
| * transition: { duration: 2 } | ||
| * } | ||
| * } | ||
| * | ||
| * return <motion.div variants={variants} animate="active" /> | ||
| * } | ||
| * | ||
| * return <motion.div variants={variants} animate="active" /> | ||
| * ``` | ||
@@ -83,9 +85,11 @@ */ | ||
| * ```jsx | ||
| * const transition = { | ||
| * type: 'spring', | ||
| * damping: 10, | ||
| * stiffness: 100 | ||
| * const MyComponent = () => { | ||
| * const transition = { | ||
| * type: 'spring', | ||
| * damping: 10, | ||
| * stiffness: 100 | ||
| * } | ||
| * | ||
| * return <motion.div transition={transition} animate={{ scale: 1.2 }} /> | ||
| * } | ||
| * | ||
| * <motion.div transition={transition} animate={{ scale: 1.2 }} /> | ||
| * ``` | ||
@@ -155,3 +159,8 @@ */ | ||
| declare type CustomMotionComponent = { | ||
| /** | ||
| * A factory to create motion-optimised versions of existing React DOM components. | ||
| * | ||
| * @public | ||
| */ | ||
| export declare type CustomMotionComponent = { | ||
| custom: typeof createMotionComponent; | ||
@@ -176,3 +185,5 @@ }; | ||
| * ```jsx | ||
| * <motion.div dragEnabled="x" /> | ||
| * const MyComponent = () => { | ||
| * return <motion.div dragEnabled="x" /> | ||
| * } | ||
| * ``` | ||
@@ -185,5 +196,6 @@ */ | ||
| * | ||
| * @remarks | ||
| * ```jsx | ||
| * <motion.div dragEnabled="x" dragPropagation /> | ||
| * const MyComponent = () => { | ||
| * return <motion.div dragEnabled="x" dragPropagation /> | ||
| * } | ||
| * ``` | ||
@@ -196,5 +208,11 @@ */ | ||
| * | ||
| * @remarks | ||
| * ```jsx | ||
| * <motion.div dragEnabled="x" dragConstraints={{ left: 0, right: 300 }} /> | ||
| * const MyComponent = () => { | ||
| * return ( | ||
| * <motion.div | ||
| * dragEnabled="x" | ||
| * dragConstraints={{ left: 0, right: 300 }} | ||
| * /> | ||
| * ) | ||
| * } | ||
| * ``` | ||
@@ -212,9 +230,12 @@ */ | ||
| * | ||
| * @remarks | ||
| * ```jsx | ||
| * <motion.div | ||
| * dragEnabled="x" | ||
| * dragConstraints={{ left: 0, right: 300 }} | ||
| * dragElastic={0.2} | ||
| * /> | ||
| * const MyComponent = () => { | ||
| * return ( | ||
| * <motion.div | ||
| * dragEnabled | ||
| * dragConstraints={{ left: 0, right: 300 }} | ||
| * dragElastic={0.2} | ||
| * /> | ||
| * ) | ||
| * } | ||
| * ``` | ||
@@ -227,9 +248,12 @@ */ | ||
| * | ||
| * @remarks | ||
| * ```jsx | ||
| * <motion.div | ||
| * dragEnabled="x" | ||
| * dragConstraints={{ left: 0, right: 300 }} | ||
| * dragMomentum={false} | ||
| * /> | ||
| * const MyComponent = () => { | ||
| * return ( | ||
| * <motion.div | ||
| * dragEnabled | ||
| * dragConstraints={{ left: 0, right: 300 }} | ||
| * dragMomentum={false} | ||
| * /> | ||
| * ) | ||
| * } | ||
| * ``` | ||
@@ -239,15 +263,55 @@ */ | ||
| /** | ||
| * Callback that fires when dragging starts | ||
| * Callback that fires when dragging starts. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const onDragStart = (event, { point, delta, offset, velocity }) => { | ||
| * console.log(`Dragging started at ${point.x} ${point.y}`) | ||
| * } | ||
| * | ||
| * return <motion.div dragEnabled onDragStart={onDragStart} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
| onDragStart?(e: MouseEvent | TouchEvent): void; | ||
| /** | ||
| * Callback that fires when dragging ends | ||
| * Callback that fires when dragging ends. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const onDragEnd = (event, { point, delta, offset, velocity }) => { | ||
| * console.log(`Dragging ended at ${point.x} ${point.y}`) | ||
| * } | ||
| * | ||
| * return <motion.div dragEnabled onDragEnd={onDragEnd} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
| onDragEnd?(e: MouseEvent | TouchEvent): void; | ||
| /** | ||
| * Callback that fires when the component is dragged | ||
| * Callback that fires when the component is dragged. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const onDrag = (event, { point, delta, offset, velocity }) => { | ||
| * console.log(`Drag velocity is ${velocity.x} ${velocity.y}`) | ||
| * } | ||
| * | ||
| * return <motion.div dragEnabled onDrag={onDrag} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
| onDrag?(e: MouseEvent | TouchEvent, info: PanInfo): void; | ||
| /** | ||
| * Callback that fires a drag direction is determined | ||
| * Callback that fires a drag direction is determined. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const onDirectionLock = (axis) => { | ||
| * console.log(`Dragging locked to the ${axis} axis`) | ||
| * } | ||
| * | ||
| * return <motion.div dragEnabled onDirectionLock={onDirectionLock} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
@@ -277,11 +341,37 @@ onDirectionLock?(axis: "x" | "y"): void; | ||
| /** | ||
| * Properties or variant label to animate to while the hover gesture is recognised | ||
| * Properties or variant label to animate to while the hover gesture is recognised. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * return <motion.div hover={{ scale: 1.2 }} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
| hover?: string | TargetAndTransition; | ||
| /** | ||
| * Callback that fires when pointer starts hovering over the component | ||
| * Callback that fires when pointer starts hovering over the component. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const onHoverStart = (event) => { | ||
| * console.log('Pointer is hovering over this Frame') | ||
| * } | ||
| * | ||
| * return <motion.div onHoverStart={onHoverStart} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
| onHoverStart?(event: MouseEvent): void; | ||
| /** | ||
| * Callback that fires when pointer stops hovering over the component | ||
| * Callback that fires when pointer stops hovering over the component. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const onHoverEnd = (event) => { | ||
| * console.log('Pointer stopped hovering over this Frame') | ||
| * } | ||
| * | ||
| * return <motion.div onHoverEnd={onHoverEnd} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
@@ -298,3 +388,8 @@ onHoverEnd?(event: MouseEvent): void; | ||
| declare type HTMLMotionComponents = { | ||
| /** | ||
| * Motion-optimised versions of React's HTML components. | ||
| * | ||
| * @public | ||
| */ | ||
| export declare type HTMLMotionComponents = { | ||
| [K in HTMLElements]: ComponentType<Omit<UnwrapFactory<ReactHTML[K]>, "style"> & MotionProps>; | ||
@@ -553,7 +648,9 @@ }; | ||
| * ```jsx | ||
| * function onUpdate({ x, opacity }) { | ||
| * // Do something | ||
| * const MyComponent = () => { | ||
| * const onUpdate = ({ x, opacity }) => { | ||
| * console.log(`Latest values: ${x} ${opacity}`) | ||
| * } | ||
| * | ||
| * return <motion.div animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} /> | ||
| * } | ||
| * | ||
| * return <motion.div animate={{ x: 100, opacity: 0 }} onUpdate={onUpdate} /> | ||
| * ``` | ||
@@ -568,5 +665,9 @@ */ | ||
| * ```jsx | ||
| * function onComplete() {} | ||
| * const MyComponent = () => { | ||
| * const onComplete = () => { | ||
| * console.log(`Animation has completed`) | ||
| * } | ||
| * | ||
| * return <motion.div onAnimationComplete={onComplete} /> | ||
| * return <motion.div animate={{ x: 100 }} onAnimationComplete={onComplete} /> | ||
| * } | ||
| * ``` | ||
@@ -577,3 +678,14 @@ */ | ||
| declare type MotionComponents = CustomMotionComponent & HTMLMotionComponents & SVGMotionComponents; | ||
| /** | ||
| * Motion-optimised versions of React DOM components. | ||
| * | ||
| * ```jsx | ||
| * <motion.div /> | ||
| * <motion.circle /> | ||
| * const Component = motion.custom(ExistingComponent) | ||
| * ``` | ||
| * | ||
| * @public | ||
| */ | ||
| export declare type MotionComponents = CustomMotionComponent & HTMLMotionComponents & SVGMotionComponents; | ||
@@ -625,6 +737,7 @@ /** | ||
| * ```jsx | ||
| * const x = useMotionValue(0) | ||
| * const MyComponent = () => { | ||
| * const x = useMotionValue(0) | ||
| * | ||
| * return <motion.div style={{ x, opacity: 1, scale: 0.5 }} /> | ||
| * ``` | ||
| * return <motion.div style={{ x, opacity: 1, scale: 0.5 }} /> | ||
| * } | ||
| */ | ||
@@ -825,4 +938,8 @@ style?: MotionStyle; | ||
| * ```jsx | ||
| * function onPan(event, { point, delta, offset, velocity }) { | ||
| * const MyComponent = () => { | ||
| * const onPan = (event, { point, delta, offset, velocity }) => { | ||
| * console.log(`Panned to ${point.x} ${point.y}`) | ||
| * } | ||
| * | ||
| * return <motion.div onPan={onPan} /> | ||
| * } | ||
@@ -834,2 +951,12 @@ * ``` | ||
| * Callback when the pan gesture begins on this element. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const onPanStart = (event, { point, delta, offset, velocity }) => { | ||
| * console.log(`Started panning at ${point.x} ${point.y}`) | ||
| * } | ||
| * | ||
| * return <motion.div onPanStart={onPan} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
@@ -839,2 +966,12 @@ onPanStart?(event: MouseEvent | TouchEvent, info: PanInfo): void; | ||
| * Callback when the pan gesture ends on this element. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const onPanEnd = (event, { point, delta, offset, velocity }) => { | ||
| * console.log(`Stopped panning at ${point.x} ${point.y}`) | ||
| * } | ||
| * | ||
| * return <motion.div onPanEnd={onPan} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
@@ -917,2 +1054,9 @@ onPanEnd?(event: MouseEvent | TouchEvent, info: PanInfo): void; | ||
| /** | ||
| * Creates a server-safe reference to `window`, returning a mock if none is available. | ||
| * | ||
| * @internal | ||
| */ | ||
| export declare const safeWindow: Window | ServerSafeWindow; | ||
| declare interface ScrollMotionValues { | ||
@@ -925,2 +1069,14 @@ scrollX: MotionValue<number>; | ||
| declare interface ServerSafeWindow extends EventTarget { | ||
| onpointerdown: false; | ||
| onpointermove: false; | ||
| onpointerup: false; | ||
| ontouchstart: false; | ||
| ontouchmove: false; | ||
| ontouchend: false; | ||
| onmousedown: false; | ||
| onmousemove: false; | ||
| onmouseup: false; | ||
| } | ||
| /** | ||
@@ -998,3 +1154,8 @@ * @public | ||
| declare type SVGMotionComponents = { | ||
| /** | ||
| * Motion-optimised versions of React's SVG components. | ||
| * | ||
| * @public | ||
| */ | ||
| export declare type SVGMotionComponents = { | ||
| [K in SVGElements]: ComponentType<Omit<SVGAttributes<SVGElement>, "style"> & MotionProps>; | ||
@@ -1009,2 +1170,12 @@ }; | ||
| * Callback when the tap gesture successfully ends on this element. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const onTap = (event, { point }) => { | ||
| * console.log(`Tapped at ${point.x} ${point.y}`) | ||
| * } | ||
| * | ||
| * return <motion.div onTap={onPan} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
@@ -1014,2 +1185,12 @@ onTap?(event: MouseEvent | TouchEvent, info: TapInfo): void; | ||
| * Callback when the tap gesture starts on this element. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const onTapStart = (event, { point }) => { | ||
| * console.log(`Tap started at ${point.x} ${point.y}`) | ||
| * } | ||
| * | ||
| * return <motion.div onTapStart={onPan} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
@@ -1019,2 +1200,12 @@ onTapStart?(event: MouseEvent | TouchEvent, info: TapInfo): void; | ||
| * Callback when the tap gesture ends outside this element. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const onTapCancel = (event, { point }) => { | ||
| * console.log(`Tap cancelled at ${point.x} ${point.y}`) | ||
| * } | ||
| * | ||
| * return <motion.div onTapCancel={onPan} /> | ||
| * } | ||
| * ``` | ||
| */ | ||
@@ -1026,7 +1217,14 @@ onTapCancel?(event: MouseEvent | TouchEvent, info: TapInfo): void; | ||
| * ```jsx | ||
| * // As properties | ||
| * <motion.div press={{ scale: 0.8, y: 5 }} /> | ||
| * const MyComponent = () => { | ||
| * return <motion.div press={{ scale: 0.8 }} /> | ||
| * } | ||
| * | ||
| * // As variant | ||
| * <motion.div press="pressed" variants={variants} /> | ||
| * // With variants | ||
| * const MyComponent = () => { | ||
| * const variants = { | ||
| * pressed: { scale: 0.8 } | ||
| * } | ||
| * | ||
| * return <motion.div variants={variants} press="pressed" /> | ||
| * } | ||
| * ``` | ||
@@ -1197,2 +1395,10 @@ */ | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const [x, cycleX] = useCycle([0, 100, 200]) | ||
| * | ||
| * return <Frame animate={{ x: x }} onClick={() => cycleX()} /> | ||
| * } | ||
| * ``` | ||
| * | ||
| * @param items - An array of the possible states | ||
@@ -1223,4 +1429,14 @@ * @param initialIndex - Index of initial state. Defaults to `0` | ||
| /** | ||
| * Returns a `MotionValue` for use in advanced cases like `useTransformedValue()` | ||
| * Creates a `MotionValue` to track the state and velocity of a value. | ||
| * | ||
| * Usually, these are created automatically. For advanced use-cases, like use with `useTransformedValue`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const scale = useMotionValue(1) | ||
| * | ||
| * return <Frame style={{ scale: scale }} /> | ||
| * } | ||
| * ``` | ||
| * | ||
| * @param initial - The initial state. | ||
@@ -1257,2 +1473,14 @@ * | ||
| * | ||
| * ```jsx | ||
| * const double = (v) => v * 2 | ||
| * | ||
| * const MyComponent = () => { | ||
| * const x = useMotionValue(0) | ||
| * const y = useTransformedValue(x, double) | ||
| * // y will be x, doubled | ||
| * | ||
| * return <Frame style={{ x, y }} /> | ||
| * } | ||
| * ``` | ||
| * | ||
| * @param value - The `MotionValue` to transform the output of. | ||
@@ -1269,2 +1497,13 @@ * @param transform - Function that accepts the output of `value` and returns a new value. | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const x = useMotionValue(0) | ||
| * const xRange = [-200, -100, 100, 200] | ||
| * const opacityRange = [0, 1, 1, 0] | ||
| * const opacity = useTransformedValue(x, xRange, opacityRange) | ||
| * | ||
| * return <Frame dragEnabled="x" style={{ opacity, x }} /> | ||
| * } | ||
| * ``` | ||
| * | ||
| * @param value - `MotionValue` | ||
@@ -1286,2 +1525,14 @@ * @param fromRange - A linear series of numbers (either all increasing or decreasing) | ||
| * | ||
| * - Test | ||
| * - Test 2 | ||
| * | ||
| * ```jsx | ||
| * const MyComponent = () => { | ||
| * const { scrollYProgress } = useViewportScrollValues() | ||
| * const scaleX = useTransformedValue(scrollYProgress, [0, 1], [0, 1]) | ||
| * | ||
| * return <Frame style={{ scaleX }} /> | ||
| * } | ||
| * ``` | ||
| * | ||
| * @public | ||
@@ -1288,0 +1539,0 @@ */ |
| { | ||
| "name": "framer-motion", | ||
| "version": "0.5.0", | ||
| "version": "0.5.1", | ||
| "main": "dist/framer-motion.cjs.js", | ||
@@ -5,0 +5,0 @@ "module": "dist/framer-motion.es.js", |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.38%
665769
- Lines of code
- increased by3.97%
16282
No dependency changes