add scale transforms

Author: jscottsmith

docs/parallax-component.md

@@ -57,6 +57,10 @@ The following are all props that can be passed to the `<Parallax>` component:
 | **rotateX**    | `string[]` or `number[]` |         | Start and end rotation on x-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed.                                          |
 | **rotateY**    | `string[]` or `number[]` |         | Start and end rotation on y-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed.                                          |
 | **rotateZ**    | `string[]` or `number[]` |         | Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed.                                          |
+| **scale**      |        `number[]`        |         | Start and end scale on x-axis and y-axis.                                                                                                    |
+| **scaleX**     |        `number[]`        |         | Start and end scale on x-axis.                                                                                                               |
+| **scaleY**     |        `number[]`        |         | Start and end scale on y-axis.                                                                                                               |
+| **scaleZ**     |        `number[]`        |         | Start and end scale on z-axis.                                                                                                               |
 | **className**  |         `string`         |         | Optionally pass additional class names to be added to the outermost parallax element.                                                        |
 | **disabled**   |        `boolean`         | `false` | Disables parallax effects on individual elements when `true`.                                                                                |
 | **styleInner** |         `object`         |         | Optionally pass a style object to be added to the innermost parallax element.                                                                |

package.json

@@ -74,7 +74,7 @@
     }
   ],
   "dependencies": {
-    "parallax-controller": "0.1.11"
+    "parallax-controller": "0.1.13"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",

src/components/Parallax.tsx

@@ -96,6 +96,39 @@ export interface ParallaxProps {
    * Second value is the ending scale
    */
   scale?: number[];
+  /**
+   * Start and end scale on x-axis
+   *
+   * Example:
+   *
+   * scaleX={[0, 1]}
+   *
+   * First value is the starting scale
+   * Second value is the ending scale
+   */
+  scaleX?: number[];
+  /**
+   * Start and end scale on y-axis
+   *
+   * Example:
+   *
+   * scaleY={[0, 1]}
+   *
+   * First value is the starting scale
+   * Second value is the ending scale
+   */
+  scaleY?: number[];
+  /**
+   * Start and end scale on z-axis
+   *
+   * Example:
+   *
+   * scaleZ={[0, 1]}
+   *
+   * First value is the starting scale
+   * Second value is the ending scale
+   */
+  scaleZ?: number[];
   /**
    * Optionally pass additional class names to be added to the outermost parallax element.
    */
@@ -176,6 +209,9 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
         rotateY: props.rotateY,
         rotateZ: props.rotateZ,
         scale: props.scale,
+        scaleX: props.scaleX,
+        scaleY: props.scaleY,
+        scaleZ: props.scaleZ,
       }),
     };
   }
@@ -211,6 +247,9 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
     props.rotateY,
     props.rotateZ,
     props.scale,
+    props.scaleX,
+    props.scaleY,
+    props.scaleZ,
     props.speed,
   ]);
 

stories/Parallax/4_ParallaxScale.stories.tsx

@@ -16,10 +16,29 @@ const Template = (args) => {
 };
 
 export const WithScale = Template.bind({});
+
 WithScale.args = {
   scale: [0, 1],
 };
 
+export const WithScaleX = Template.bind({});
+
+WithScaleX.args = {
+  scaleX: [0, 1],
+};
+
+export const WithScaleY = Template.bind({});
+
+WithScaleY.args = {
+  scaleY: [0, 1],
+};
+
+export const WithScaleZ = Template.bind({});
+
+WithScaleZ.args = {
+  scaleZ: [0, 1],
+};
+
 export default {
   title: '<Parallax> Scale',
   component: WithScale,

yarn.lock

@@ -11050,10 +11050,10 @@ pako@~1.0.5:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
-parallax-controller@0.1.11:
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.11.tgz#405a48fcb912f4f914567d794b0224f9aca09b45"
-  integrity sha512-mT6H3A8oz/LctdwSN2sPMqsos1orD9jwkB5m0n5v5XDTYJgOGAA/rypAf2cEZ34J2z4NUIzgd5o07RBUKiA9xA==
+parallax-controller@0.1.13:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.13.tgz#5e93b76cc849f1f96ee5915d547a0c98f3b244ff"
+  integrity sha512-rvUBtY/ebt5Z3hK6cZ9n2LoeYn5+AeZ273/UZbXuQFcgCizQtFt7x1/8zb4BrL09EwFWsx+HSQD2gg2UwzUicg==
 
 parallel-transform@^1.1.0:
   version "1.2.0"