react-scroll-parallax - npm Package Compare versions

Comparing version 3.0.0-alpha.18 to 3.0.0-alpha.19

dist/components/Parallax/types.d.ts

@@ -1,3 +0,3 @@
-import { RootMarginShape, ValidEasingPresets } from 'parallax-controller';
-export interface ParallaxProps {
+import { ParallaxElementConfig } from 'parallax-controller';
+export interface ParallaxProps extends ParallaxElementConfig {
     /**
@@ -13,141 +13,2 @@ * A number to slowdown `n < 0` or speed up `n > 0` the scroll speed of an element
     /**
-     * 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.
@@ -161,6 +22,2 @@ */
     /**
-     * Disables parallax effects on individual elements when true.
-     */
-    disabled?: boolean;
-    /**
      * Style object to be added to the innermost parallax element.
@@ -181,22 +38,2 @@ */
     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;
 }

dist/index.d.ts

@@ -0,1 +1,2 @@
+import { EasingPreset, EffectNumber, EffectString } from 'parallax-controller';
 import { Parallax } from './components/Parallax';
@@ -6,2 +7,2 @@ import { ParallaxBanner } from './components/ParallaxBanner';
 export { useController } from './hooks/useController';
-export { Parallax, ParallaxBanner, ParallaxProvider, ParallaxContext };
+export { Parallax, ParallaxBanner, ParallaxProvider, ParallaxContext, EasingPreset, EffectNumber, EffectString, };

dist/react-scroll-parallax.cjs.development.js

@@ -7,5 +7,5 @@ 'use strict';
 
+var parallaxController = require('parallax-controller');
 var React = require('react');
 var React__default = _interopDefault(React);
-var parallaxController = require('parallax-controller');
 
@@ -75,5 +75,5 @@ var ParallaxContext = /*#__PURE__*/React__default.createContext(null);
       props: removeUndefinedObjectKeys({
-        disabled: props.disabled,
         translateX: translateX,
         translateY: translateY,
+        disabled: props.disabled,
         rotate: props.rotate,
@@ -295,2 +295,8 @@ rotateX: props.rotateX,
 
+Object.defineProperty(exports, 'EasingPreset', {
+  enumerable: true,
+  get: function () {
+    return parallaxController.EasingPreset;
+  }
+});
 exports.Parallax = Parallax;
@@ -297,0 +303,0 @@ exports.ParallaxBanner = ParallaxBanner;

dist/react-scroll-parallax.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("parallax-controller"),a=r.createContext(null);function o(){var e=t.useContext(a);if("undefined"==typeof window)return null;if(!e)throw new Error("Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>");return e}function l(e){var a=o(),l=t.useRef(),s=t.useRef();function i(){var t,r=void 0!==e.speed,n=e.translateX,o=e.translateY;return r&&"horizontal"==(null==a?void 0:a.scrollAxis)&&(n=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),r&&"vertical"==(null==a?void 0:a.scrollAxis)&&(o=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),{elInner:l.current,elOuter:s.current,props:(t={disabled:e.disabled,translateX:n,translateY:o,rotate:e.rotate,rotateX:e.rotateX,rotateY:e.rotateY,rotateZ:e.rotateZ,scale:e.scale,scaleX:e.scaleX,scaleY:e.scaleY,scaleZ:e.scaleZ,opacity:e.opacity,easing:e.easing,rootMargin:e.rootMargin,shouldStartAnimationInitialInView:e.shouldStartAnimationInitialInView,onProgressChange:e.onProgressChange,onEnter:e.onEnter,onExit:e.onExit,startScroll:e.startScroll,endScroll:e.endScroll},Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t)}}!function(e){t.useEffect((function(){if(!("undefined"==typeof window||e||e instanceof n.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(a);var c=t.useState(),d=c[0],u=c[1];return t.useEffect((function(){var e=null==a?void 0:a.createElement(i());return u(e),function(){e&&(null==a||a.removeElementById(e.id))}}),[]),t.useEffect((function(){d&&(e.disabled?null==a||a.resetElementStyles(d):null==a||a.updateElementPropsById(d.id,i().props))}),[e.disabled,e.translateX,e.translateY,e.rotate,e.rotateX,e.rotateY,e.rotateZ,e.scale,e.scaleX,e.scaleY,e.scaleZ,e.speed,e.opacity,e.easing,e.rootMargin,e.onProgressChange,e.onEnter,e.onExit]),r.createElement(e.tag,{className:e.className,ref:s,style:e.style},r.createElement(e.tagInner,{className:e.innerClassName,ref:l,style:e.styleInner},e.children))}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}l.defaultProps={disabled:!1,tagInner:"div",tag:"div"};var c={position:"relative",overflow:"hidden",width:"100%",height:"50vh"},d={position:"absolute",top:0,right:0,bottom:0,left:0},u=function(e){var t=e.children,n=e.className,a=e.layers,o=e.disabled;return r.createElement("div",{style:s({},c,e.style),className:"parallax-banner"+(n?" "+n:"")},a.map((function(e,t){var n=e.speed,a=e.children,i=e.expanded,c=void 0===i||i,u=e.image,p=e.props,f=void 0===p?{}:p,v=f.style||{},x=f.className||"";delete f.style,delete f.className;var y="parallax-banner-layer-"+t+(x?" "+x:""),h=c?{top:10*Math.abs(n)*-1+"px",bottom:10*Math.abs(n)*-1+"px"}:{};return r.createElement(l,{key:"layer-"+t,speed:n,styleInner:d,style:d,disabled:o},r.createElement("div",Object.assign({className:y,style:s({},u?{backgroundImage:"url("+u+")",backgroundPosition:"center",backgroundSize:"cover"}:{},d,h,v)},f),a))})),t)};u.defaultProps={disabled:!1};var p=function(e){var t,o;function l(t){var r;return(r=e.call(this,t)||this).controller="undefined"==typeof window?null:n.ParallaxController.init({scrollAxis:t.scrollAxis,scrollContainer:t.scrollContainer}),r}o=e,(t=l).prototype=Object.create(o.prototype),t.prototype.constructor=t,i(t,o);var s=l.prototype;return s.componentDidUpdate=function(e){e.scrollContainer!==this.props.scrollContainer&&this.controller.updateScrollContainer(this.props.scrollContainer)},s.componentWillUnmount=function(){this.controller=this.controller.destroy()},s.render=function(){return r.createElement(a.Provider,{value:this.controller},this.props.children)},l}(t.Component);p.defaultProps={scrollAxis:n.ScrollAxis.vertical},exports.Parallax=l,exports.ParallaxBanner=u,exports.ParallaxContext=a,exports.ParallaxProvider=p,exports.useController=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("parallax-controller"),r=require("react"),n=(e=r)&&"object"==typeof e&&"default"in e?e.default:e,a=n.createContext(null);function o(){var e=r.useContext(a);if("undefined"==typeof window)return null;if(!e)throw new Error("Could not find `react-scroll-parallax` context value. Please ensure the component is wrapped in a <ParallaxProvider>");return e}function l(e){var a=o(),l=r.useRef(),s=r.useRef();function i(){var t,r=void 0!==e.speed,n=e.translateX,o=e.translateY;return r&&"horizontal"==(null==a?void 0:a.scrollAxis)&&(n=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),r&&"vertical"==(null==a?void 0:a.scrollAxis)&&(o=[10*(e.speed||0)+"px",-10*(e.speed||0)+"px"]),{elInner:l.current,elOuter:s.current,props:(t={translateX:n,translateY:o,disabled:e.disabled,rotate:e.rotate,rotateX:e.rotateX,rotateY:e.rotateY,rotateZ:e.rotateZ,scale:e.scale,scaleX:e.scaleX,scaleY:e.scaleY,scaleZ:e.scaleZ,opacity:e.opacity,easing:e.easing,rootMargin:e.rootMargin,shouldStartAnimationInitialInView:e.shouldStartAnimationInitialInView,onProgressChange:e.onProgressChange,onEnter:e.onEnter,onExit:e.onExit,startScroll:e.startScroll,endScroll:e.endScroll},Object.keys(t).forEach((function(e){return void 0===t[e]?delete t[e]:{}})),t)}}!function(e){r.useEffect((function(){if(!("undefined"==typeof window||e||e instanceof t.ParallaxController))throw new Error("Must wrap your application's <Parallax /> components in a <ParallaxProvider />.")}),[e])}(a);var c=r.useState(),d=c[0],u=c[1];return r.useEffect((function(){var e=null==a?void 0:a.createElement(i());return u(e),function(){e&&(null==a||a.removeElementById(e.id))}}),[]),r.useEffect((function(){d&&(e.disabled?null==a||a.resetElementStyles(d):null==a||a.updateElementPropsById(d.id,i().props))}),[e.disabled,e.translateX,e.translateY,e.rotate,e.rotateX,e.rotateY,e.rotateZ,e.scale,e.scaleX,e.scaleY,e.scaleZ,e.speed,e.opacity,e.easing,e.rootMargin,e.onProgressChange,e.onEnter,e.onExit]),n.createElement(e.tag,{className:e.className,ref:s,style:e.style},n.createElement(e.tagInner,{className:e.innerClassName,ref:l,style:e.styleInner},e.children))}function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}l.defaultProps={disabled:!1,tagInner:"div",tag:"div"};var c={position:"relative",overflow:"hidden",width:"100%",height:"50vh"},d={position:"absolute",top:0,right:0,bottom:0,left:0},u=function(e){var t=e.children,r=e.className,a=e.layers,o=e.disabled;return n.createElement("div",{style:s({},c,e.style),className:"parallax-banner"+(r?" "+r:"")},a.map((function(e,t){var r=e.speed,a=e.children,i=e.expanded,c=void 0===i||i,u=e.image,p=e.props,f=void 0===p?{}:p,v=f.style||{},x=f.className||"";delete f.style,delete f.className;var y="parallax-banner-layer-"+t+(x?" "+x:""),h=c?{top:10*Math.abs(r)*-1+"px",bottom:10*Math.abs(r)*-1+"px"}:{};return n.createElement(l,{key:"layer-"+t,speed:r,styleInner:d,style:d,disabled:o},n.createElement("div",Object.assign({className:y,style:s({},u?{backgroundImage:"url("+u+")",backgroundPosition:"center",backgroundSize:"cover"}:{},d,h,v)},f),a))})),t)};u.defaultProps={disabled:!1};var p=function(e){var r,o;function l(r){var n;return(n=e.call(this,r)||this).controller="undefined"==typeof window?null:t.ParallaxController.init({scrollAxis:r.scrollAxis,scrollContainer:r.scrollContainer}),n}o=e,(r=l).prototype=Object.create(o.prototype),r.prototype.constructor=r,i(r,o);var s=l.prototype;return s.componentDidUpdate=function(e){e.scrollContainer!==this.props.scrollContainer&&this.controller.updateScrollContainer(this.props.scrollContainer)},s.componentWillUnmount=function(){this.controller=this.controller.destroy()},s.render=function(){return n.createElement(a.Provider,{value:this.controller},this.props.children)},l}(r.Component);p.defaultProps={scrollAxis:t.ScrollAxis.vertical},Object.defineProperty(exports,"EasingPreset",{enumerable:!0,get:function(){return t.EasingPreset}}),exports.Parallax=l,exports.ParallaxBanner=u,exports.ParallaxContext=a,exports.ParallaxProvider=p,exports.useController=o;
 //# sourceMappingURL=react-scroll-parallax.cjs.production.min.js.map

dist/react-scroll-parallax.esm.js

@@ -0,3 +1,4 @@
+import { ParallaxController, ScrollAxis } from 'parallax-controller';
+export { EasingPreset } from 'parallax-controller';
 import React, { useContext, useEffect, useRef, useState, Component } from 'react';
-import { ParallaxController, ScrollAxis } from 'parallax-controller';
 
@@ -67,5 +68,5 @@ var ParallaxContext = /*#__PURE__*/React.createContext(null);
       props: removeUndefinedObjectKeys({
-        disabled: props.disabled,
         translateX: translateX,
         translateY: translateY,
+        disabled: props.disabled,
         rotate: props.rotate,
@@ -72,0 +73,0 @@ rotateX: props.rotateX,

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "3.0.0-alpha.18",
+  "version": "3.0.0-alpha.19",
   "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
@@ -77,3 +77,3 @@ "repository": {
   "dependencies": {
-    "parallax-controller": "^0.1.34"
+    "parallax-controller": "^0.1.35"
   },
@@ -80,0 +80,0 @@ "devDependencies": {

src/components/Parallax/types.ts

@@ -1,4 +0,4 @@
-import { RootMarginShape, ValidEasingPresets } from 'parallax-controller';
+import { ParallaxElementConfig } from 'parallax-controller';
 
-export interface ParallaxProps {
+export interface ParallaxProps extends ParallaxElementConfig {
   /**
@@ -14,143 +14,2 @@ * A number to slowdown `n < 0` or speed up `n > 0` the scroll speed of an element
   /**
-   * 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.
@@ -164,6 +23,2 @@ */
   /**
-   * Disables parallax effects on individual elements when true.
-   */
-  disabled?: boolean;
-  /**
    * Style object to be added to the innermost parallax element.
@@ -184,25 +39,2 @@ */
   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;
 }

src/index.ts

@@ -0,1 +1,3 @@
+import { EasingPreset, EffectNumber, EffectString } from 'parallax-controller';
+
 import { Parallax } from './components/Parallax';
@@ -6,2 +8,10 @@ import { ParallaxBanner } from './components/ParallaxBanner';
 export { useController } from './hooks/useController';
-export { Parallax, ParallaxBanner, ParallaxProvider, ParallaxContext };
+export {
+  Parallax,
+  ParallaxBanner,
+  ParallaxProvider,
+  ParallaxContext,
+  EasingPreset,
+  EffectNumber,
+  EffectString,
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

123394

decreased by-6.25%

Lines of code

1661

decreased by-15.34%

Dependency changes

• Updatedparallax-controller@^0.1.35