add support for rootMargin

Author: jscottsmith

docs/parallax-component.md

@@ -45,16 +45,17 @@ The following are all props that can be passed to the `<Parallax>` component:
 
 ### Props: Configuration
 
-| Name           |          Type          | Default | Description                                                                                                                                              |
-| -------------- | :--------------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **speed**      |        `number`        |         | A value representing the elements scroll speed. If less than zero scroll will appear slower. If greater than zero scroll will appear faster.             |
-| **easing**     | `string` or `number[]` |         | String representing an [easing preset](#easing-presets) or array of params to supply to a [cubic bezier easing function](#cubic-bezier-easing-function). |
-| **className**  |        `string`        |         | Optionally pass additional class names to be added to the outermost parallax element.                                                                    |
-| **disabled**   |       `boolean`        | `false` | Disables parallax effects on individual elements when `true`.                                                                                            |
-| **styleInner** |        `object`        |         | Optionally pass a style object to be added to the innermost parallax element.                                                                            |
-| **styleOuter** |        `object`        |         | Optionally pass a style object to be added to the outermost parallax element.                                                                            |
-| **tagInner**   |        `string`        | `div`   | Optionally pass an element tag name to be applied to the innermost parallax element.                                                                     |
-| **tagOuter**   |        `string`        | `div`   | Optionally pass an element tag name to be applied to the outermost parallax element.                                                                     |
+| Name           |          Type          | Default | Description                                                                                                                                                                                        |
+| -------------- | :--------------------: | :------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **speed**      |        `number`        |         | A value representing the elements scroll speed. If less than zero scroll will appear slower. If greater than zero scroll will appear faster.                                                       |
+| **easing**     | `string` or `number[]` |         | String representing an [easing preset](#easing-presets) or array of params to supply to a [cubic bezier easing function](#cubic-bezier-easing-function).                                           |
+| **rootMargin** |        `object`        |         | Margin to be applied as the bounds around an element. This will affect when an element is determined to be considered in the viewport. Example: `{ top: 100, right: 100, bottom: 100, left: 100 }` |
+| **className**  |        `string`        |         | Optionally pass additional class names to be added to the outermost parallax element.                                                                                                              |
+| **disabled**   |       `boolean`        | `false` | Disables parallax effects on individual elements when `true`.                                                                                                                                      |
+| **styleInner** |        `object`        |         | Optionally pass a style object to be added to the innermost parallax element.                                                                                                                      |
+| **styleOuter** |        `object`        |         | Optionally pass a style object to be added to the outermost parallax element.                                                                                                                      |
+| **tagInner**   |        `string`        | `div`   | Optionally pass an element tag name to be applied to the innermost parallax element.                                                                                                               |
+| **tagOuter**   |        `string`        | `div`   | Optionally pass an element tag name to be applied to the outermost parallax element.                                                                                                               |
 
 ### Props: CSS Effects
 

package.json

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

src/components/Parallax/index.tsx

@@ -51,6 +51,7 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
         scaleZ: props.scaleZ,
         opacity: props.opacity,
         easing: props.easing,
+        rootMargin: props.rootMargin,
       }),
     };
   }
@@ -92,6 +93,7 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
     props.speed,
     props.opacity,
     props.easing,
+    props.rootMargin,
   ]);
 
   const Outer = props.tagOuter;

src/components/Parallax/types.ts

@@ -1,4 +1,4 @@
-import { ValidEasingPresets } from 'parallax-controller';
+import { RootMarginShape, ValidEasingPresets } from 'parallax-controller';
 
 export interface ParallaxProps {
   /**
@@ -140,6 +140,13 @@ export interface ParallaxProps {
    * Example params: [0.42, 0, 0.58, 1]
    */
   easing?: number[] | ValidEasingPresets;
+  /**
+   * Margin to be applied as the bounds around an element.
+   * This will affect when an element is determined to be considered in the viewport.
+   *
+   * Example: rootMargin={{ top: 100, right: 100, bottom: 100, left: 100 }}
+   */
+  rootMargin?: RootMarginShape;
   /**
    * Optionally pass additional class names to be added to the outermost parallax element.
    */

yarn.lock

@@ -11055,10 +11055,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.17:
-  version "0.1.17"
-  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.17.tgz#ef135fb4d4934dcdc132c27756deac3379997b2c"
-  integrity sha512-DwWFjmerd8YqMX0iSy2LeAQjF646hcDoFYiwCa+GOYJqmIhjLjKxy/dY2uRkXKm4oGKBde61CDRLwNfOq0KeFw==
+parallax-controller@0.1.21:
+  version "0.1.21"
+  resolved "https://registry.yarnpkg.com/parallax-controller/-/parallax-controller-0.1.21.tgz#e8d4566ca2c01662621e895320d95a4134e48f9f"
+  integrity sha512-P9KhQe3xOJTo7SmeXtJO0J96pJPildNcLvcvvkswrFbIJYWB3qO8HT5V51C2/HitCHv5cdck01ot+AcI74hI4Q==
   dependencies:
     bezier-easing "^2.1.0"