framer-motion - npm Package Compare versions

Comparing version 0.6.4 to 0.6.5

dist/framer-motion.d.ts

@@ -607,3 +607,3 @@ /// <reference types="react" />
 
-declare type MakeMotion<T> = MotionStyleProperties & {
+declare type MakeMotion<T> = {
     [K in keyof T]: T[K] | MotionValue<T[K]>;
@@ -711,2 +711,4 @@ };
 
+declare type MotionCSS = MakeMotion<Omit_2<CSSProperties, "rotate" | "scale" | "perspective">>;
+
 /**
@@ -756,2 +758,3 @@ * @internal
      *
+     * @remarks
      * ```jsx
@@ -766,2 +769,15 @@ * const MyComponent = () => {
     /**
+     * By default, Framer Motion generates a `transform` property with a sensible transform order. `transformTemplate`
+     * can be used to create a different order, or to append/preprend the automatically generated `transform` property.
+     *
+     * @remarks
+     *
+     *
+     * @param transform - The latest animated transform props.
+     * @param generatedTransform - The transform string as automatically generated by Framer Motion
+     *
+     * @public
+     */
+    transformTemplate?(transform: TransformProperties, generatedTransform: string): string;
+    /**
      * @internal
@@ -775,27 +791,6 @@ */
  */
-export declare type MotionStyle = MakeMotion<Omit_2<CSSProperties, "rotate" | "scale" | "perspective">>;
+export declare type MotionStyle = MotionCSS & MotionTransform;
 
-declare type MotionStyleProp = string | number | MotionValue;
+declare type MotionTransform = MakeMotion<TransformProperties>;
 
-declare interface MotionStyleProperties {
-    x?: MotionStyleProp;
-    y?: MotionStyleProp;
-    z?: MotionStyleProp;
-    rotate?: MotionStyleProp;
-    rotateX?: MotionStyleProp;
-    rotateY?: MotionStyleProp;
-    rotateZ?: MotionStyleProp;
-    scale?: MotionStyleProp;
-    scaleX?: MotionStyleProp;
-    scaleY?: MotionStyleProp;
-    scaleZ?: MotionStyleProp;
-    skew?: MotionStyleProp;
-    skewX?: MotionStyleProp;
-    skewY?: MotionStyleProp;
-    originX?: MotionStyleProp;
-    originY?: MotionStyleProp;
-    originZ?: MotionStyleProp;
-    perspective?: MotionStyleProp;
-}
-
 /**
@@ -837,2 +832,3 @@ * @internal
     private styler;
+    private transformTemplate;
     private onUpdate?;
@@ -848,2 +844,5 @@ private values;
     setOnUpdate(onUpdate?: OnUpdate): void;
+    setTransformTemplate(transformTemplate?: TransformTemplate | undefined): void;
+    getTransformTemplate(): TransformTemplate | undefined;
+    updateTransformTemplate(): void;
     mount(element: Element): void;
@@ -1312,2 +1311,25 @@ unmount(): void;
 
+declare interface TransformProperties {
+    x?: string | number;
+    y?: string | number;
+    z?: string | number;
+    rotate?: string | number;
+    rotateX?: string | number;
+    rotateY?: string | number;
+    rotateZ?: string | number;
+    scale?: string | number;
+    scaleX?: string | number;
+    scaleY?: string | number;
+    scaleZ?: string | number;
+    skew?: string | number;
+    skewX?: string | number;
+    skewY?: string | number;
+    originX?: string | number;
+    originY?: string | number;
+    originZ?: string | number;
+    perspective?: string | number;
+}
+
+declare type TransformTemplate = (transform: TransformProperties, generatedTransform: string) => string;
+
 declare type Transition = (Orchestration & TransitionDefinition) | (Orchestration & TransitionMap);
@@ -1539,2 +1561,14 @@
  *
+ * @remarks
+ *
+ * Given an input range of `[-200, -100, 100, 200]` and an output range of
+ * `[0, 1, 1, 0]`, the returned `MotionValue` will:
+ *
+ * - When provided a value between `-200` and `-100`, will return a value between `0` and  `1`
+ * - When provided a value between `-100` and `100`, will return `1`
+ * - When provided a value between `100` and `200, will return a value between `1` and  `0`
+ *
+ * The input range must be a linear series of numbers. The output range
+ * can be any value type supported by Framer Motion: numbers, colors, shadows, etc.
+ *
  * ```jsx
@@ -1551,5 +1585,5 @@ * const MyComponent = () => {
  *
- * @param value - `MotionValue`
- * @param fromRange - A linear series of numbers (either all increasing or decreasing)
- * @param toRange - A series of numbers, colors or strings. Must be the same length as `from`.
+ * @param inputValue - `MotionValue`
+ * @param inputRange - A linear series of numbers (either all increasing or decreasing)
+ * @param outputRange - A series of numbers, colors or strings. Must be the same length as `from`.
  * @param options -
@@ -1556,0 +1590,0 @@ *

package.json

 {
     "name": "framer-motion",
-    "version": "0.6.4",
+    "version": "0.6.5",
     "main": "dist/framer-motion.cjs.js",
@@ -68,3 +68,3 @@ "module": "dist/framer-motion.es.js",
         "style-value-types": "^3.0.7",
-        "stylefire": "2.4.0"
+        "stylefire": "^2.4.2"
     },
@@ -71,0 +71,0 @@ "husky": {

New alerts

License Policy Violation

License

This 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

License

This 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

683463

increased by1.12%

Lines of code

16602

increased by0.96%

Dependency changes

• + Addedstylefire@2.4.3(transitive)

• - Removedstylefire@2.4.0(transitive)

• Updatedstylefire@^2.4.2