add rotation props and stories

Author: jscottsmith

package.json

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

src/components/Parallax.tsx

@@ -41,6 +41,39 @@ export interface ParallaxProps {
    * Second value is the ending rotation
    */
   rotate?: string[] | number[];
+  /**
+   * Start and end rotation on x-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed.
+   *
+   * Example:
+   *
+   * rotateX={['0deg', '360deg']}
+   *
+   * First value is the starting rotation
+   * Second value is the ending rotation
+   */
+  rotateX?: string[] | number[];
+  /**
+   * Start and end rotation on y-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed.
+   *
+   * Example:
+   *
+   * rotateY={['0deg', '360deg']}
+   *
+   * First value is the starting rotation
+   * Second value is the ending rotation
+   */
+  rotateY?: string[] | number[];
+  /**
+   * Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed.
+   *
+   * Example:
+   *
+   * rotateZ={['0deg', '360deg']}
+   *
+   * First value is the starting rotation
+   * Second value is the ending rotation
+   */
+  rotateZ?: string[] | number[];
   /**
    * Optionally pass additional class names to be added to the outermost parallax element.
    */
@@ -97,6 +130,9 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
         translateX: props.x,
         translateY: props.y,
         rotate: props.rotate,
+        rotateX: props.rotateX,
+        rotateY: props.rotateY,
+        rotateZ: props.rotateZ,
       },
     };
   }
@@ -123,7 +159,15 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
         );
       }
     }
-  }, [props.disabled, props.x, props.y, props.rotate]);
+  }, [
+    props.disabled,
+    props.x,
+    props.y,
+    props.rotate,
+    props.rotateX,
+    props.rotateY,
+    props.rotateZ,
+  ]);
 
   const Outer = props.tagOuter;
   const Inner = props.tagInner;
@@ -144,6 +188,4 @@ Parallax.defaultProps = {
   disabled: false,
   tagInner: 'div',
   tagOuter: 'div',
-  x: [0, 0],
-  y: [0, 0],
 };

stories/Parallax/0_ParallaxExamples.stories.tsx

@@ -0,0 +1,70 @@
+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 = Object.entries(args).reduce((acc: any, entry: any) => {
+    console.log(entry);
+    acc[entry[0]] = entry[1].split(',');
+    return acc;
+  }, {} as any);
+  return (
+    <Container scrollAxis="vertical" className={styles.elements}>
+      <Parallax {...props} className={styles.parallax}>
+        <Element name="A" />
+      </Parallax>
+    </Container>
+  );
+};
+
+export const WithRotation = Template.bind({});
+WithRotation.args = {
+  rotate: '0deg,360deg',
+};
+
+export const WithRotationX = Template.bind({});
+WithRotationX.args = {
+  rotateX: '0deg,360deg',
+};
+
+export const WithRotationY = Template.bind({});
+WithRotationY.args = {
+  rotateY: '0deg,360deg',
+};
+
+export const WithRotationZ = Template.bind({});
+WithRotationZ.args = {
+  rotateZ: '0deg,360deg',
+};
+
+export const WithRotationXY = Template.bind({});
+WithRotationXY.args = {
+  rotateX: '0deg,360deg',
+  rotateY: '0deg,360deg',
+};
+
+export const WithRotationXZ = Template.bind({});
+WithRotationXZ.args = {
+  rotateX: '0deg,360deg',
+  rotateZ: '0deg,360deg',
+};
+
+export const WithRotationYZ = Template.bind({});
+WithRotationYZ.args = {
+  rotateY: '0deg,360deg',
+  rotateZ: '0deg,360deg',
+};
+
+export const WithRotationXYZ = Template.bind({});
+WithRotationXYZ.args = {
+  rotateX: '0deg,360deg',
+  rotateY: '0deg,360deg',
+  rotateZ: '0deg,360deg',
+};
+
+export default {
+  title: '<Parallax> New Transforms',
+  component: WithRotation,
+};

stories/Parallax/Parallax.module.scss

@@ -1,6 +1,7 @@
 .parallax {
   width: 10rem;
   height: 10rem;
+  perspective: 500px;
 }
 
 .small {

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.9:
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.9.tgz#3fb47409a3aded7dc067d8ddde530cab5d622562"
-  integrity sha512-czH4ic3IQIerN7Wt3uPgY0UkZYT0BihQroREQel8rBGK2Jj0mltmS6Dvc5io9T38pg6L5AcLVVbnM5F9mw1LrQ==
+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==
 
 parallel-transform@^1.1.0:
   version "1.2.0"