parallax-controller - npm Package Compare versions

Comparing version 0.1.31 to 0.1.32

dist/classes/Element.d.ts

@@ -11,4 +11,4 @@ import bezier from 'bezier-easing';
 export declare class Element {
-    elInner?: HTMLElement;
-    elOuter?: HTMLElement;
+    elInner: HTMLElement;
+    elOuter: HTMLElement;
     props: ParallaxElementEffectProperties;
@@ -15,0 +15,0 @@ scrollAxis: ValidScrollAxis;

dist/helpers/elementStyles.d.ts

 import { Element } from '../classes/Element';
 import { ParallaxStartEndEffects } from '../types';
-export declare function setWillChangeStyles(elInner?: HTMLElement): void;
+export declare function setWillChangeStyles(elInner: HTMLElement, effects: ParallaxStartEndEffects): void;
+export declare function removeWillChangeStyles(elInner: HTMLElement): void;
 export declare function setElementStyles(effects: ParallaxStartEndEffects, progress: number, elInner?: HTMLElement): void;
@@ -5,0 +6,0 @@ export declare function getOpacityStyles(effects: ParallaxStartEndEffects, progress: number): string;

dist/parallax-controller.cjs.development.js

@@ -327,6 +327,11 @@ 'use strict';
 });
-function setWillChangeStyles(elInner) {
-  if (!elInner) return;
-  elInner.style.willChange = 'transform,opacity';
+function setWillChangeStyles(elInner, effects) {
+  var keys = Object.keys(effects);
+  var hasOpacity = keys.includes('opacity');
+  var willChange = "transform" + (hasOpacity ? ',opacity' : '');
+  elInner.style.willChange = willChange;
 }
+function removeWillChangeStyles(elInner) {
+  elInner.style.willChange = '';
+}
 function setElementStyles(effects, progress, elInner) {
@@ -566,3 +571,2 @@ if (!elInner) return;
 
-    setWillChangeStyles(options.elInner);
     this.updatePosition = options.scrollAxis === exports.ScrollAxis.vertical ? this._updatePositionVertical : this._updatePositionHorizontal;
@@ -604,4 +608,7 @@ }
       if (nextIsInView) {
+        setWillChangeStyles(this.elInner, this.effects);
         this.props.onEnter && this.props.onEnter();
       } else {
+        removeWillChangeStyles(this.elInner);
+
         this._setFinalStylesAndProgress();
@@ -608,0 +615,0 @@

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

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,i,s,n,r=(t=require("bezier-easing"))&&"object"==typeof t&&"default"in t?t.default:t,o=function(t){this.startX=t.startX,this.startY=t.startY,this.endX=t.endX,this.endY=t.endY,this.totalX=this.endX-this.startX,this.totalY=this.endY-this.startY,this.startMultiplierX=t.startMultiplierX||1,this.endMultiplierX=t.endMultiplierX||1,this.startMultiplierY=t.startMultiplierY||1,this.endMultiplierY=t.endMultiplierY||1};function l(){return(l=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)}(e=exports.ValidCSSEffects||(exports.ValidCSSEffects={})).translateX="translateX",e.translateY="translateY",e.rotate="rotate",e.rotateX="rotateX",e.rotateY="rotateY",e.rotateZ="rotateZ",e.scale="scale",e.scaleX="scaleX",e.scaleY="scaleY",e.scaleZ="scaleZ",e.opacity="opacity",(i=exports.Units||(exports.Units={})).px="px",i["%"]="%",(s=exports.RotationUnits||(exports.RotationUnits={})).deg="deg",s.turn="turn",s.rad="rad",(exports.ScaleUnits||(exports.ScaleUnits={}))[""]="",(n=exports.ScrollAxis||(exports.ScrollAxis={})).vertical="vertical",n.horizontal="horizontal";var a=0;function h(){return++a}var u=function(){function t(t){var e=t.el.getBoundingClientRect();if(t.view.scrollContainer){var i=t.view.scrollContainer.getBoundingClientRect();e=l({},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,this.right=e.right,this.top=e.top,this.bottom=e.bottom,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},t}(),c=[exports.ScaleUnits[""],exports.Units.px,exports.Units["%"],exports.RotationUnits.deg,exports.RotationUnits.turn,exports.RotationUnits.rad];function d(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,!c.includes(i.unit))throw new Error("Invalid unit provided.");return i}var p={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]};function f(t){if(Array.isArray(t))return r(t[0],t[1],t[2],t[3]);if("string"==typeof t&&void 0!==p[t]){var e=p[t];return r(e[0],e[1],e[2],e[3])}}var v=Object.values(exports.ValidCSSEffects),m={translateX:"%",translateY:"%",rotate:"deg",rotateX:"deg",rotateY:"deg",rotateZ:"deg",scale:"",scaleX:"",scaleY:"",scaleZ:"",opacity:""};function g(t){var e={};return v.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,a=m[i],h=d(null==t||null==(r=t[i])?void 0:r[0],a),u=d(null==t||null==(o=t[i])?void 0:o[1],a),c=f(null==t||null==(l=t[i])?void 0:l[2]);if(e[i]={start:h.value,end:u.value,unit:h.unit,easing:c},h.unit!==u.unit)throw new Error("Must provide matching units for the min and max offset values of each axis.")}})),e}function w(t,e,i,s){var n=(i-t)/e;return s&&(n=s(n)),n}function E(t,e,i){return i>=t&&i<=e}function x(t,e,i,s,n){return(i-e)*(t-s)/(n-s)+e}function _(t,e){return{value:x("function"==typeof t.easing?t.easing(e):e,(null==t?void 0:t.start)||0,(null==t?void 0:t.end)||0,0,1),unit:null==t?void 0:t.unit}}var S=Object.values(exports.ValidCSSEffects).filter((function(t){return"opacity"!==t}));function y(t,e,i){if(i){var s=function(t,e){return S.reduce((function(i,s){var n=t[s]&&_(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&&_(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 I(t){var e=t.elInner;e&&(e.style.transform="")}function X(t,e,i){var s=e>t,n=(Math.abs(t)+Math.abs(e))*(s?-1:1);return Math.max(i/(i+n),1)}function Y(t,e){var i=t.start,s=t.end;if("%"===t.unit){var n=e/100;i*=n,s*=n}return{start:i,end:s}}var C={start:0,end:0,unit:""},P=function(){function t(t){var e;this.elInner=t.elInner,this.elOuter=t.elOuter,this.props=t.props,this.scrollAxis=t.scrollAxis,this.id=h(),this.effects=g(this.props),this.isInView=null,this.progress=0,this._setElementEasing(t.props.easing),(e=t.elInner)&&(e.style.willChange="transform,opacity"),this.updatePosition=t.scrollAxis===exports.ScrollAxis.vertical?this._updatePositionVertical:this._updatePositionHorizontal}var e=t.prototype;return e.updateProps=function(t){return this.props=l({},this.props,t),this.effects=g(t),this._setElementEasing(t.easing),this},e.setCachedAttributes=function(t,e){return this.elOuter?(this.rect=new u({el:this.elOuter,rootMargin:this.props.rootMargin,view:t}),this.props.rootMargin||!this.effects.translateX&&!this.effects.translateY?this.limits=function(t,e,i,s){var n=t.top-e.height,r=t.left-e.width,l=t.bottom,a=t.right;return r+=i.x,n+=i.y,s&&(i.y+t.top<e.height&&(n=0),i.x+t.left<e.width&&(r=0)),new o({startX:r,startY:n,endX:a+=i.x,endY:l+=i.y})}(this.rect,t,e,this.props.shouldStartAnimationInitialInView):(this.limits=function(t,e,i,s,n){var r=i.translateY||C,l=Y(i.translateX||C,t.width),a=l.start,h=l.end,u=Y(r,t.height),c=u.start,d=u.end,p=t.top-e.height,f=t.left-e.width,v=t.bottom,m=t.right,g=X(c,d,e.height+t.height),w=g,E=X(a,h,e.width+t.width),x=E;return c<0&&(p+=c*g),d>0&&(v+=d*w),a<0&&(f+=a*E),h>0&&(m+=h*x),f+=s.x,m+=s.x,p+=s.y,v+=s.y,n&&(s.y+t.top<e.height&&(g=1,w=X(c,d,(v=t.bottom+s.y)-(p=0)),d>0&&(v+=d*w)),s.x+t.left<e.width&&(E=1,x=X(a,h,(m=t.right+s.x)-(f=0)),h>0&&(m+=h*x))),new o({startX:f,startY:p,endX:m,endY:v,startMultiplierX:E,endMultiplierX:x,startMultiplierY:g,endMultiplierY:w})}(this.rect,t,this.effects,e,this.props.shouldStartAnimationInitialInView),this.scaledEffects=(s=this.limits,(n=l({},i=this.effects)).translateX&&(n.translateX=l({},i.translateX,{start:n.translateX.start*s.startMultiplierX,end:n.translateX.end*s.endMultiplierX})),n.translateY&&(n.translateY=l({},i.translateY,{start:n.translateY.start*s.startMultiplierY,end:n.translateY.end*s.endMultiplierY})),n)),this):this;var i,s,n},e._updateElementIsInView=function(t){t!==this.isInView&&(t?this.props.onEnter&&this.props.onEnter():(this._setFinalStylesAndProgress(),this.props.onExit&&this.props.onExit())),this.isInView=t},e._setFinalStylesAndProgress=function(){var t=Math.round(this.progress);this._updateElementProgress(t)},e._updateElementProgress=function(t){this.progress=t,this.props.onProgressChange&&this.props.onProgressChange(this.progress),y(this.scaledEffects||this.effects,this.progress,this.elInner)},e._setElementEasing=function(t){this.easing=f(t)},e._updatePositionHorizontal=function(t){if(!this.limits)return this;var e=E(this.limits.startX,this.limits.endX,t.x);if(this._updateElementIsInView(e),!e)return this;var i=w(this.limits.startX,this.limits.totalX,t.x,this.easing);return this._updateElementProgress(i),this},e._updatePositionVertical=function(t){if(!this.limits)return this;var e=E(this.limits.startY,this.limits.endY,t.y);if(this._updateElementIsInView(e),!this.isInView)return this;var i=w(this.limits.startY,this.limits.totalY,t.y,this.easing);return this._updateElementProgress(i),this},t}(),b=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}(),M=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 A(){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 O=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 M(n[0],n[1]),this.view=new b({width:0,height:0,scrollContainer:this._hasScrollContainer?s:void 0}),this._ticking=!1,this._supportsPassive=A(),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){e._updateElementPosition(t),i&&t.setCachedAttributes(e.view,e.scroll)})),this._ticking=!1},e._updateElementPosition=function(t){t.props.disabled||t.updatePosition(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 P(l({},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){I(t)},e.update=function(){var t=this._getScrollPosition();this.scroll.setScroll(t[0],t[1]),this._setViewSize(),this._updateAllElements({updateCache:!0})},e.updateScrollContainer=function(t){this._removeListeners(this.viewEl),this.viewEl=t,this._hasScrollContainer=!!t,this.view=new b({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 I(t)})),this.elements=void 0},t}();exports.Element=P,exports.Limits=o,exports.ParallaxController=O,exports.Rect=u,exports.Scroll=M,exports.View=b,exports.createId=h,exports.getProgressAmount=w,exports.isElementInView=E,exports.parseElementTransitionEffects=g,exports.parseValueAndUnit=d,exports.resetStyles=I,exports.scaleBetween=x,exports.scaleEffectByProgress=_,exports.setElementStyles=y,exports.testForPassiveScroll=A;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,i,s,n,r=(t=require("bezier-easing"))&&"object"==typeof t&&"default"in t?t.default:t,o=function(t){this.startX=t.startX,this.startY=t.startY,this.endX=t.endX,this.endY=t.endY,this.totalX=this.endX-this.startX,this.totalY=this.endY-this.startY,this.startMultiplierX=t.startMultiplierX||1,this.endMultiplierX=t.endMultiplierX||1,this.startMultiplierY=t.startMultiplierY||1,this.endMultiplierY=t.endMultiplierY||1};function l(){return(l=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)}(e=exports.ValidCSSEffects||(exports.ValidCSSEffects={})).translateX="translateX",e.translateY="translateY",e.rotate="rotate",e.rotateX="rotateX",e.rotateY="rotateY",e.rotateZ="rotateZ",e.scale="scale",e.scaleX="scaleX",e.scaleY="scaleY",e.scaleZ="scaleZ",e.opacity="opacity",(i=exports.Units||(exports.Units={})).px="px",i["%"]="%",(s=exports.RotationUnits||(exports.RotationUnits={})).deg="deg",s.turn="turn",s.rad="rad",(exports.ScaleUnits||(exports.ScaleUnits={}))[""]="",(n=exports.ScrollAxis||(exports.ScrollAxis={})).vertical="vertical",n.horizontal="horizontal";var a=0;function h(){return++a}var u=function(){function t(t){var e=t.el.getBoundingClientRect();if(t.view.scrollContainer){var i=t.view.scrollContainer.getBoundingClientRect();e=l({},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,this.right=e.right,this.top=e.top,this.bottom=e.bottom,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},t}(),c=[exports.ScaleUnits[""],exports.Units.px,exports.Units["%"],exports.RotationUnits.deg,exports.RotationUnits.turn,exports.RotationUnits.rad];function d(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,!c.includes(i.unit))throw new Error("Invalid unit provided.");return i}var p={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]};function f(t){if(Array.isArray(t))return r(t[0],t[1],t[2],t[3]);if("string"==typeof t&&void 0!==p[t]){var e=p[t];return r(e[0],e[1],e[2],e[3])}}var v=Object.values(exports.ValidCSSEffects),m={translateX:"%",translateY:"%",rotate:"deg",rotateX:"deg",rotateY:"deg",rotateZ:"deg",scale:"",scaleX:"",scaleY:"",scaleZ:"",opacity:""};function g(t){var e={};return v.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,a=m[i],h=d(null==t||null==(r=t[i])?void 0:r[0],a),u=d(null==t||null==(o=t[i])?void 0:o[1],a),c=f(null==t||null==(l=t[i])?void 0:l[2]);if(e[i]={start:h.value,end:u.value,unit:h.unit,easing:c},h.unit!==u.unit)throw new Error("Must provide matching units for the min and max offset values of each axis.")}})),e}function w(t,e,i,s){var n=(i-t)/e;return s&&(n=s(n)),n}function E(t,e,i){return i>=t&&i<=e}function x(t,e,i,s,n){return(i-e)*(t-s)/(n-s)+e}function _(t,e){return{value:x("function"==typeof t.easing?t.easing(e):e,(null==t?void 0:t.start)||0,(null==t?void 0:t.end)||0,0,1),unit:null==t?void 0:t.unit}}var y=Object.values(exports.ValidCSSEffects).filter((function(t){return"opacity"!==t}));function S(t,e,i){if(i){var s=function(t,e){return y.reduce((function(i,s){var n=t[s]&&_(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&&_(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 I(t){var e=t.elInner;e&&(e.style.transform="")}function C(t,e,i){var s=e>t,n=(Math.abs(t)+Math.abs(e))*(s?-1:1);return Math.max(i/(i+n),1)}function X(t,e){var i=t.start,s=t.end;if("%"===t.unit){var n=e/100;i*=n,s*=n}return{start:i,end:s}}var Y={start:0,end:0,unit:""},P=function(){function t(t){this.elInner=t.elInner,this.elOuter=t.elOuter,this.props=t.props,this.scrollAxis=t.scrollAxis,this.id=h(),this.effects=g(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 e=t.prototype;return e.updateProps=function(t){return this.props=l({},this.props,t),this.effects=g(t),this._setElementEasing(t.easing),this},e.setCachedAttributes=function(t,e){return this.elOuter?(this.rect=new u({el:this.elOuter,rootMargin:this.props.rootMargin,view:t}),this.props.rootMargin||!this.effects.translateX&&!this.effects.translateY?this.limits=function(t,e,i,s){var n=t.top-e.height,r=t.left-e.width,l=t.bottom,a=t.right;return r+=i.x,n+=i.y,s&&(i.y+t.top<e.height&&(n=0),i.x+t.left<e.width&&(r=0)),new o({startX:r,startY:n,endX:a+=i.x,endY:l+=i.y})}(this.rect,t,e,this.props.shouldStartAnimationInitialInView):(this.limits=function(t,e,i,s,n){var r=i.translateY||Y,l=X(i.translateX||Y,t.width),a=l.start,h=l.end,u=X(r,t.height),c=u.start,d=u.end,p=t.top-e.height,f=t.left-e.width,v=t.bottom,m=t.right,g=C(c,d,e.height+t.height),w=g,E=C(a,h,e.width+t.width),x=E;return c<0&&(p+=c*g),d>0&&(v+=d*w),a<0&&(f+=a*E),h>0&&(m+=h*x),f+=s.x,m+=s.x,p+=s.y,v+=s.y,n&&(s.y+t.top<e.height&&(g=1,w=C(c,d,(v=t.bottom+s.y)-(p=0)),d>0&&(v+=d*w)),s.x+t.left<e.width&&(E=1,x=C(a,h,(m=t.right+s.x)-(f=0)),h>0&&(m+=h*x))),new o({startX:f,startY:p,endX:m,endY:v,startMultiplierX:E,endMultiplierX:x,startMultiplierY:g,endMultiplierY:w})}(this.rect,t,this.effects,e,this.props.shouldStartAnimationInitialInView),this.scaledEffects=(s=this.limits,(n=l({},i=this.effects)).translateX&&(n.translateX=l({},i.translateX,{start:n.translateX.start*s.startMultiplierX,end:n.translateX.end*s.endMultiplierX})),n.translateY&&(n.translateY=l({},i.translateY,{start:n.translateY.start*s.startMultiplierY,end:n.translateY.end*s.endMultiplierY})),n)),this):this;var i,s,n},e._updateElementIsInView=function(t){var e,i;t!==this.isInView&&(t?(e=this.elInner,i=Object.keys(this.effects).includes("opacity"),e.style.willChange="transform"+(i?",opacity":""),this.props.onEnter&&this.props.onEnter()):(function(t){t.style.willChange=""}(this.elInner),this._setFinalStylesAndProgress(),this.props.onExit&&this.props.onExit())),this.isInView=t},e._setFinalStylesAndProgress=function(){var t=Math.round(this.progress);this._updateElementProgress(t)},e._updateElementProgress=function(t){this.progress=t,this.props.onProgressChange&&this.props.onProgressChange(this.progress),S(this.scaledEffects||this.effects,this.progress,this.elInner)},e._setElementEasing=function(t){this.easing=f(t)},e._updatePositionHorizontal=function(t){if(!this.limits)return this;var e=E(this.limits.startX,this.limits.endX,t.x);if(this._updateElementIsInView(e),!e)return this;var i=w(this.limits.startX,this.limits.totalX,t.x,this.easing);return this._updateElementProgress(i),this},e._updatePositionVertical=function(t){if(!this.limits)return this;var e=E(this.limits.startY,this.limits.endY,t.y);if(this._updateElementIsInView(e),!this.isInView)return this;var i=w(this.limits.startY,this.limits.totalY,t.y,this.easing);return this._updateElementProgress(i),this},t}(),b=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}(),M=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 M(n[0],n[1]),this.view=new b({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){e._updateElementPosition(t),i&&t.setCachedAttributes(e.view,e.scroll)})),this._ticking=!1},e._updateElementPosition=function(t){t.props.disabled||t.updatePosition(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 P(l({},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){I(t)},e.update=function(){var t=this._getScrollPosition();this.scroll.setScroll(t[0],t[1]),this._setViewSize(),this._updateAllElements({updateCache:!0})},e.updateScrollContainer=function(t){this._removeListeners(this.viewEl),this.viewEl=t,this._hasScrollContainer=!!t,this.view=new b({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 I(t)})),this.elements=void 0},t}();exports.Element=P,exports.Limits=o,exports.ParallaxController=A,exports.Rect=u,exports.Scroll=M,exports.View=b,exports.createId=h,exports.getProgressAmount=w,exports.isElementInView=E,exports.parseElementTransitionEffects=g,exports.parseValueAndUnit=d,exports.resetStyles=I,exports.scaleBetween=x,exports.scaleEffectByProgress=_,exports.setElementStyles=S,exports.testForPassiveScroll=O;
 //# sourceMappingURL=parallax-controller.cjs.production.min.js.map

dist/parallax-controller.esm.js

@@ -331,6 +331,11 @@ import bezier from 'bezier-easing';
 });
-function setWillChangeStyles(elInner) {
-  if (!elInner) return;
-  elInner.style.willChange = 'transform,opacity';
+function setWillChangeStyles(elInner, effects) {
+  var keys = Object.keys(effects);
+  var hasOpacity = keys.includes('opacity');
+  var willChange = "transform" + (hasOpacity ? ',opacity' : '');
+  elInner.style.willChange = willChange;
 }
+function removeWillChangeStyles(elInner) {
+  elInner.style.willChange = '';
+}
 function setElementStyles(effects, progress, elInner) {
@@ -570,3 +575,2 @@ if (!elInner) return;
 
-    setWillChangeStyles(options.elInner);
     this.updatePosition = options.scrollAxis === ScrollAxis.vertical ? this._updatePositionVertical : this._updatePositionHorizontal;
@@ -608,4 +612,7 @@ }
       if (nextIsInView) {
+        setWillChangeStyles(this.elInner, this.effects);
         this.props.onEnter && this.props.onEnter();
       } else {
+        removeWillChangeStyles(this.elInner);
+
         this._setFinalStylesAndProgress();
@@ -612,0 +619,0 @@

dist/types.d.ts

@@ -88,4 +88,4 @@ import { EasingFunction } from 'bezier-easing';
 export declare type CreateElementOptions = {
-    elInner?: HTMLElement;
-    elOuter?: HTMLElement;
+    elInner: HTMLElement;
+    elOuter: HTMLElement;
     props: ParallaxElementEffectProperties;
@@ -92,0 +92,0 @@ };

package.json

 {
-  "version": "0.1.31",
+  "version": "0.1.32",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jscottsmith/parallax-controller"
+  },
   "files": [
@@ -7,0 +11,0 @@ "dist",

src/classes/Element.test.ts

@@ -10,3 +10,9 @@ import { Element } from './Element';
 import { CSSEffect } from '..';
+import {
+  setWillChangeStyles,
+  removeWillChangeStyles,
+} from '../helpers/elementStyles';
 
+jest.mock('../helpers/elementStyles');
+
 const DEFAULT_OPTIONS = {
@@ -73,7 +79,2 @@ elInner: createElementMock(
 
-  it('set will change styles in contructor', () => {
-    const element = new Element(DEFAULT_OPTIONS);
-    expect(element.elInner?.style.willChange).toEqual('transform,opacity');
-  });
-
   it.skip('to conditionally handle updates based on scroll axis', () => {});
@@ -111,2 +112,3 @@
     expect(onEnter).toBeCalledTimes(1);
+    expect(setWillChangeStyles).toBeCalledTimes(1);
     // expect(onProgressChange).toBeCalledWith(1);
@@ -118,2 +120,3 @@ // expect(onProgressChange).toBeCalledTimes(2);
     expect(onExit).toBeCalledTimes(1);
+    expect(removeWillChangeStyles).toBeCalledTimes(1);
     // expect(onProgressChange).toBeCalledTimes(3);
@@ -120,0 +123,0 @@ });

src/classes/Element.ts

@@ -19,2 +19,3 @@ import bezier from 'bezier-easing';
 import {
+  removeWillChangeStyles,
   setElementStyles,
@@ -33,4 +34,4 @@ setWillChangeStyles,
 export class Element {
-  elInner?: HTMLElement;
-  elOuter?: HTMLElement;
+  elInner: HTMLElement;
+  elOuter: HTMLElement;
   props: ParallaxElementEffectProperties;
@@ -62,4 +63,2 @@ scrollAxis: ValidScrollAxis;
 
-    setWillChangeStyles(options.elInner);
-
     this.updatePosition =
@@ -120,4 +119,6 @@ options.scrollAxis === ScrollAxis.vertical
       if (nextIsInView) {
+        setWillChangeStyles(this.elInner, this.effects);
         this.props.onEnter && this.props.onEnter();
       } else {
+        removeWillChangeStyles(this.elInner);
         this._setFinalStylesAndProgress();
@@ -124,0 +125,0 @@ this.props.onExit && this.props.onExit();

src/helpers/elementStyles.ts

@@ -10,7 +10,16 @@ import { Element } from '../classes/Element';
 
-export function setWillChangeStyles(elInner?: HTMLElement) {
-  if (!elInner) return;
-  elInner.style.willChange = 'transform,opacity';
+export function setWillChangeStyles(
+  elInner: HTMLElement,
+  effects: ParallaxStartEndEffects
+) {
+  const keys = Object.keys(effects);
+  const hasOpacity = keys.includes('opacity');
+  const willChange = `transform${hasOpacity ? ',opacity' : ''}`;
+  elInner.style.willChange = willChange;
 }
 
+export function removeWillChangeStyles(elInner: HTMLElement) {
+  elInner.style.willChange = '';
+}
+
 export function setElementStyles(
@@ -17,0 +26,0 @@ effects: ParallaxStartEndEffects,

src/types.ts

@@ -106,4 +106,4 @@ import { EasingFunction } from 'bezier-easing';
 export type CreateElementOptions = {
-  elInner?: HTMLElement;
-  elOuter?: HTMLElement;
+  elInner: HTMLElement;
+  elOuter: HTMLElement;
   props: ParallaxElementEffectProperties;
@@ -110,0 +110,0 @@ };

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

356853

increased by0.88%

Lines of code

4726

increased by0.57%

Number of low supply chain risk alerts

1

decreased by-66.67%

No dependency changes