support startScroll and endScroll props

Author: jscottsmith

docs/parallax-component.md

@@ -64,6 +64,8 @@ The following are all props that can be passed to the `<Parallax>` component:
 | **tag**                               |        `string`        | `div`   | HTML element tag name to be applied to the outermost parallax element.                                                                                                                             |
 | **innerTag**                          |        `string`        | `div`   | HTML element tag name to be applied to the innermost parallax element.                                                                                                                             |
 | **shouldStartAnimationInitialInView** |       `boolean`        | `false` | Will start the animation at initial element position if the element is positioned inside the view when scroll is at zero.                                                                          |
+| **startScroll**                       |        `number`        |         | Scroll top value to begin the animation. When provided along with `endScroll` relative scroll values will be ignored.                                                                              |
+| **endScroll**                         |        `number`        |         | Scroll top value to end the animation. When provided along with `startScroll` relative scroll values will be ignored.                                                                              |
 
 ### Props: CSS Effects
 

package.json

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

src/components/Parallax/index.tsx

@@ -35,7 +35,9 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
     }
 
     return {
+      // @ts-expect-error
       elInner: refInner.current,
+      // @ts-expect-error
       elOuter: refOuter.current,
       props: removeUndefinedObjectKeys({
         disabled: props.disabled,
@@ -57,6 +59,8 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
         onProgressChange: props.onProgressChange,
         onEnter: props.onEnter,
         onExit: props.onExit,
+        startScroll: props.startScroll,
+        endScroll: props.endScroll,
       }),
     };
   }

src/components/Parallax/types.ts

@@ -180,6 +180,16 @@ export interface ParallaxProps {
    */
   tag?: any;
 
+  /**
+   * Scroll top value to begin the animation. When provided along with `endScroll` relative scroll values will be ignored.
+   */
+  startScroll?: number;
+
+  /**
+   * Scroll top value to end the animation. When provided along with `startScroll` relative scroll values will be ignored.
+   */
+  endScroll?: number;
+
   /**
    * Callback for when the progress of an element in the viewport changes.
    */

stories/Parallax/1_ParallaxVertical.stories.tsx

@@ -232,6 +232,36 @@ export const InsideADiv = () => {
   );
 };
 
+export const WithDefinedStartEndScroll = (args) => {
+  const a = [0, window.innerWidth / 2];
+  const b = [0, -window.innerWidth / 2];
+  return (
+    <Container scrollAxis="vertical" className={styles.elements}>
+      <Parallax
+        translateX={a}
+        startScroll={args.startScroll}
+        endScroll={args.endScroll}
+        className="fixed top-0 left-0 w-32 h-32"
+      >
+        <Element name="1" />
+      </Parallax>
+      <Parallax
+        translateX={b}
+        startScroll={args.startScroll}
+        endScroll={args.endScroll}
+        className="fixed top-0 right-0 w-32 h-32"
+      >
+        <Element name="2" />
+      </Parallax>
+    </Container>
+  );
+};
+
+WithDefinedStartEndScroll.args = {
+  startScroll: 0,
+  endScroll: 1000,
+};
+
 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.31:
-  version "0.1.31"
-  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.31.tgz#74dd287f4ce7bc7da7f98dc43d7759443c584102"
-  integrity sha512-mIOuI5ZWMQnOWclxokN3GjHHzrOabfZUkx3RYMQsanYcTFMx7FRaAkzQTMkcuxaEJM0aoTzmNRXyfV8WBd324Q==
+parallax-controller@^0.1.34:
+  version "0.1.34"
+  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.34.tgz#43384d4f3c7d86950f3790b00b1a30e57f15045e"
+  integrity sha512-Wzh4EO+5L8RmPfi1achJ6/72vJfBSFkjqde8pnlVuLhV3LwgW1FXXl0aDgA1+7+3GniJtI9iDUT2GRNoH+UDaQ==
   dependencies:
     bezier-easing "^2.1.0"