add support for opacity effect

Author: jscottsmith

package.json

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

src/components/Parallax/index.tsx

@@ -49,6 +49,7 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
         scaleX: props.scaleX,
         scaleY: props.scaleY,
         scaleZ: props.scaleZ,
+        opacity: props.opacity,
       }),
     };
   }
@@ -88,6 +89,7 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
     props.scaleY,
     props.scaleZ,
     props.speed,
+    props.opacity,
   ]);
 
   const Outer = props.tagOuter;

src/components/Parallax/types.ts

@@ -120,6 +120,17 @@ export interface ParallaxProps {
    * Second value is the ending scale
    */
   scaleZ?: number[];
+  /**
+   * Start and end opacity value
+   *
+   * Example:
+   *
+   * opacity={[0, 1]}
+   *
+   * First value is the starting opacity
+   * Second value is the ending opacity
+   */
+  opacity?: number[];
   /**
    * Optionally pass additional class names to be added to the outermost parallax element.
    */

stories/Parallax/0_ParallaxExamples.stories.tsx renamed to stories/Parallax/0_ParallaxRotation.stories.tsx

@@ -71,6 +71,6 @@ WithTranslateYAndRotation.args = {
 };
 
 export default {
-  title: '<Parallax> New Transforms',
+  title: '<Parallax> Rotation',
   component: WithRotation,
 };

stories/Parallax/5_ParallaxOpacity.stories.tsx

@@ -0,0 +1,27 @@
+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 WithOpacity = Template.bind({});
+
+WithOpacity.args = {
+  opacity: [0, 1],
+};
+
+export default {
+  title: '<Parallax> Opacity',
+  component: WithOpacity,
+};

stories/Parallax/4_ParallaxSpeed.stories.tsx renamed to stories/Parallax/6_ParallaxSpeed.stories.tsx

@@ -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.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==
+parallax-controller@0.1.14:
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.14.tgz#aee3459754fe08ca29898fc1b8721d785737cdae"
+  integrity sha512-lzrnXq/kMUqZ5IwPNK/kzHR4obBYgeBEzijt/zqAkLJ7AAHvhdtoizb+wyVfmpGK5OCFAthwl/9q9kIrAHu7qw==
 
 parallel-transform@^1.1.0:
   version "1.2.0"