parallax-controller - npm Package Compare versions

Comparing version 0.1.23 to 0.1.24

dist/classes/ParallaxController.d.ts

@@ -35,2 +35,3 @@ import { View } from './View';
     private _removeListeners;
+    private _getScrollPosition;
     /**
@@ -37,0 +38,0 @@ * Window scroll handler sets scroll position

dist/parallax-controller.cjs.development.js

@@ -635,6 +635,6 @@ 'use strict';
 
-    var x = this._hasScrollContainer ? // @ts-expect-error
-    this.viewEl.scrollLeft : window.pageXOffset;
-    var y = this._hasScrollContainer ? // @ts-expect-error
-    this.viewEl.scrollTop : window.pageYOffset;
+    var _this$_getScrollPosit = this._getScrollPosition(),
+        x = _this$_getScrollPosit[0],
+        y = _this$_getScrollPosit[1];
+
     this.scroll = new Scroll(x, y);
@@ -678,3 +678,3 @@ this.view = new View({
 
-    ['_addListeners', '_removeListeners', '_handleScroll', '_handleResize', '_updateAllElements', '_updateElementPosition', '_setViewSize', 'getElements', 'createElement', 'removeElementById', 'updateElementPropsById', 'resetElementStyles', 'update', 'updateScrollContainer', 'destroy'].forEach(function (method) {
+    ['_addListeners', '_removeListeners', '_getScrollPosition', '_handleScroll', '_handleResize', '_updateAllElements', '_updateElementPosition', '_setViewSize', 'getElements', 'createElement', 'removeElementById', 'updateElementPropsById', 'resetElementStyles', 'update', 'updateScrollContainer', 'destroy'].forEach(function (method) {
       // @ts-expect-error
@@ -695,2 +695,12 @@ _this[method] = _this[method].bind(_this);
     window.removeEventListener('resize', this._handleResize, false);
+  };
+
+  _proto._getScrollPosition = function _getScrollPosition() {
+    // Save current scroll
+    // Supports IE 9 and up.
+    var nx = this._hasScrollContainer ? // @ts-expect-error
+    this.viewEl.scrollLeft : window.pageXOffset;
+    var ny = this._hasScrollContainer ? // @ts-expect-error
+    this.viewEl.scrollTop : window.pageYOffset;
+    return [nx, ny];
   }
@@ -704,8 +714,6 @@ /**
   _proto._handleScroll = function _handleScroll() {
-    // Save current scroll
-    // Supports IE 9 and up.
-    var nx = this._hasScrollContainer ? // @ts-expect-error
-    this.viewEl.scrollLeft : window.pageXOffset;
-    var ny = this._hasScrollContainer ? // @ts-expect-error
-    this.viewEl.scrollTop : window.pageYOffset;
+    var _this$_getScrollPosit2 = this._getScrollPosition(),
+        nx = _this$_getScrollPosit2[0],
+        ny = _this$_getScrollPosit2[1];
+
     this.scroll.setScroll(nx, ny); // Only called if the last animation request has been
@@ -751,2 +759,9 @@ // completed and there are parallax elements to update
         if (updateCache) {
+          // Save latest scroll
+          var _this2$_getScrollPosi = _this2._getScrollPosition(),
+              nx = _this2$_getScrollPosi[0],
+              ny = _this2$_getScrollPosi[1];
+
+          _this2.scroll.setScroll(nx, ny);
+
           element.setCachedAttributes(_this2.view, _this2.scroll);
@@ -753,0 +768,0 @@ }

dist/parallax-controller.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=(t=require("bezier-easing"))&&"object"==typeof t&&"default"in t?t.default:t,i=[{value:0,unit:""},{value:0,unit:""}],s=function(){function t(t){this.totalDistY=t.view.height+t.rect.height,this.totalDistX=t.view.width+t.rect.width,this.top=t.rect.top,this.bottom=t.rect.bottom,this.left=t.rect.left,this.right=t.rect.right,t.shouldUpdateBoundsWithTranslate&&this._setBoundsWithTranslations(t.rect,t.view,t.translate)}return t.prototype._setBoundsWithTranslations=function(t,e,s){var n=s.translateX||i,r=n[0],o=n[1],a=s.translateY||i,l=a[0],h=a[1],u=l.value,c=h.value;if("%"===h.unit&&"%"===l.unit){var d=t.height/100;u=l.value*d,c=h.value*d}var p=r.value,f=o.value;if("%"===o.unit&&"%"===r.unit){var v=t.width/100;p=r.value*v,f=o.value*v}var g=Math.abs(u)+Math.abs(c);this.totalDistY=e.height+t.height+g;var w=e.height+t.height+(c>u?-1*g:g),m=Math.abs(p)+Math.abs(f);this.totalDistX=e.width+t.width+m;var E=t.originTotalDistY/w,x=t.originTotalDistX/(e.width+t.width+(f>p?-1*m:m));this.top=t.top,this.bottom=t.bottom,u<0&&(this.top=this.top+u*E),c>0&&(this.bottom=this.bottom+c*E),this.left=t.left,this.right=t.right,p<0&&(this.left=this.left+p*x),f>0&&(this.right=this.right+f*x)},t}();function n(){return(n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t}).apply(this,arguments)}var r,o,a,l,h=function(){function t(t){var e=t.el.getBoundingClientRect();if(t.view.scrollContainer){var i=t.view.scrollContainer.getBoundingClientRect();e=n({},e,{top:e.top-i.top,right:e.right-i.left,bottom:e.bottom-i.top,left:e.left-i.left})}this.height=t.el.offsetHeight,this.width=t.el.offsetWidth,this.left=e.left+t.scroll.x,this.right=e.right+t.scroll.x,this.top=e.top+t.scroll.y,this.bottom=e.bottom+t.scroll.y,this.originTotalDistY=t.view.height+this.height,this.originTotalDistX=t.view.width+this.width,t.rootMargin&&this._setRectWithRootMargin(t.rootMargin)}return t.prototype._setRectWithRootMargin=function(t){var e=t.top+t.bottom,i=t.left+t.right;this.top-=t.top,this.right+=t.right,this.bottom+=t.bottom,this.left-=t.left,this.height+=e,this.width+=i,this.originTotalDistY+=e,this.originTotalDistX+=i},t}();(r=exports.ValidCSSEffects||(exports.ValidCSSEffects={})).translateX="translateX",r.translateY="translateY",r.rotate="rotate",r.rotateX="rotateX",r.rotateY="rotateY",r.rotateZ="rotateZ",r.scale="scale",r.scaleX="scaleX",r.scaleY="scaleY",r.scaleZ="scaleZ",r.opacity="opacity",(o=exports.Units||(exports.Units={})).px="px",o["%"]="%",(a=exports.RotationUnits||(exports.RotationUnits={})).deg="deg",a.turn="turn",a.rad="rad",(exports.ScaleUnits||(exports.ScaleUnits={}))[""]="",(l=exports.ScrollAxis||(exports.ScrollAxis={})).vertical="vertical",l.horizontal="horizontal";var u=[exports.ScaleUnits[""],exports.Units.px,exports.Units["%"],exports.RotationUnits.deg,exports.RotationUnits.turn,exports.RotationUnits.rad];function c(t,e){void 0===e&&(e=exports.Units["%"]);var i={value:0,unit:e};if(void 0===t)return i;if("number"!=typeof t&&"string"!=typeof t)throw new Error("Invalid value provided. Must provide a value as a string or number");if(t=String(t),i.value=parseFloat(t),i.unit=t.match(/[\d.\-\+]*\s*(.*)/)[1]||e,!u.includes(i.unit))throw new Error("Invalid unit provided.");return i}var d=Object.values(exports.ValidCSSEffects),p={translateX:"%",translateY:"%",rotate:"deg",rotateX:"deg",rotateY:"deg",rotateZ:"deg",scale:"",scaleX:"",scaleY:"",scaleZ:"",opacity:""};function f(t){var e={};return d.forEach((function(i){var s,n;if(void 0!==(null==t||null==(s=t[i])?void 0:s[0])&&void 0!==(null==t||null==(n=t[i])?void 0:n[1])){var r,o,a=p[i];if(e[i]=[c(null==t||null==(r=t[i])?void 0:r[0],a),c(null==t||null==(o=t[i])?void 0:o[1],a)],e[i][0].unit!==e[i][1].unit)throw new Error("Must provide matching units for the min and max offset values of each axis.")}})),e}function v(t,e,i,s){var n=t-s,r=e-s;return n>=0&&n<=i||r>=0&&r<=i||n<=0&&r>=i}function g(t,e,i,s,n){var r=(-1*(t-s)+i)/e;return n&&(r=n(r)),r}function w(t,e,i,s,n){return(i-e)*(t-s)/(n-s)+e}function m(t,e){var i,s,n;return{value:w(e,(null==t||null==(i=t[0])?void 0:i.value)||0,(null==t||null==(s=t[1])?void 0:s.value)||0,0,1),unit:null==t||null==(n=t[0])?void 0:n.unit}}var E=Object.values(exports.ValidCSSEffects).filter((function(t){return"opacity"!==t}));function x(t,e,i){if(i){var s=function(t,e){return E.reduce((function(i,s){var n=t[s]&&m(t[s],e);return void 0===n||void 0===n.value||void 0===n.unit?i:i+(s+"(")+n.value+n.unit+")"}),"")}(t,e),n=function(t,e){var i=t.opacity&&m(t.opacity,e);return void 0===i||void 0===i.value||void 0===i.unit?"":""+i.value}(t,e);i.style.transform=s,i.style.opacity=n}}function _(t){var e=t.elInner;e&&(e.style.transform="")}var S=0;function b(){return++S}var y={ease:[.25,.1,.25,1],easeIn:[.42,0,1,1],easeOut:[0,0,.58,1],easeInOut:[.42,0,.58,1],easeInQuad:[.55,.085,.68,.53],easeInCubic:[.55,.055,.675,.19],easeInQuart:[.895,.03,.685,.22],easeInQuint:[.755,.05,.855,.06],easeInSine:[.47,0,.745,.715],easeInExpo:[.95,.05,.795,.035],easeInCirc:[.6,.04,.98,.335],easeOutQuad:[.25,.46,.45,.94],easeOutCubic:[.215,.61,.355,1],easeOutQuart:[.165,.84,.44,1],easeOutQuint:[.23,1,.32,1],easeOutSine:[.39,.575,.565,1],easeOutExpo:[.19,1,.22,1],easeOutCirc:[.075,.82,.165,1],easeInOutQuad:[.455,.03,.515,.955],easeInOutCubic:[.645,.045,.355,1],easeInOutQuart:[.77,0,.175,1],easeInOutQuint:[.86,0,.07,1],easeInOutSine:[.445,.05,.55,.95],easeInOutExpo:[1,0,0,1],easeInOutCirc:[.785,.135,.15,.86],easeInBack:[.6,-.28,.735,.045],easeOutBack:[.175,.885,.32,1.275],easeInOutBack:[.68,-.55,.265,1.55]},I=function(){function t(t){this.elInner=t.elInner,this.elOuter=t.elOuter,this.props=t.props,this.scrollAxis=t.scrollAxis,this.id=b(),this.effects=f(this.props),this.isInView=null,this.progress=0,this._setElementEasing(t.props.easing),this.updatePosition=t.scrollAxis===exports.ScrollAxis.vertical?this._updatePositionVertical:this._updatePositionHorizontal}var i=t.prototype;return i.updateProps=function(t){return this.props=n({},this.props,t),this.effects=f(t),this._setElementEasing(t.easing),this},i.setCachedAttributes=function(t,e){return this.elOuter?(this.rect=new h({el:this.elOuter,rootMargin:this.props.rootMargin,view:t,scroll:e}),this.bounds=new s({view:t,translate:{translateX:this.effects.translateX,translateY:this.effects.translateY},shouldUpdateBoundsWithTranslate:!(this.props.rootMargin||!this.effects.translateX&&!this.effects.translateY),rect:this.rect}),this):this},i._updateElementIsInView=function(t){t!==this.isInView&&(t?this.props.onEnter&&this.props.onEnter():this.props.onExit&&this.props.onExit()),this.isInView=t},i._updateElementProgress=function(t){this.progress=t,this.props.onProgressChange&&this.props.onProgressChange(this.progress),x(this.effects,this.progress,this.elInner)},i._setElementEasing=function(t){if(Array.isArray(t)&&(this.easing=e(t[0],t[1],t[2],t[3])),"string"==typeof t&&void 0!==y[t]){var i=y[t];this.easing=e(i[0],i[1],i[2],i[3])}},i._updatePositionHorizontal=function(t,e){if(!this.bounds||!this.rect||!this.elInner)return this;var i=v(this.bounds.left,this.bounds.right,t.width,e.x);if(this._updateElementIsInView(i),!i)return this;var s=g(this.rect.left,this.rect.originTotalDistX,t.width,e.x,this.easing);return this._updateElementProgress(s),this},i._updatePositionVertical=function(t,e){if(!this.bounds||!this.rect||!this.elInner)return this;var i=v(this.bounds.top,this.bounds.bottom,t.height,e.y);if(this._updateElementIsInView(i),!this.isInView)return this;var s=g(this.rect.top,this.rect.originTotalDistY,t.height,e.y,this.easing);return this._updateElementProgress(s),this},t}(),C=function(){function t(t){var e=t.width,i=t.height;this.scrollContainer=t.scrollContainer,this.width=e,this.height=i}return t.prototype.setSize=function(t,e){return this.width=t,this.height=e,this},t}(),O=function(){function t(t,e){this.x=t,this.y=e}return t.prototype.setScroll=function(t,e){return this.x=t,this.y=e,this},t}();function P(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(t){}return t}var A=function(){function t(t){var e=t.scrollAxis,i=void 0===e?exports.ScrollAxis.vertical:e,s=t.scrollContainer;this.scrollAxis=i,this.elements=[],this._hasScrollContainer=!!s,this.viewEl=null!=s?s:window;var n=this._hasScrollContainer?this.viewEl.scrollLeft:window.pageXOffset,r=this._hasScrollContainer?this.viewEl.scrollTop:window.pageYOffset;this.scroll=new O(n,r),this.view=new C({width:0,height:0,scrollContainer:this._hasScrollContainer?s:void 0}),this._ticking=!1,this._supportsPassive=P(),this._bindAllMethods(),this._addListeners(this.viewEl),this._setViewSize()}t.init=function(e){if("undefined"==typeof window)throw new Error("Looks like ParallaxController.init() was called on the server. This method must be called on the client.");return new t(e)};var e=t.prototype;return e._bindAllMethods=function(){var t=this;["_addListeners","_removeListeners","_handleScroll","_handleResize","_updateAllElements","_updateElementPosition","_setViewSize","getElements","createElement","removeElementById","updateElementPropsById","resetElementStyles","update","updateScrollContainer","destroy"].forEach((function(e){t[e]=t[e].bind(t)}))},e._addListeners=function(t){t.addEventListener("scroll",this._handleScroll,!!this._supportsPassive&&{passive:!0}),window.addEventListener("resize",this._handleResize,!1)},e._removeListeners=function(t){t.removeEventListener("scroll",this._handleScroll,!1),window.removeEventListener("resize",this._handleResize,!1)},e._handleScroll=function(){var t=this._hasScrollContainer?this.viewEl.scrollLeft:window.pageXOffset,e=this._hasScrollContainer?this.viewEl.scrollTop:window.pageYOffset;this.scroll.setScroll(t,e),!this._ticking&&this.elements.length>0&&(this._ticking=!0,window.requestAnimationFrame(this._updateAllElements))},e._handleResize=function(){this._setViewSize(),this._updateAllElements({updateCache:!0})},e._updateAllElements=function(t){var e=this,i=(void 0===t?{}:t).updateCache;this.elements&&this.elements.forEach((function(t){e._updateElementPosition(t),i&&t.setCachedAttributes(e.view,e.scroll)})),this._ticking=!1},e._updateElementPosition=function(t){t.props.disabled||t.updatePosition(this.view,this.scroll)},e._setViewSize=function(){if(this._hasScrollContainer)return this.view.setSize(this.viewEl.offsetWidth,this.viewEl.offsetHeight);var t=document.documentElement,e=window.innerWidth||t.clientWidth,i=window.innerHeight||t.clientHeight;return this.view.setSize(e,i)},e.getElements=function(){return this.elements},e.createElement=function(t){var e=new I(n({},t,{scrollAxis:this.scrollAxis}));return e.setCachedAttributes(this.view,this.scroll),this.elements=this.elements?[].concat(this.elements,[e]):[e],this._updateElementPosition(e),e},e.removeElementById=function(t){this.elements&&(this.elements=this.elements.filter((function(e){return e.id!==t})))},e.updateElementPropsById=function(t,e){this.elements&&(this.elements=this.elements.map((function(i){return i.id===t?i.updateProps(e):i}))),this.update()},e.resetElementStyles=function(t){_(t)},e.update=function(){this._setViewSize(),this._updateAllElements({updateCache:!0})},e.updateScrollContainer=function(t){this._removeListeners(this.viewEl),this.viewEl=t,this._hasScrollContainer=!!t,this.view=new C({width:0,height:0,scrollContainer:t}),this._setViewSize(),this._addListeners(this.viewEl),this._updateAllElements({updateCache:!0})},e.destroy=function(){this._removeListeners(this.viewEl),this.elements&&this.elements.forEach((function(t){return _(t)})),this.elements=void 0},t}();exports.Bounds=s,exports.Element=I,exports.ParallaxController=A,exports.Rect=h,exports.Scroll=O,exports.View=C,exports.createId=b,exports.getProgressAmount=g,exports.isElementInView=v,exports.parseElementTransitionEffects=f,exports.parseValueAndUnit=c,exports.resetStyles=_,exports.scaleBetween=w,exports.scaleEffectByProgress=m,exports.setElementStyles=x,exports.testForPassiveScroll=P;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e=(t=require("bezier-easing"))&&"object"==typeof t&&"default"in t?t.default:t,i=[{value:0,unit:""},{value:0,unit:""}],s=function(){function t(t){this.totalDistY=t.view.height+t.rect.height,this.totalDistX=t.view.width+t.rect.width,this.top=t.rect.top,this.bottom=t.rect.bottom,this.left=t.rect.left,this.right=t.rect.right,t.shouldUpdateBoundsWithTranslate&&this._setBoundsWithTranslations(t.rect,t.view,t.translate)}return t.prototype._setBoundsWithTranslations=function(t,e,s){var n=s.translateX||i,r=n[0],o=n[1],l=s.translateY||i,a=l[0],h=l[1],u=a.value,c=h.value;if("%"===h.unit&&"%"===a.unit){var d=t.height/100;u=a.value*d,c=h.value*d}var p=r.value,f=o.value;if("%"===o.unit&&"%"===r.unit){var v=t.width/100;p=r.value*v,f=o.value*v}var g=Math.abs(u)+Math.abs(c);this.totalDistY=e.height+t.height+g;var w=e.height+t.height+(c>u?-1*g:g),m=Math.abs(p)+Math.abs(f);this.totalDistX=e.width+t.width+m;var E=t.originTotalDistY/w,_=t.originTotalDistX/(e.width+t.width+(f>p?-1*m:m));this.top=t.top,this.bottom=t.bottom,u<0&&(this.top=this.top+u*E),c>0&&(this.bottom=this.bottom+c*E),this.left=t.left,this.right=t.right,p<0&&(this.left=this.left+p*_),f>0&&(this.right=this.right+f*_)},t}();function n(){return(n=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t}).apply(this,arguments)}var r,o,l,a,h=function(){function t(t){var e=t.el.getBoundingClientRect();if(t.view.scrollContainer){var i=t.view.scrollContainer.getBoundingClientRect();e=n({},e,{top:e.top-i.top,right:e.right-i.left,bottom:e.bottom-i.top,left:e.left-i.left})}this.height=t.el.offsetHeight,this.width=t.el.offsetWidth,this.left=e.left+t.scroll.x,this.right=e.right+t.scroll.x,this.top=e.top+t.scroll.y,this.bottom=e.bottom+t.scroll.y,this.originTotalDistY=t.view.height+this.height,this.originTotalDistX=t.view.width+this.width,t.rootMargin&&this._setRectWithRootMargin(t.rootMargin)}return t.prototype._setRectWithRootMargin=function(t){var e=t.top+t.bottom,i=t.left+t.right;this.top-=t.top,this.right+=t.right,this.bottom+=t.bottom,this.left-=t.left,this.height+=e,this.width+=i,this.originTotalDistY+=e,this.originTotalDistX+=i},t}();(r=exports.ValidCSSEffects||(exports.ValidCSSEffects={})).translateX="translateX",r.translateY="translateY",r.rotate="rotate",r.rotateX="rotateX",r.rotateY="rotateY",r.rotateZ="rotateZ",r.scale="scale",r.scaleX="scaleX",r.scaleY="scaleY",r.scaleZ="scaleZ",r.opacity="opacity",(o=exports.Units||(exports.Units={})).px="px",o["%"]="%",(l=exports.RotationUnits||(exports.RotationUnits={})).deg="deg",l.turn="turn",l.rad="rad",(exports.ScaleUnits||(exports.ScaleUnits={}))[""]="",(a=exports.ScrollAxis||(exports.ScrollAxis={})).vertical="vertical",a.horizontal="horizontal";var u=[exports.ScaleUnits[""],exports.Units.px,exports.Units["%"],exports.RotationUnits.deg,exports.RotationUnits.turn,exports.RotationUnits.rad];function c(t,e){void 0===e&&(e=exports.Units["%"]);var i={value:0,unit:e};if(void 0===t)return i;if("number"!=typeof t&&"string"!=typeof t)throw new Error("Invalid value provided. Must provide a value as a string or number");if(t=String(t),i.value=parseFloat(t),i.unit=t.match(/[\d.\-\+]*\s*(.*)/)[1]||e,!u.includes(i.unit))throw new Error("Invalid unit provided.");return i}var d=Object.values(exports.ValidCSSEffects),p={translateX:"%",translateY:"%",rotate:"deg",rotateX:"deg",rotateY:"deg",rotateZ:"deg",scale:"",scaleX:"",scaleY:"",scaleZ:"",opacity:""};function f(t){var e={};return d.forEach((function(i){var s,n;if(void 0!==(null==t||null==(s=t[i])?void 0:s[0])&&void 0!==(null==t||null==(n=t[i])?void 0:n[1])){var r,o,l=p[i];if(e[i]=[c(null==t||null==(r=t[i])?void 0:r[0],l),c(null==t||null==(o=t[i])?void 0:o[1],l)],e[i][0].unit!==e[i][1].unit)throw new Error("Must provide matching units for the min and max offset values of each axis.")}})),e}function v(t,e,i,s){var n=t-s,r=e-s;return n>=0&&n<=i||r>=0&&r<=i||n<=0&&r>=i}function g(t,e,i,s,n){var r=(-1*(t-s)+i)/e;return n&&(r=n(r)),r}function w(t,e,i,s,n){return(i-e)*(t-s)/(n-s)+e}function m(t,e){var i,s,n;return{value:w(e,(null==t||null==(i=t[0])?void 0:i.value)||0,(null==t||null==(s=t[1])?void 0:s.value)||0,0,1),unit:null==t||null==(n=t[0])?void 0:n.unit}}var E=Object.values(exports.ValidCSSEffects).filter((function(t){return"opacity"!==t}));function _(t,e,i){if(i){var s=function(t,e){return E.reduce((function(i,s){var n=t[s]&&m(t[s],e);return void 0===n||void 0===n.value||void 0===n.unit?i:i+(s+"(")+n.value+n.unit+")"}),"")}(t,e),n=function(t,e){var i=t.opacity&&m(t.opacity,e);return void 0===i||void 0===i.value||void 0===i.unit?"":""+i.value}(t,e);i.style.transform=s,i.style.opacity=n}}function x(t){var e=t.elInner;e&&(e.style.transform="")}var S=0;function b(){return++S}var y={ease:[.25,.1,.25,1],easeIn:[.42,0,1,1],easeOut:[0,0,.58,1],easeInOut:[.42,0,.58,1],easeInQuad:[.55,.085,.68,.53],easeInCubic:[.55,.055,.675,.19],easeInQuart:[.895,.03,.685,.22],easeInQuint:[.755,.05,.855,.06],easeInSine:[.47,0,.745,.715],easeInExpo:[.95,.05,.795,.035],easeInCirc:[.6,.04,.98,.335],easeOutQuad:[.25,.46,.45,.94],easeOutCubic:[.215,.61,.355,1],easeOutQuart:[.165,.84,.44,1],easeOutQuint:[.23,1,.32,1],easeOutSine:[.39,.575,.565,1],easeOutExpo:[.19,1,.22,1],easeOutCirc:[.075,.82,.165,1],easeInOutQuad:[.455,.03,.515,.955],easeInOutCubic:[.645,.045,.355,1],easeInOutQuart:[.77,0,.175,1],easeInOutQuint:[.86,0,.07,1],easeInOutSine:[.445,.05,.55,.95],easeInOutExpo:[1,0,0,1],easeInOutCirc:[.785,.135,.15,.86],easeInBack:[.6,-.28,.735,.045],easeOutBack:[.175,.885,.32,1.275],easeInOutBack:[.68,-.55,.265,1.55]},I=function(){function t(t){this.elInner=t.elInner,this.elOuter=t.elOuter,this.props=t.props,this.scrollAxis=t.scrollAxis,this.id=b(),this.effects=f(this.props),this.isInView=null,this.progress=0,this._setElementEasing(t.props.easing),this.updatePosition=t.scrollAxis===exports.ScrollAxis.vertical?this._updatePositionVertical:this._updatePositionHorizontal}var i=t.prototype;return i.updateProps=function(t){return this.props=n({},this.props,t),this.effects=f(t),this._setElementEasing(t.easing),this},i.setCachedAttributes=function(t,e){return this.elOuter?(this.rect=new h({el:this.elOuter,rootMargin:this.props.rootMargin,view:t,scroll:e}),this.bounds=new s({view:t,translate:{translateX:this.effects.translateX,translateY:this.effects.translateY},shouldUpdateBoundsWithTranslate:!(this.props.rootMargin||!this.effects.translateX&&!this.effects.translateY),rect:this.rect}),this):this},i._updateElementIsInView=function(t){t!==this.isInView&&(t?this.props.onEnter&&this.props.onEnter():this.props.onExit&&this.props.onExit()),this.isInView=t},i._updateElementProgress=function(t){this.progress=t,this.props.onProgressChange&&this.props.onProgressChange(this.progress),_(this.effects,this.progress,this.elInner)},i._setElementEasing=function(t){if(Array.isArray(t)&&(this.easing=e(t[0],t[1],t[2],t[3])),"string"==typeof t&&void 0!==y[t]){var i=y[t];this.easing=e(i[0],i[1],i[2],i[3])}},i._updatePositionHorizontal=function(t,e){if(!this.bounds||!this.rect||!this.elInner)return this;var i=v(this.bounds.left,this.bounds.right,t.width,e.x);if(this._updateElementIsInView(i),!i)return this;var s=g(this.rect.left,this.rect.originTotalDistX,t.width,e.x,this.easing);return this._updateElementProgress(s),this},i._updatePositionVertical=function(t,e){if(!this.bounds||!this.rect||!this.elInner)return this;var i=v(this.bounds.top,this.bounds.bottom,t.height,e.y);if(this._updateElementIsInView(i),!this.isInView)return this;var s=g(this.rect.top,this.rect.originTotalDistY,t.height,e.y,this.easing);return this._updateElementProgress(s),this},t}(),C=function(){function t(t){var e=t.width,i=t.height;this.scrollContainer=t.scrollContainer,this.width=e,this.height=i}return t.prototype.setSize=function(t,e){return this.width=t,this.height=e,this},t}(),P=function(){function t(t,e){this.x=t,this.y=e}return t.prototype.setScroll=function(t,e){return this.x=t,this.y=e,this},t}();function O(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){t=!0}});window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(t){}return t}var A=function(){function t(t){var e=t.scrollAxis,i=void 0===e?exports.ScrollAxis.vertical:e,s=t.scrollContainer;this.scrollAxis=i,this.elements=[],this._hasScrollContainer=!!s,this.viewEl=null!=s?s:window;var n=this._getScrollPosition();this.scroll=new P(n[0],n[1]),this.view=new C({width:0,height:0,scrollContainer:this._hasScrollContainer?s:void 0}),this._ticking=!1,this._supportsPassive=O(),this._bindAllMethods(),this._addListeners(this.viewEl),this._setViewSize()}t.init=function(e){if("undefined"==typeof window)throw new Error("Looks like ParallaxController.init() was called on the server. This method must be called on the client.");return new t(e)};var e=t.prototype;return e._bindAllMethods=function(){var t=this;["_addListeners","_removeListeners","_getScrollPosition","_handleScroll","_handleResize","_updateAllElements","_updateElementPosition","_setViewSize","getElements","createElement","removeElementById","updateElementPropsById","resetElementStyles","update","updateScrollContainer","destroy"].forEach((function(e){t[e]=t[e].bind(t)}))},e._addListeners=function(t){t.addEventListener("scroll",this._handleScroll,!!this._supportsPassive&&{passive:!0}),window.addEventListener("resize",this._handleResize,!1)},e._removeListeners=function(t){t.removeEventListener("scroll",this._handleScroll,!1),window.removeEventListener("resize",this._handleResize,!1)},e._getScrollPosition=function(){return[this._hasScrollContainer?this.viewEl.scrollLeft:window.pageXOffset,this._hasScrollContainer?this.viewEl.scrollTop:window.pageYOffset]},e._handleScroll=function(){var t=this._getScrollPosition();this.scroll.setScroll(t[0],t[1]),!this._ticking&&this.elements.length>0&&(this._ticking=!0,window.requestAnimationFrame(this._updateAllElements))},e._handleResize=function(){this._setViewSize(),this._updateAllElements({updateCache:!0})},e._updateAllElements=function(t){var e=this,i=(void 0===t?{}:t).updateCache;this.elements&&this.elements.forEach((function(t){if(e._updateElementPosition(t),i){var s=e._getScrollPosition();e.scroll.setScroll(s[0],s[1]),t.setCachedAttributes(e.view,e.scroll)}})),this._ticking=!1},e._updateElementPosition=function(t){t.props.disabled||t.updatePosition(this.view,this.scroll)},e._setViewSize=function(){if(this._hasScrollContainer)return this.view.setSize(this.viewEl.offsetWidth,this.viewEl.offsetHeight);var t=document.documentElement,e=window.innerWidth||t.clientWidth,i=window.innerHeight||t.clientHeight;return this.view.setSize(e,i)},e.getElements=function(){return this.elements},e.createElement=function(t){var e=new I(n({},t,{scrollAxis:this.scrollAxis}));return e.setCachedAttributes(this.view,this.scroll),this.elements=this.elements?[].concat(this.elements,[e]):[e],this._updateElementPosition(e),e},e.removeElementById=function(t){this.elements&&(this.elements=this.elements.filter((function(e){return e.id!==t})))},e.updateElementPropsById=function(t,e){this.elements&&(this.elements=this.elements.map((function(i){return i.id===t?i.updateProps(e):i}))),this.update()},e.resetElementStyles=function(t){x(t)},e.update=function(){this._setViewSize(),this._updateAllElements({updateCache:!0})},e.updateScrollContainer=function(t){this._removeListeners(this.viewEl),this.viewEl=t,this._hasScrollContainer=!!t,this.view=new C({width:0,height:0,scrollContainer:t}),this._setViewSize(),this._addListeners(this.viewEl),this._updateAllElements({updateCache:!0})},e.destroy=function(){this._removeListeners(this.viewEl),this.elements&&this.elements.forEach((function(t){return x(t)})),this.elements=void 0},t}();exports.Bounds=s,exports.Element=I,exports.ParallaxController=A,exports.Rect=h,exports.Scroll=P,exports.View=C,exports.createId=b,exports.getProgressAmount=g,exports.isElementInView=v,exports.parseElementTransitionEffects=f,exports.parseValueAndUnit=c,exports.resetStyles=x,exports.scaleBetween=w,exports.scaleEffectByProgress=m,exports.setElementStyles=_,exports.testForPassiveScroll=O;
 //# sourceMappingURL=parallax-controller.cjs.production.min.js.map

dist/parallax-controller.esm.js

@@ -639,6 +639,6 @@ import bezier from 'bezier-easing';
 
-    var x = this._hasScrollContainer ? // @ts-expect-error
-    this.viewEl.scrollLeft : window.pageXOffset;
-    var y = this._hasScrollContainer ? // @ts-expect-error
-    this.viewEl.scrollTop : window.pageYOffset;
+    var _this$_getScrollPosit = this._getScrollPosition(),
+        x = _this$_getScrollPosit[0],
+        y = _this$_getScrollPosit[1];
+
     this.scroll = new Scroll(x, y);
@@ -682,3 +682,3 @@ this.view = new View({
 
-    ['_addListeners', '_removeListeners', '_handleScroll', '_handleResize', '_updateAllElements', '_updateElementPosition', '_setViewSize', 'getElements', 'createElement', 'removeElementById', 'updateElementPropsById', 'resetElementStyles', 'update', 'updateScrollContainer', 'destroy'].forEach(function (method) {
+    ['_addListeners', '_removeListeners', '_getScrollPosition', '_handleScroll', '_handleResize', '_updateAllElements', '_updateElementPosition', '_setViewSize', 'getElements', 'createElement', 'removeElementById', 'updateElementPropsById', 'resetElementStyles', 'update', 'updateScrollContainer', 'destroy'].forEach(function (method) {
       // @ts-expect-error
@@ -699,2 +699,12 @@ _this[method] = _this[method].bind(_this);
     window.removeEventListener('resize', this._handleResize, false);
+  };
+
+  _proto._getScrollPosition = function _getScrollPosition() {
+    // Save current scroll
+    // Supports IE 9 and up.
+    var nx = this._hasScrollContainer ? // @ts-expect-error
+    this.viewEl.scrollLeft : window.pageXOffset;
+    var ny = this._hasScrollContainer ? // @ts-expect-error
+    this.viewEl.scrollTop : window.pageYOffset;
+    return [nx, ny];
   }
@@ -708,8 +718,6 @@ /**
   _proto._handleScroll = function _handleScroll() {
-    // Save current scroll
-    // Supports IE 9 and up.
-    var nx = this._hasScrollContainer ? // @ts-expect-error
-    this.viewEl.scrollLeft : window.pageXOffset;
-    var ny = this._hasScrollContainer ? // @ts-expect-error
-    this.viewEl.scrollTop : window.pageYOffset;
+    var _this$_getScrollPosit2 = this._getScrollPosition(),
+        nx = _this$_getScrollPosit2[0],
+        ny = _this$_getScrollPosit2[1];
+
     this.scroll.setScroll(nx, ny); // Only called if the last animation request has been
@@ -755,2 +763,9 @@ // completed and there are parallax elements to update
         if (updateCache) {
+          // Save latest scroll
+          var _this2$_getScrollPosi = _this2._getScrollPosition(),
+              nx = _this2$_getScrollPosi[0],
+              ny = _this2$_getScrollPosi[1];
+
+          _this2.scroll.setScroll(nx, ny);
+
           element.setCachedAttributes(_this2.view, _this2.scroll);
@@ -757,0 +772,0 @@ }

package.json

 {
-  "version": "0.1.23",
+  "version": "0.1.24",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

src/classes/ParallaxController.ts

@@ -66,12 +66,5 @@ import { resetStyles } from '../helpers/elementStyles';
     // Scroll and View
-    const x = this._hasScrollContainer
-      ? // @ts-expect-error
-        this.viewEl.scrollLeft
-      : window.pageXOffset;
-    const y = this._hasScrollContainer
-      ? // @ts-expect-error
-        this.viewEl.scrollTop
-      : window.pageYOffset;
+    const [x, y] = this._getScrollPosition();
+    this.scroll = new Scroll(x, y);
 
-    this.scroll = new Scroll(x, y);
     this.view = new View({
@@ -99,2 +92,3 @@ width: 0,
       '_removeListeners',
+      '_getScrollPosition',
       '_handleScroll',
@@ -133,7 +127,3 @@ '_handleResize',
 
-  /**
-   * Window scroll handler sets scroll position
-   * and then calls '_updateAllElements()'.
-   */
-  private _handleScroll() {
+  private _getScrollPosition() {
     // Save current scroll
@@ -149,2 +139,12 @@ // Supports IE 9 and up.
       : window.pageYOffset;
+
+    return [nx, ny];
+  }
+
+  /**
+   * Window scroll handler sets scroll position
+   * and then calls '_updateAllElements()'.
+   */
+  private _handleScroll() {
+    const [nx, ny] = this._getScrollPosition();
     this.scroll.setScroll(nx, ny);
@@ -180,2 +180,6 @@
         if (updateCache) {
+          // Save latest scroll
+          const [nx, ny] = this._getScrollPosition();
+          this.scroll.setScroll(nx, ny);
+
           element.setCachedAttributes(this.view, this.scroll);
@@ -182,0 +186,0 @@ }

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

312829

increased by0.5%

Lines of code

4369

increased by0.51%

No dependency changes