rotation story

Author: jscottsmith

package.json

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

src/components/Parallax.tsx

@@ -29,6 +29,18 @@ export interface ParallaxProps {
    * Second value is the ending translation
    */
   y?: string[] | number[];
+
+  /**
+   * Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed.
+   *
+   * Example:
+   *
+   * rotate={['0deg', '360deg']}
+   *
+   * First value is the starting rotation
+   * Second value is the ending rotation
+   */
+  rotate?: string[] | number[];
   /**
    * Optionally pass additional class names to be added to the outermost parallax element.
    */
@@ -84,6 +96,7 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
         // Defaults set in Parallax.defaultProps
         translateX: props.x,
         translateY: props.y,
+        rotate: props.rotate,
       },
     };
   }

stories/Parallax/1_ParallaxVertical.stories.tsx

@@ -5,6 +5,26 @@ import { Container } from '../Container';
 import { ScrollContainer } from '../ScrollContainer';
 import styles from './Parallax.module.scss';
 
+export const WithRotation = (args) => {
+  const a = args.rotate1.split(',');
+  const b = args.rotate2.split(',');
+  return (
+    <Container scrollAxis="vertical" className={styles.elements}>
+      <Parallax rotate={a} className={styles.parallax}>
+        <Element name="1" />
+      </Parallax>
+      <Parallax rotate={b} className={styles.parallax}>
+        <Element name="2" />
+      </Parallax>
+    </Container>
+  );
+};
+
+WithRotation.args = {
+  rotate1: '0deg,360deg',
+  rotate2: '0deg,-360deg',
+};
+
 export const WithYOffsets = (args) => {
   const a = args.y1.split(',');
   const b = args.y2.split(',');

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.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.8.tgz#487d3ff24c93cab757c4fd9f90611393d9f83b19"
-  integrity sha512-8pY64e0yMrpB9XQLzNqSdGdlT13PwhZnOwoA54KoK5oFnuAPrAV2/CwhPCKOGVsyuBfW6N1ginXm9p+pX0V86w==
+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==
 
 parallel-transform@^1.1.0:
   version "1.2.0"