support onChange and targetElement

Author: jscottsmith

src/components/Parallax/index.tsx

@@ -57,10 +57,12 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
         shouldStartAnimationInitialInView:
           props.shouldStartAnimationInitialInView,
         onProgressChange: props.onProgressChange,
+        onChange: props.onChange,
         onEnter: props.onEnter,
         onExit: props.onExit,
         startScroll: props.startScroll,
         endScroll: props.endScroll,
+        targetElement: props.targetElement,
       }),
     };
   }
@@ -108,8 +110,10 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
     props.easing,
     props.rootMargin,
     props.onProgressChange,
+    props.onChange,
     props.onEnter,
     props.onExit,
+    props.targetElement,
   ]);
 
   const Outer = props.tag;

stories/Parallax/1_ParallaxVertical.stories.tsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Parallax, ParallaxProvider } from '../../src';
 import { Element } from '../Element/Element';
 import { Container } from '../Container';
 import { ScrollContainer } from '../ScrollContainer';
 import styles from './Parallax.module.scss';
+import { useRef } from 'react';
+import { CSSEffect } from 'parallax-controller';
+import { useState } from 'react';
 
 export const WithYOffsets = (args) => {
   const a = args.y1.split(',');
@@ -262,6 +265,42 @@ WithDefinedStartEndScroll.args = {
   endScroll: 1000,
 };
 
+export const WithDefinedTargetElement = () => {
+  const a: CSSEffect = [0, 200];
+  const b: CSSEffect = [0, -200];
+  const targetRef = useRef();
+
+  const [targetElement, setElement] = useState();
+  useEffect(() => {
+    setElement(targetRef.current);
+  }, []);
+
+  return (
+    <Container scrollAxis="vertical" className={styles.elements}>
+      <Parallax
+        translateX={a}
+        className="fixed top-0 left-0 w-32 h-32"
+        targetElement={targetElement}
+      >
+        <Element name="1" />
+      </Parallax>
+      <Parallax
+        translateX={b}
+        className="fixed top-0 right-0 w-32 h-32"
+        targetElement={targetElement}
+      >
+        <Element name="2" />
+      </Parallax>
+      <div
+        className="w-screen h-screen bg-blue-500 bg-opacity-20 text-white flex items-center justify-center "
+        ref={targetRef}
+      >
+        Target Element
+      </div>
+    </Container>
+  );
+};
+
 export default {
   title: 'Components / <Parallax> / Vertical Scroll',
   component: WithYOffsets,

yarn.lock

@@ -11278,10 +11278,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.35:
-  version "0.1.35"
-  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.35.tgz#28ef2f57a30d3241123c65335ab5796ee95d87be"
-  integrity sha512-YCtjot8MiBPW3eZ1tbNga1jOPjJT3UsHx67FmCXMQugpZHGSlts0zgMy/hKvAqStuVq5TVv05Sg4o/bSyHn7Dg==
+parallax-controller@^0.1.36:
+  version "0.1.36"
+  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.36.tgz#6dfe8448b40bfa6f1740a329a9a36c6fe6b88157"
+  integrity sha512-pWOh+fQtF405vDTHJPVzddMu5NdUUHYb6xbVok/X+tgUSIFs05QfRPZ6alMcx6iSG+9U/jk+xqTjmsee3q0Sxg==
   dependencies:
     bezier-easing "^2.1.0"