react-scroll-parallax - npm Package Compare versions

Comparing version 3.0.0-alpha.20 to 3.0.0-alpha.21

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

@@ -90,6 +90,8 @@ 'use strict';
         onProgressChange: props.onProgressChange,
+        onChange: props.onChange,
         onEnter: props.onEnter,
         onExit: props.onExit,
         startScroll: props.startScroll,
-        endScroll: props.endScroll
+        endScroll: props.endScroll,
+        targetElement: props.targetElement
       })
@@ -122,3 +124,3 @@ };
     }
-  }, [props.disabled, props.translateX, props.translateY, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.speed, props.opacity, props.easing, props.rootMargin, props.onProgressChange, props.onEnter, props.onExit]);
+  }, [props.disabled, props.translateX, props.translateY, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.speed, props.opacity, props.easing, props.rootMargin, props.onProgressChange, props.onChange, props.onEnter, props.onExit, props.targetElement]);
   var Outer = props.tag;
@@ -125,0 +127,0 @@ var Inner = props.innerTag;

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

@@ -1,2 +0,2 @@
-"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.innerTag,{className:e.innerClassName,ref:l,style:e.innerStyle},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,innerTag:"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,innerStyle: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;
+"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,onChange:e.onChange,onEnter:e.onEnter,onExit:e.onExit,startScroll:e.startScroll,endScroll:e.endScroll,targetElement:e.targetElement},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.onChange,e.onEnter,e.onExit,e.targetElement]),n.createElement(e.tag,{className:e.className,ref:s,style:e.style},n.createElement(e.innerTag,{className:e.innerClassName,ref:l,style:e.innerStyle},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,innerTag:"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,innerStyle: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

@@ -84,6 +84,8 @@ import { ParallaxController, ScrollAxis } from 'parallax-controller';
         onProgressChange: props.onProgressChange,
+        onChange: props.onChange,
         onEnter: props.onEnter,
         onExit: props.onExit,
         startScroll: props.startScroll,
-        endScroll: props.endScroll
+        endScroll: props.endScroll,
+        targetElement: props.targetElement
       })
@@ -116,3 +118,3 @@ };
     }
-  }, [props.disabled, props.translateX, props.translateY, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.speed, props.opacity, props.easing, props.rootMargin, props.onProgressChange, props.onEnter, props.onExit]);
+  }, [props.disabled, props.translateX, props.translateY, props.rotate, props.rotateX, props.rotateY, props.rotateZ, props.scale, props.scaleX, props.scaleY, props.scaleZ, props.speed, props.opacity, props.easing, props.rootMargin, props.onProgressChange, props.onChange, props.onEnter, props.onExit, props.targetElement]);
   var Outer = props.tag;
@@ -119,0 +121,0 @@ var Inner = props.innerTag;

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "3.0.0-alpha.20",
+  "version": "3.0.0-alpha.21",
   "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.35"
+    "parallax-controller": "^0.1.36"
   },
@@ -83,9 +83,8 @@ "devDependencies": {
     "@size-limit/preset-small-lib": "^6.0.4",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addon-essentials": "^6.4.9",
+    "@storybook/addon-links": "^6.4.9",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.3.12",
+    "@storybook/addons": "^6.4.9",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.3.12",
+    "@storybook/react": "^6.4.9",
     "@testing-library/react": "^12.1.2",
@@ -92,0 +91,0 @@ "@types/jest": "^27.0.3",

README.md

@@ -101,18 +101,12 @@ # React Scroll Parallax
 
-**Warnings:**
+1. This lib was first designed to be used on elements that scroll naturally with the page. If you use `fixed` positioning you will likely want to set the `startScroll` and `endScroll` values manually, or use a `targetElement` to indicate scroll progress.
+2. Scroll state and positions of elements on the page are cached for performance reasons. This means that if the page height changes (most likely from [images loading](#example-usage-of-context)) after components mount the controller won't properly determine when the elements are in view. To correct this you can call the `parallaxController.update()` method from any child component of the `<ParallaxProvider />` via context. More details on how here: [Parallax Controller Context](#parallax-controller-context).
 
-1. This lib was designed to be used on `relative` or `absolute` positioned elements that scroll naturally with the page. If you use `fixed` positioning on either the element itself or the parent you will encounter issues. More on that in [troubleshooting](#troubleshooting).
-2. Scroll state and positions of elements on the page are cached for performance reasons. This means that if the page height changes (most likely from [images loading](#example-usage-of-context)) after `<Parallax />` components are mounted the controller won't properly determine when the elements are in view. To correct this you can call the `parallaxController.update()` method from any child component of the `<ParallaxProvider />` via context and the `withController()` HOC. More details on how here: [Parallax Controller Context](#parallax-controller-context).
-
 ## Troubleshooting
 
-If you're encountering issues like the parallax element jumping around or becoming stuck, there's a few likely culprits. Since this lib caches important positioning states it's possible for these to be outdated and incorrect. The most likely cause for this type of problem is the result of images loading and increasing the height of an element and/or the page. This can be fixed easily by [updating the cache](#example-usage-of-context). Another likely issue is the CSS positioning applied to the parent or parallax element itself is `fixed`. Fixed positioning parallax elements is currently not supported and may appear to work in some cases but break in others. Avoid using `position: fixed` and instead use `static`, `relative` or `absolute`, which this lib was designed to support. If none of these are relevant and you still have trouble please post an issue with your code or a demo that reproduces the problem.
+If you're encountering issues like the parallax element jumping around or becoming stuck, there's a few likely culprits. Since this lib caches important positioning states it's possible for these to be outdated and incorrect. The most likely cause for this type of problem is the result of images loading and increasing the height of an element and/or the page. This can be fixed easily by [updating the cache](#example-usage-of-context).
 
-## Browser Support
-
-React scroll parallax should support the last two versions of all major browsers and has been tested on desktop Chrome, Firefox, Safari, Edge and IE11, as well as the following for mobile: iOS 9, iOS 10, Android 4. While this lib may work on mobile browsers I do not recommend it in most cases for UX reasons. If you encounter any errors for browsers that should be supported please post an issue.
-
 ## Optimizations to Reduce Jank
 
-Considerations to have been taken to reduce jank -- [please read more here](https://github.com/jscottsmith/parallax-controller#optimizations-to-reduce-jank) on how this is done
+Considerations have been taken to reduce jank -- [please read more here](https://github.com/jscottsmith/parallax-controller#optimizations-to-reduce-jank) on how this is done
 
@@ -119,0 +113,0 @@ ### **PSA**

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

Improved metrics

Total package byte prevSize

123483

increased by0.17%

Dev dependency count

29

decreased by-3.33%

Lines of code

1665

increased by0.48%

Worsened metrics

Number of lines in readme file

123

decreased by-4.65%

Dependency changes

• Updatedparallax-controller@^0.1.36