add scale story

Author: jscottsmith

package.json

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

src/components/Parallax.tsx

@@ -84,6 +84,18 @@ export interface ParallaxProps {
    * Second value is the ending rotation
    */
   rotateZ?: string[] | number[];
+
+  /**
+   * Start and end scale on x-axis and y-axis.
+   *
+   * Example:
+   *
+   * scale={[0, 1]}
+   *
+   * First value is the starting scale
+   * Second value is the ending scale
+   */
+  scale?: number[];
   /**
    * Optionally pass additional class names to be added to the outermost parallax element.
    */
@@ -163,6 +175,7 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
         rotateX: props.rotateX,
         rotateY: props.rotateY,
         rotateZ: props.rotateZ,
+        scale: props.scale,
       }),
     };
   }
@@ -197,6 +210,7 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
     props.rotateX,
     props.rotateY,
     props.rotateZ,
+    props.scale,
     props.speed,
   ]);
 

stories/Parallax/4_ParallaxScale.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Parallax } from '../../src';
+import { Element } from '../Element/Element';
+import { Container } from '../Container';
+import styles from './Parallax.module.scss';
+
+const Template = (args) => {
+  const props = args;
+  return (
+    <Container scrollAxis="vertical" className={styles.elements}>
+      <Parallax {...props} className={styles.parallax}>
+        <Element name="A" />
+      </Parallax>
+    </Container>
+  );
+};
+
+export const WithScale = Template.bind({});
+WithScale.args = {
+  scale: [0, 1],
+};
+
+export default {
+  title: '<Parallax> Scale',
+  component: WithScale,
+};

yarn.lock

@@ -10153,10 +10153,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.10:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.10.tgz#47071d9ac4bd30ae2a0aabfe8b11fde20616ee64"
-  integrity sha512-aV4arXEiKfhbaBtg95t1OHr9fJ+rlhjZUfmbu5BwG1LTVThBQH0ZrTdu1aZVwJv9yUjFThCFuB/vkP9ZquNkzQ==
+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==
 
 parallel-transform@^1.1.0:
   version "1.2.0"