extend ParallaxElementConfig for Parallax props

Author: jscottsmith

src/components/Parallax/index.tsx

@@ -40,9 +40,9 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
       // @ts-expect-error
       elOuter: refOuter.current,
       props: removeUndefinedObjectKeys({
-        disabled: props.disabled,
         translateX,
         translateY,
+        disabled: props.disabled,
         rotate: props.rotate,
         rotateX: props.rotateX,
         rotateY: props.rotateY,

src/components/Parallax/types.ts

@@ -1,6 +1,6 @@
-import { RootMarginShape, ValidEasingPresets } from 'parallax-controller';
+import { ParallaxElementConfig } from 'parallax-controller';
 
-export interface ParallaxProps {
+export interface ParallaxProps extends ParallaxElementConfig {
   /**
    * A number to slowdown `n < 0` or speed up `n > 0` the scroll speed of an element
    *
@@ -10,147 +10,6 @@ export interface ParallaxProps {
    *
    */
   speed?: number;
-  /**
-   * Start and end translation on x-axis in % or px. If no unit is passed percent is assumed. Percent is based on the elements width.
-   *
-   * Example:
-   *
-   * translateX={[-100, 100]}
-   *
-   * First value is the starting translation
-   * Second value is the ending translation
-   */
-  translateX?: string[] | number[];
-  /**
-   * Start and end translation on y-axis in % or px. If no unit is passed percent is assumed. Percent is based on the elements height.
-   *
-   * Example:
-   *
-   * translateY={[-100, 100]}
-   *
-   * First value is the starting translation
-   * Second value is the ending translation
-   */
-  translateY?: 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[];
-  /**
-   * Start and end rotation on x-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed.
-   *
-   * Example:
-   *
-   * rotateX={['0deg', '360deg']}
-   *
-   * First value is the starting rotation
-   * Second value is the ending rotation
-   */
-  rotateX?: string[] | number[];
-  /**
-   * Start and end rotation on y-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed.
-   *
-   * Example:
-   *
-   * rotateY={['0deg', '360deg']}
-   *
-   * First value is the starting rotation
-   * Second value is the ending rotation
-   */
-  rotateY?: string[] | number[];
-  /**
-   * Start and end rotation on z-axis in `deg`, `rad`, or `turn`. If no unit is passed `deg` is assumed.
-   *
-   * Example:
-   *
-   * rotateZ={['0deg', '360deg']}
-   *
-   * First value is the starting rotation
-   * Second value is the ending rotation
-   */
-  rotateZ?: string[] | number[];
-
-  /**
-   * Start and end scale on x-axis and y-axis.
-   *
-   * Example:
-   *
-   * scale={[0, 1]}
-   *
-   * First value is the starting scale
-   * Second value is the ending scale
-   */
-  scale?: number[];
-  /**
-   * Start and end scale on x-axis
-   *
-   * Example:
-   *
-   * scaleX={[0, 1]}
-   *
-   * First value is the starting scale
-   * Second value is the ending scale
-   */
-  scaleX?: number[];
-  /**
-   * Start and end scale on y-axis
-   *
-   * Example:
-   *
-   * scaleY={[0, 1]}
-   *
-   * First value is the starting scale
-   * Second value is the ending scale
-   */
-  scaleY?: number[];
-  /**
-   * Start and end scale on z-axis
-   *
-   * Example:
-   *
-   * scaleZ={[0, 1]}
-   *
-   * First value is the starting scale
-   * 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[];
-  /**
-   * Easing preset or custom params for a cubic bezier easing function.
-   *
-   * Example preset: 'easeInOut'
-   * 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;
-  /**
-   * Will start the animation at initial element position if the element is positioned inside the view when scroll is at zero
-   */
-  shouldStartAnimationInitialInView?: boolean;
   /**
    * Class names to be added to the outermost parallax element.
    */
@@ -159,10 +18,6 @@ export interface ParallaxProps {
    * Class names to be added to the outermost parallax element.
    */
   innerClassName?: string;
-  /**
-   * Disables parallax effects on individual elements when true.
-   */
-  disabled?: boolean;
   /**
    * Style object to be added to the innermost parallax element.
    */
@@ -179,27 +34,4 @@ export interface ParallaxProps {
    * HTML element tag name to be applied to the outermost parallax element.
    */
   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.
-   */
-  onProgressChange?: (progress: number) => any;
-  /**
-   * Callback for when an element enters the viewport.
-   */
-  onEnter?: () => any;
-  /**
-   * Callback for when an element exits the viewport.
-   */
-  onExit?: () => any;
 }