parallax-controller - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/classes/View.d.ts

@@ -5,8 +5,17 @@ export declare class View {
     height: number;
-    constructor({ width, height, scrollContainer, }: {
+    scrollHeight: number;
+    scrollWidth: number;
+    constructor({ width, height, scrollHeight, scrollWidth, scrollContainer, }: {
         width: number;
         height: number;
+        scrollHeight: number;
+        scrollWidth: number;
         scrollContainer?: HTMLElement;
     });
-    setSize(width: number, height: number): this;
+    setSize({ width, height, scrollHeight, scrollWidth, }: {
+        width: number;
+        height: number;
+        scrollHeight: number;
+        scrollWidth: number;
+    }): this;
 }

dist/helpers/createLimitsForRelativeElements.d.ts

 import { Rect, Scroll, View } from '..';
 import { Limits } from '../classes/Limits';
-export declare function createLimitsForRelativeElements(rect: Rect, view: View, scroll: Scroll, shouldStartAnimationInitialInView?: boolean): Limits;
+export declare function createLimitsForRelativeElements(rect: Rect, view: View, scroll: Scroll, shouldAlwaysCompleteAnimation?: boolean): Limits;

dist/helpers/createLimitsWithTranslationsForRelativeElements.d.ts

@@ -6,2 +6,2 @@ import { Rect } from '../classes/Rect';
 import { ParallaxStartEndEffects, ValidScrollAxis } from '../types';
-export declare function createLimitsWithTranslationsForRelativeElements(rect: Rect, view: View, effects: ParallaxStartEndEffects, scroll: Scroll, scrollAxis: ValidScrollAxis, shouldStartAnimationInitialInView?: boolean): Limits;
+export declare function createLimitsWithTranslationsForRelativeElements(rect: Rect, view: View, effects: ParallaxStartEndEffects, scroll: Scroll, scrollAxis: ValidScrollAxis, shouldAlwaysCompleteAnimation?: boolean): Limits;

dist/parallax-controller.cjs.development.js

@@ -436,3 +436,3 @@ 'use strict';
 
-function createLimitsForRelativeElements(rect, view, scroll, shouldStartAnimationInitialInView) {
+function createLimitsForRelativeElements(rect, view, scroll, shouldAlwaysCompleteAnimation) {
   var startY = rect.top - view.height;
@@ -448,3 +448,3 @@ var startX = rect.left - view.width;
 
-  if (shouldStartAnimationInitialInView) {
+  if (shouldAlwaysCompleteAnimation) {
     if (scroll.y + rect.top < view.height) {
@@ -457,2 +457,10 @@ startY = 0;
     }
+
+    if (endY > view.scrollHeight - view.height) {
+      endY = view.scrollHeight - view.height;
+    }
+
+    if (endX > view.scrollWidth - view.width) {
+      endX = view.scrollWidth - view.width;
+    }
   }
@@ -504,3 +512,3 @@
 };
-function createLimitsWithTranslationsForRelativeElements(rect, view, effects, scroll, scrollAxis, shouldStartAnimationInitialInView) {
+function createLimitsWithTranslationsForRelativeElements(rect, view, effects, scroll, scrollAxis, shouldAlwaysCompleteAnimation) {
   // get start and end accounting for percent effects
@@ -560,12 +568,58 @@ var translateX = effects.translateX || DEFAULT_VALUE;
   startY += scroll.y;
-  endY += scroll.y;
+  endY += scroll.y; // NOTE: please refactor and isolate this :(
 
-  if (shouldStartAnimationInitialInView) {
-    if (scroll.y + rect.top < view.height) {
+  if (shouldAlwaysCompleteAnimation) {
+    var topBeginsInView = scroll.y + rect.top < view.height;
+    var leftBeginsInView = scroll.x + rect.left < view.width;
+    var bottomEndsInView = scroll.y + rect.bottom > view.scrollHeight - view.height;
+    var rightEndsInView = scroll.x + rect.right > view.scrollWidth - view.height;
+
+    if (topBeginsInView && bottomEndsInView) {
+      startMultiplierY = 1;
+      endMultiplierY = 1;
       startY = 0;
+      endY = view.scrollHeight - view.height;
+    }
+
+    if (leftBeginsInView && rightEndsInView) {
+      startMultiplierX = 1;
+      endMultiplierX = 1;
+      startX = 0;
+      endX = view.scrollWidth - view.width;
+    }
+
+    if (!topBeginsInView && bottomEndsInView) {
+      startY = rect.top - view.height + scroll.y;
+      endY = view.scrollHeight - view.height;
+      var totalDist = endY - startY;
+      startMultiplierY = getTranslateScalar(startTranslateYPx, endTranslateYPx, totalDist);
+      endMultiplierY = 1;
+
+      if (startTranslateYPx < 0) {
+        startY = startY + startTranslateYPx * startMultiplierY;
+      }
+    }
+
+    if (!leftBeginsInView && rightEndsInView) {
+      startX = rect.left - view.width + scroll.x;
+      endX = view.scrollWidth - view.width;
+
+      var _totalDist = endX - startX;
+
+      startMultiplierX = getTranslateScalar(startTranslateXPx, endTranslateXPx, _totalDist);
+      endMultiplierX = 1;
+
+      if (startTranslateXPx < 0) {
+        startX = startX + startTranslateXPx * startMultiplierX;
+      }
+    }
+
+    if (topBeginsInView && !bottomEndsInView) {
+      startY = 0;
       endY = rect.bottom + scroll.y;
-      var totalDist = endY - startY; // no multiplier for start value since this is initially in view
 
+      var _totalDist2 = endY - startY;
+
       startMultiplierY = 1;
-      endMultiplierY = getTranslateScalar(startTranslateYPx, endTranslateYPx, totalDist); // Apply the scale to end initial values
+      endMultiplierY = getTranslateScalar(startTranslateYPx, endTranslateYPx, _totalDist2);
 
@@ -577,11 +631,10 @@ if (endTranslateYPx > 0) {
 
-    if (scroll.x + rect.left < view.width) {
+    if (leftBeginsInView && !rightEndsInView) {
       startX = 0;
       endX = rect.right + scroll.x;
 
-      var _totalDist = endX - startX; // no multiplier for start value since this is initially in view
+      var _totalDist3 = endX - startX;
 
-
       startMultiplierX = 1;
-      endMultiplierX = getTranslateScalar(startTranslateXPx, endTranslateXPx, _totalDist); // Apply the scale to end initial values
+      endMultiplierX = getTranslateScalar(startTranslateXPx, endTranslateXPx, _totalDist3);
 
@@ -687,6 +740,6 @@ if (endTranslateXPx > 0) {
     if (shouldScaleTranslateEffects) {
-      this.limits = createLimitsWithTranslationsForRelativeElements(this.rect, view, this.effects, scroll, this.scrollAxis, this.props.shouldStartAnimationInitialInView);
+      this.limits = createLimitsWithTranslationsForRelativeElements(this.rect, view, this.effects, scroll, this.scrollAxis, this.props.shouldAlwaysCompleteAnimation);
       this.scaledEffects = scaleTranslateEffectsForSlowerScroll(this.effects, this.limits);
     } else {
-      this.limits = createLimitsForRelativeElements(this.rect, view, scroll, this.props.shouldStartAnimationInitialInView);
+      this.limits = createLimitsForRelativeElements(this.rect, view, scroll, this.props.shouldAlwaysCompleteAnimation);
     }
@@ -771,2 +824,4 @@
         height = _ref.height,
+        scrollHeight = _ref.scrollHeight,
+        scrollWidth = _ref.scrollWidth,
         scrollContainer = _ref.scrollContainer;
@@ -776,2 +831,4 @@ this.scrollContainer = scrollContainer;
     this.height = height;
+    this.scrollHeight = scrollHeight;
+    this.scrollWidth = scrollWidth;
   }
@@ -781,5 +838,11 @@
 
-  _proto.setSize = function setSize(width, height) {
+  _proto.setSize = function setSize(_ref2) {
+    var width = _ref2.width,
+        height = _ref2.height,
+        scrollHeight = _ref2.scrollHeight,
+        scrollWidth = _ref2.scrollWidth;
     this.width = width;
     this.height = height;
+    this.scrollHeight = scrollHeight;
+    this.scrollWidth = scrollWidth;
     return this;
@@ -859,2 +922,4 @@ };
       height: 0,
+      scrollWidth: 0,
+      scrollHeight: 0,
       scrollContainer: this._hasScrollContainer ? scrollContainer : undefined
@@ -1004,7 +1069,16 @@ }); // Ticking
     if (this._hasScrollContainer) {
-      // @ts-ignore
-      var _width = this.viewEl.offsetWidth; // @ts-ignore
+      // @ts-expect-error
+      var _width = this.viewEl.offsetWidth; // @ts-expect-error
 
-      var _height = this.viewEl.offsetHeight;
-      return this.view.setSize(_width, _height);
+      var _height = this.viewEl.offsetHeight; // @ts-expect-error
+
+      var _scrollHeight = this.viewEl.scrollHeight; // @ts-expect-error
+
+      var _scrollWidth = this.viewEl.scrollWidth;
+      return this.view.setSize({
+        width: _width,
+        height: _height,
+        scrollHeight: _scrollHeight,
+        scrollWidth: _scrollWidth
+      });
     }
@@ -1015,3 +1089,10 @@
     var height = window.innerHeight || html.clientHeight;
-    return this.view.setSize(width, height);
+    var scrollHeight = html.scrollHeight;
+    var scrollWidth = html.scrollWidth;
+    return this.view.setSize({
+      width: width,
+      height: height,
+      scrollHeight: scrollHeight,
+      scrollWidth: scrollWidth
+    });
   }
@@ -1119,2 +1200,4 @@ /**
       height: 0,
+      scrollWidth: 0,
+      scrollHeight: 0,
       scrollContainer: el
@@ -1121,0 +1204,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,a=(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={})).speed="speed",e.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",(r=exports.EasingPreset||(exports.EasingPreset={})).ease="ease",r.easeIn="easeIn",r.easeOut="easeOut",r.easeInOut="easeInOut",r.easeInQuad="easeInQuad",r.easeInCubic="easeInCubic",r.easeInQuart="easeInQuart",r.easeInQuint="easeInQuint",r.easeInSine="easeInSine",r.easeInExpo="easeInExpo",r.easeInCirc="easeInCirc",r.easeOutQuad="easeOutQuad",r.easeOutCubic="easeOutCubic",r.easeOutQuart="easeOutQuart",r.easeOutQuint="easeOutQuint",r.easeOutSine="easeOutSine",r.easeOutExpo="easeOutExpo",r.easeOutCirc="easeOutCirc",r.easeInOutQuad="easeInOutQuad",r.easeInOutCubic="easeInOutCubic",r.easeInOutQuart="easeInOutQuart",r.easeInOutQuint="easeInOutQuint",r.easeInOutSine="easeInOutSine",r.easeInOutExpo="easeInOutExpo",r.easeInOutCirc="easeInOutCirc",r.easeInBack="easeInBack",r.easeOutBack="easeOutBack",r.easeInOutBack="easeInOutBack";var h=0;function u(){return++h}var c=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}(),d=[exports.ScaleUnits[""],exports.Units.px,exports.Units["%"],exports.RotationUnits.deg,exports.RotationUnits.turn,exports.RotationUnits.rad];function p(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,!d.includes(i.unit))throw new Error("Invalid unit provided.");return i}var f={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 v(t){if(Array.isArray(t))return a(t[0],t[1],t[2],t[3]);if("string"==typeof t&&void 0!==f[t]){var e=f[t];return a(e[0],e[1],e[2],e[3])}}var m=Object.values(exports.ValidCSSEffects),g={speed:"px",translateX:"%",translateY:"%",rotate:"deg",rotateX:"deg",rotateY:"deg",rotateZ:"deg",scale:"",scaleX:"",scaleY:"",scaleZ:"",opacity:""};function w(t,e){var i={};return m.forEach((function(s){var n=g[s];if("number"==typeof(null==t?void 0:t[s])){var r=null==t?void 0:t[s],a=-10*(r||0)+"px",o=p(10*(r||0)+"px"),l=p(a),h={start:o.value,end:l.value,unit:o.unit};e===exports.ScrollAxis.vertical&&(i.translateY=h),e===exports.ScrollAxis.horizontal&&(i.translateX=h)}if(Array.isArray(null==t?void 0:t[s])){var u=null==t?void 0:t[s];if(void 0!==u[0]&&void 0!==u[1]){var c=p(null==u?void 0:u[0],n),d=p(null==u?void 0:u[1],n),f=v(null==u?void 0:u[2]);if(i[s]={start:c.value,end:d.value,unit:c.unit,easing:f},c.unit!==d.unit)throw new Error("Must provide matching units for the min and max offset values of each axis.")}}})),i}function x(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 _(t,e,i,s,n){return(i-e)*(t-s)/(n-s)+e}function S(t,e){return{value:_("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 I=Object.values(exports.ValidCSSEffects).filter((function(t){return"opacity"!==t}));function y(t,e,i){if(i){var s=function(t,e){return I.reduce((function(i,s){var n=t[s]&&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&&S(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 O(t){var e=t.el;e&&(e.style.transform="",e.style.opacity="")}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 b(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 A={start:0,end:0,unit:""},X=function(){function t(t){var e,i;this.el=t.el,this.props=t.props,this.scrollAxis=t.scrollAxis,this.id=u(),this.effects=w(this.props,this.scrollAxis),this.isInView=null,this.progress=0,this._setElementEasing(t.props.easing),e=t.el,i=Object.keys(this.effects).includes("opacity"),e.style.willChange="transform"+(i?",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=w(t,this.scrollAxis),this._setElementEasing(t.easing),this},e.setCachedAttributes=function(t,e){O(this),this.rect=new c({el:this.props.targetElement||this.el,rootMargin:this.props.rootMargin,view:t});var i,s,n,r=(s=this.effects,n=this.scrollAxis,!(i=this.props).rootMargin&&!i.targetElement&&!!(s.translateX&&n===exports.ScrollAxis.horizontal||s.translateY&&n===exports.ScrollAxis.vertical));return"number"==typeof this.props.startScroll&&"number"==typeof this.props.endScroll?(this.limits=new o({startX:this.props.startScroll,startY:this.props.startScroll,endX:this.props.endScroll,endY:this.props.endScroll}),this):(r?(this.limits=function(t,e,i,s,n,r){var a=i.translateY||A,l=b(i.translateX||A,t.width),h=l.start,u=l.end,c=b(a,t.height),d=c.start,p=c.end,f=t.top-e.height,v=t.left-e.width,m=t.bottom,g=t.right,w=1,x=1;n===exports.ScrollAxis.vertical&&(x=w=C(d,p,e.height+t.height));var E=1,_=1;return n===exports.ScrollAxis.horizontal&&(_=E=C(h,u,e.width+t.width)),d<0&&(f+=d*w),p>0&&(m+=p*x),h<0&&(v+=h*E),u>0&&(g+=u*_),v+=s.x,g+=s.x,f+=s.y,m+=s.y,r&&(s.y+t.top<e.height&&(w=1,x=C(d,p,(m=t.bottom+s.y)-(f=0)),p>0&&(m+=p*x)),s.x+t.left<e.width&&(E=1,_=C(h,u,(g=t.right+s.x)-(v=0)),u>0&&(g+=u*_))),new o({startX:v,startY:f,endX:g,endY:m,startMultiplierX:E,endMultiplierX:_,startMultiplierY:w,endMultiplierY:x})}(this.rect,t,this.effects,e,this.scrollAxis,this.props.shouldStartAnimationInitialInView),this.scaledEffects=function(t,e){var i=l({},t);return i.translateX&&(i.translateX=l({},t.translateX,{start:i.translateX.start*e.startMultiplierX,end:i.translateX.end*e.endMultiplierX})),i.translateY&&(i.translateY=l({},t.translateY,{start:i.translateY.start*e.startMultiplierY,end:i.translateY.end*e.endMultiplierY})),i}(this.effects,this.limits)):this.limits=function(t,e,i,s){var n=t.top-e.height,r=t.left-e.width,a=t.bottom,l=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:l+=i.x,endY:a+=i.y})}(this.rect,t,e,this.props.shouldStartAnimationInitialInView),this._setElementStyles(),this)},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._setElementStyles=function(){y(this.scaledEffects||this.effects,this.progress,this.el)},e._updateElementProgress=function(t){this.progress=t,this.props.onProgressChange&&this.props.onProgressChange(this.progress),this.props.onChange&&this.props.onChange(this),this._setElementStyles()},e._setElementEasing=function(t){this.easing=v(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=x(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=x(this.limits.startY,this.limits.totalY,t.y,this.easing);return this._updateElementProgress(i),this},t}(),Y=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,this.dx=0,this.dy=0}return t.prototype.setScroll=function(t,e){return this.dx=t-this.x,this.dy=e-this.y,this.x=t,this.y=e,this},t}();function M(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){return t=!0,!0}});window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(t){}return t}var Q=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 Y({width:0,height:0,scrollContainer:this._hasScrollContainer?s:void 0}),this._ticking=!1,this._supportsPassive=M(),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","_handleUpdateCache","_updateAllElements","_updateElementPosition","_setViewSize","getElements","createElement","removeElementById","resetElementStyles","updateElementPropsById","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._handleUpdateCache,!1),window.addEventListener("blur",this._handleUpdateCache,!1),window.addEventListener("focus",this._handleUpdateCache,!1),window.addEventListener("load",this._handleUpdateCache,!1)},e._removeListeners=function(t){t.removeEventListener("scroll",this._handleScroll,!1),window.removeEventListener("resize",this._handleUpdateCache,!1),window.removeEventListener("blur",this._handleUpdateCache,!1),window.removeEventListener("focus",this._handleUpdateCache,!1),window.removeEventListener("load",this._handleUpdateCache,!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._handleUpdateCache=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){i&&t.setCachedAttributes(e.view,e.scroll),e._updateElementPosition(t)})),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 X(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){O(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 Y({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 O(t)})),this.elements=void 0},t}();exports.Element=X,exports.Limits=o,exports.ParallaxController=Q,exports.Rect=c,exports.Scroll=P,exports.View=Y,exports.createId=u,exports.getProgressAmount=x,exports.isElementInView=E,exports.parseElementTransitionEffects=w,exports.parseValueAndUnit=p,exports.resetStyles=O,exports.scaleBetween=_,exports.scaleEffectByProgress=S,exports.setElementStyles=y,exports.testForPassiveScroll=M;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,i,s,n,r,o=(t=require("bezier-easing"))&&"object"==typeof t&&"default"in t?t.default:t,a=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={})).speed="speed",e.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",(r=exports.EasingPreset||(exports.EasingPreset={})).ease="ease",r.easeIn="easeIn",r.easeOut="easeOut",r.easeInOut="easeInOut",r.easeInQuad="easeInQuad",r.easeInCubic="easeInCubic",r.easeInQuart="easeInQuart",r.easeInQuint="easeInQuint",r.easeInSine="easeInSine",r.easeInExpo="easeInExpo",r.easeInCirc="easeInCirc",r.easeOutQuad="easeOutQuad",r.easeOutCubic="easeOutCubic",r.easeOutQuart="easeOutQuart",r.easeOutQuint="easeOutQuint",r.easeOutSine="easeOutSine",r.easeOutExpo="easeOutExpo",r.easeOutCirc="easeOutCirc",r.easeInOutQuad="easeInOutQuad",r.easeInOutCubic="easeInOutCubic",r.easeInOutQuart="easeInOutQuart",r.easeInOutQuint="easeInOutQuint",r.easeInOutSine="easeInOutSine",r.easeInOutExpo="easeInOutExpo",r.easeInOutCirc="easeInOutCirc",r.easeInBack="easeInBack",r.easeOutBack="easeOutBack",r.easeInOutBack="easeInOutBack";var h=0;function u(){return++h}var c=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}(),d=[exports.ScaleUnits[""],exports.Units.px,exports.Units["%"],exports.RotationUnits.deg,exports.RotationUnits.turn,exports.RotationUnits.rad];function p(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,!d.includes(i.unit))throw new Error("Invalid unit provided.");return i}var f={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 v(t){if(Array.isArray(t))return o(t[0],t[1],t[2],t[3]);if("string"==typeof t&&void 0!==f[t]){var e=f[t];return o(e[0],e[1],e[2],e[3])}}var g=Object.values(exports.ValidCSSEffects),m={speed:"px",translateX:"%",translateY:"%",rotate:"deg",rotateX:"deg",rotateY:"deg",rotateZ:"deg",scale:"",scaleX:"",scaleY:"",scaleZ:"",opacity:""};function w(t,e){var i={};return g.forEach((function(s){var n=m[s];if("number"==typeof(null==t?void 0:t[s])){var r=null==t?void 0:t[s],o=-10*(r||0)+"px",a=p(10*(r||0)+"px"),l=p(o),h={start:a.value,end:l.value,unit:a.unit};e===exports.ScrollAxis.vertical&&(i.translateY=h),e===exports.ScrollAxis.horizontal&&(i.translateX=h)}if(Array.isArray(null==t?void 0:t[s])){var u=null==t?void 0:t[s];if(void 0!==u[0]&&void 0!==u[1]){var c=p(null==u?void 0:u[0],n),d=p(null==u?void 0:u[1],n),f=v(null==u?void 0:u[2]);if(i[s]={start:c.value,end:d.value,unit:c.unit,easing:f},c.unit!==d.unit)throw new Error("Must provide matching units for the min and max offset values of each axis.")}}})),i}function x(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 _(t,e,i,s,n){return(i-e)*(t-s)/(n-s)+e}function S(t,e){return{value:_("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 I(t,e,i){if(i){var s=function(t,e){return y.reduce((function(i,s){var n=t[s]&&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&&S(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 C(t){var e=t.el;e&&(e.style.transform="",e.style.opacity="")}function O(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 b(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 A={start:0,end:0,unit:""},X=function(){function t(t){var e,i;this.el=t.el,this.props=t.props,this.scrollAxis=t.scrollAxis,this.id=u(),this.effects=w(this.props,this.scrollAxis),this.isInView=null,this.progress=0,this._setElementEasing(t.props.easing),e=t.el,i=Object.keys(this.effects).includes("opacity"),e.style.willChange="transform"+(i?",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=w(t,this.scrollAxis),this._setElementEasing(t.easing),this},e.setCachedAttributes=function(t,e){C(this),this.rect=new c({el:this.props.targetElement||this.el,rootMargin:this.props.rootMargin,view:t});var i,s,n,r=(s=this.effects,n=this.scrollAxis,!(i=this.props).rootMargin&&!i.targetElement&&!!(s.translateX&&n===exports.ScrollAxis.horizontal||s.translateY&&n===exports.ScrollAxis.vertical));return"number"==typeof this.props.startScroll&&"number"==typeof this.props.endScroll?(this.limits=new a({startX:this.props.startScroll,startY:this.props.startScroll,endX:this.props.endScroll,endY:this.props.endScroll}),this):(r?(this.limits=function(t,e,i,s,n,r){var o=i.translateY||A,l=b(i.translateX||A,t.width),h=l.start,u=l.end,c=b(o,t.height),d=c.start,p=c.end,f=t.top-e.height,v=t.left-e.width,g=t.bottom,m=t.right,w=1,x=1;n===exports.ScrollAxis.vertical&&(x=w=O(d,p,e.height+t.height));var E=1,_=1;if(n===exports.ScrollAxis.horizontal&&(_=E=O(h,u,e.width+t.width)),d<0&&(f+=d*w),p>0&&(g+=p*x),h<0&&(v+=h*E),u>0&&(m+=u*_),v+=s.x,m+=s.x,f+=s.y,g+=s.y,r){var S=s.y+t.top<e.height,y=s.x+t.left<e.width,I=s.y+t.bottom>e.scrollHeight-e.height,C=s.x+t.right>e.scrollWidth-e.height;S&&I&&(w=1,x=1,f=0,g=e.scrollHeight-e.height),y&&C&&(E=1,_=1,v=0,m=e.scrollWidth-e.width),!S&&I&&(w=O(d,p,(g=e.scrollHeight-e.height)-(f=t.top-e.height+s.y)),x=1,d<0&&(f+=d*w)),!y&&C&&(E=O(h,u,(m=e.scrollWidth-e.width)-(v=t.left-e.width+s.x)),_=1,h<0&&(v+=h*E)),S&&!I&&(w=1,x=O(d,p,(g=t.bottom+s.y)-(f=0)),p>0&&(g+=p*x)),y&&!C&&(E=1,_=O(h,u,(m=t.right+s.x)-(v=0)),u>0&&(m+=u*_))}return new a({startX:v,startY:f,endX:m,endY:g,startMultiplierX:E,endMultiplierX:_,startMultiplierY:w,endMultiplierY:x})}(this.rect,t,this.effects,e,this.scrollAxis,this.props.shouldAlwaysCompleteAnimation),this.scaledEffects=function(t,e){var i=l({},t);return i.translateX&&(i.translateX=l({},t.translateX,{start:i.translateX.start*e.startMultiplierX,end:i.translateX.end*e.endMultiplierX})),i.translateY&&(i.translateY=l({},t.translateY,{start:i.translateY.start*e.startMultiplierY,end:i.translateY.end*e.endMultiplierY})),i}(this.effects,this.limits)):this.limits=function(t,e,i,s){var n=t.top-e.height,r=t.left-e.width,o=t.bottom,l=t.right;return r+=i.x,l+=i.x,n+=i.y,o+=i.y,s&&(i.y+t.top<e.height&&(n=0),i.x+t.left<e.width&&(r=0),o>e.scrollHeight-e.height&&(o=e.scrollHeight-e.height),l>e.scrollWidth-e.width&&(l=e.scrollWidth-e.width)),new a({startX:r,startY:n,endX:l,endY:o})}(this.rect,t,e,this.props.shouldAlwaysCompleteAnimation),this._setElementStyles(),this)},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._setElementStyles=function(){I(this.scaledEffects||this.effects,this.progress,this.el)},e._updateElementProgress=function(t){this.progress=t,this.props.onProgressChange&&this.props.onProgressChange(this.progress),this.props.onChange&&this.props.onChange(this),this._setElementStyles()},e._setElementEasing=function(t){this.easing=v(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=x(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=x(this.limits.startY,this.limits.totalY,t.y,this.easing);return this._updateElementProgress(i),this},t}(),Y=function(){function t(t){var e=t.width,i=t.height,s=t.scrollHeight,n=t.scrollWidth;this.scrollContainer=t.scrollContainer,this.width=e,this.height=i,this.scrollHeight=s,this.scrollWidth=n}return t.prototype.setSize=function(t){var e=t.height,i=t.scrollHeight,s=t.scrollWidth;return this.width=t.width,this.height=e,this.scrollHeight=i,this.scrollWidth=s,this},t}(),P=function(){function t(t,e){this.x=t,this.y=e,this.dx=0,this.dy=0}return t.prototype.setScroll=function(t,e){return this.dx=t-this.x,this.dy=e-this.y,this.x=t,this.y=e,this},t}();function M(){var t=!1;try{var e=Object.defineProperty({},"passive",{get:function(){return t=!0,!0}});window.addEventListener("test",null,e),window.removeEventListener("test",null,e)}catch(t){}return t}var Q=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 Y({width:0,height:0,scrollWidth:0,scrollHeight:0,scrollContainer:this._hasScrollContainer?s:void 0}),this._ticking=!1,this._supportsPassive=M(),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","_handleUpdateCache","_updateAllElements","_updateElementPosition","_setViewSize","getElements","createElement","removeElementById","resetElementStyles","updateElementPropsById","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._handleUpdateCache,!1),window.addEventListener("blur",this._handleUpdateCache,!1),window.addEventListener("focus",this._handleUpdateCache,!1),window.addEventListener("load",this._handleUpdateCache,!1)},e._removeListeners=function(t){t.removeEventListener("scroll",this._handleScroll,!1),window.removeEventListener("resize",this._handleUpdateCache,!1),window.removeEventListener("blur",this._handleUpdateCache,!1),window.removeEventListener("focus",this._handleUpdateCache,!1),window.removeEventListener("load",this._handleUpdateCache,!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._handleUpdateCache=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){i&&t.setCachedAttributes(e.view,e.scroll),e._updateElementPosition(t)})),this._ticking=!1},e._updateElementPosition=function(t){t.props.disabled||t.updatePosition(this.scroll)},e._setViewSize=function(){if(this._hasScrollContainer)return this.view.setSize({width:this.viewEl.offsetWidth,height:this.viewEl.offsetHeight,scrollHeight:this.viewEl.scrollHeight,scrollWidth:this.viewEl.scrollWidth});var t=document.documentElement,e=window.innerWidth||t.clientWidth,i=window.innerHeight||t.clientHeight;return this.view.setSize({width:e,height:i,scrollHeight:t.scrollHeight,scrollWidth:t.scrollWidth})},e.getElements=function(){return this.elements},e.createElement=function(t){var e=new X(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){C(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 Y({width:0,height:0,scrollWidth:0,scrollHeight: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 C(t)})),this.elements=void 0},t}();exports.Element=X,exports.Limits=a,exports.ParallaxController=Q,exports.Rect=c,exports.Scroll=P,exports.View=Y,exports.createId=u,exports.getProgressAmount=x,exports.isElementInView=E,exports.parseElementTransitionEffects=w,exports.parseValueAndUnit=p,exports.resetStyles=C,exports.scaleBetween=_,exports.scaleEffectByProgress=S,exports.setElementStyles=I,exports.testForPassiveScroll=M;
 //# sourceMappingURL=parallax-controller.cjs.production.min.js.map

dist/parallax-controller.esm.js

@@ -442,3 +442,3 @@ import bezier from 'bezier-easing';
 
-function createLimitsForRelativeElements(rect, view, scroll, shouldStartAnimationInitialInView) {
+function createLimitsForRelativeElements(rect, view, scroll, shouldAlwaysCompleteAnimation) {
   var startY = rect.top - view.height;
@@ -454,3 +454,3 @@ var startX = rect.left - view.width;
 
-  if (shouldStartAnimationInitialInView) {
+  if (shouldAlwaysCompleteAnimation) {
     if (scroll.y + rect.top < view.height) {
@@ -463,2 +463,10 @@ startY = 0;
     }
+
+    if (endY > view.scrollHeight - view.height) {
+      endY = view.scrollHeight - view.height;
+    }
+
+    if (endX > view.scrollWidth - view.width) {
+      endX = view.scrollWidth - view.width;
+    }
   }
@@ -510,3 +518,3 @@
 };
-function createLimitsWithTranslationsForRelativeElements(rect, view, effects, scroll, scrollAxis, shouldStartAnimationInitialInView) {
+function createLimitsWithTranslationsForRelativeElements(rect, view, effects, scroll, scrollAxis, shouldAlwaysCompleteAnimation) {
   // get start and end accounting for percent effects
@@ -566,12 +574,58 @@ var translateX = effects.translateX || DEFAULT_VALUE;
   startY += scroll.y;
-  endY += scroll.y;
+  endY += scroll.y; // NOTE: please refactor and isolate this :(
 
-  if (shouldStartAnimationInitialInView) {
-    if (scroll.y + rect.top < view.height) {
+  if (shouldAlwaysCompleteAnimation) {
+    var topBeginsInView = scroll.y + rect.top < view.height;
+    var leftBeginsInView = scroll.x + rect.left < view.width;
+    var bottomEndsInView = scroll.y + rect.bottom > view.scrollHeight - view.height;
+    var rightEndsInView = scroll.x + rect.right > view.scrollWidth - view.height;
+
+    if (topBeginsInView && bottomEndsInView) {
+      startMultiplierY = 1;
+      endMultiplierY = 1;
       startY = 0;
+      endY = view.scrollHeight - view.height;
+    }
+
+    if (leftBeginsInView && rightEndsInView) {
+      startMultiplierX = 1;
+      endMultiplierX = 1;
+      startX = 0;
+      endX = view.scrollWidth - view.width;
+    }
+
+    if (!topBeginsInView && bottomEndsInView) {
+      startY = rect.top - view.height + scroll.y;
+      endY = view.scrollHeight - view.height;
+      var totalDist = endY - startY;
+      startMultiplierY = getTranslateScalar(startTranslateYPx, endTranslateYPx, totalDist);
+      endMultiplierY = 1;
+
+      if (startTranslateYPx < 0) {
+        startY = startY + startTranslateYPx * startMultiplierY;
+      }
+    }
+
+    if (!leftBeginsInView && rightEndsInView) {
+      startX = rect.left - view.width + scroll.x;
+      endX = view.scrollWidth - view.width;
+
+      var _totalDist = endX - startX;
+
+      startMultiplierX = getTranslateScalar(startTranslateXPx, endTranslateXPx, _totalDist);
+      endMultiplierX = 1;
+
+      if (startTranslateXPx < 0) {
+        startX = startX + startTranslateXPx * startMultiplierX;
+      }
+    }
+
+    if (topBeginsInView && !bottomEndsInView) {
+      startY = 0;
       endY = rect.bottom + scroll.y;
-      var totalDist = endY - startY; // no multiplier for start value since this is initially in view
 
+      var _totalDist2 = endY - startY;
+
       startMultiplierY = 1;
-      endMultiplierY = getTranslateScalar(startTranslateYPx, endTranslateYPx, totalDist); // Apply the scale to end initial values
+      endMultiplierY = getTranslateScalar(startTranslateYPx, endTranslateYPx, _totalDist2);
 
@@ -583,11 +637,10 @@ if (endTranslateYPx > 0) {
 
-    if (scroll.x + rect.left < view.width) {
+    if (leftBeginsInView && !rightEndsInView) {
       startX = 0;
       endX = rect.right + scroll.x;
 
-      var _totalDist = endX - startX; // no multiplier for start value since this is initially in view
+      var _totalDist3 = endX - startX;
 
-
       startMultiplierX = 1;
-      endMultiplierX = getTranslateScalar(startTranslateXPx, endTranslateXPx, _totalDist); // Apply the scale to end initial values
+      endMultiplierX = getTranslateScalar(startTranslateXPx, endTranslateXPx, _totalDist3);
 
@@ -693,6 +746,6 @@ if (endTranslateXPx > 0) {
     if (shouldScaleTranslateEffects) {
-      this.limits = createLimitsWithTranslationsForRelativeElements(this.rect, view, this.effects, scroll, this.scrollAxis, this.props.shouldStartAnimationInitialInView);
+      this.limits = createLimitsWithTranslationsForRelativeElements(this.rect, view, this.effects, scroll, this.scrollAxis, this.props.shouldAlwaysCompleteAnimation);
       this.scaledEffects = scaleTranslateEffectsForSlowerScroll(this.effects, this.limits);
     } else {
-      this.limits = createLimitsForRelativeElements(this.rect, view, scroll, this.props.shouldStartAnimationInitialInView);
+      this.limits = createLimitsForRelativeElements(this.rect, view, scroll, this.props.shouldAlwaysCompleteAnimation);
     }
@@ -777,2 +830,4 @@
         height = _ref.height,
+        scrollHeight = _ref.scrollHeight,
+        scrollWidth = _ref.scrollWidth,
         scrollContainer = _ref.scrollContainer;
@@ -782,2 +837,4 @@ this.scrollContainer = scrollContainer;
     this.height = height;
+    this.scrollHeight = scrollHeight;
+    this.scrollWidth = scrollWidth;
   }
@@ -787,5 +844,11 @@
 
-  _proto.setSize = function setSize(width, height) {
+  _proto.setSize = function setSize(_ref2) {
+    var width = _ref2.width,
+        height = _ref2.height,
+        scrollHeight = _ref2.scrollHeight,
+        scrollWidth = _ref2.scrollWidth;
     this.width = width;
     this.height = height;
+    this.scrollHeight = scrollHeight;
+    this.scrollWidth = scrollWidth;
     return this;
@@ -865,2 +928,4 @@ };
       height: 0,
+      scrollWidth: 0,
+      scrollHeight: 0,
       scrollContainer: this._hasScrollContainer ? scrollContainer : undefined
@@ -1010,7 +1075,16 @@ }); // Ticking
     if (this._hasScrollContainer) {
-      // @ts-ignore
-      var _width = this.viewEl.offsetWidth; // @ts-ignore
+      // @ts-expect-error
+      var _width = this.viewEl.offsetWidth; // @ts-expect-error
 
-      var _height = this.viewEl.offsetHeight;
-      return this.view.setSize(_width, _height);
+      var _height = this.viewEl.offsetHeight; // @ts-expect-error
+
+      var _scrollHeight = this.viewEl.scrollHeight; // @ts-expect-error
+
+      var _scrollWidth = this.viewEl.scrollWidth;
+      return this.view.setSize({
+        width: _width,
+        height: _height,
+        scrollHeight: _scrollHeight,
+        scrollWidth: _scrollWidth
+      });
     }
@@ -1021,3 +1095,10 @@
     var height = window.innerHeight || html.clientHeight;
-    return this.view.setSize(width, height);
+    var scrollHeight = html.scrollHeight;
+    var scrollWidth = html.scrollWidth;
+    return this.view.setSize({
+      width: width,
+      height: height,
+      scrollHeight: scrollHeight,
+      scrollWidth: scrollWidth
+    });
   }
@@ -1125,2 +1206,4 @@ /**
       height: 0,
+      scrollWidth: 0,
+      scrollHeight: 0,
       scrollContainer: el
@@ -1127,0 +1210,0 @@ });

dist/types.d.ts

@@ -87,3 +87,3 @@ import { EasingFunction } from 'bezier-easing';
     rootMargin?: RootMarginShape;
-    shouldStartAnimationInitialInView?: boolean;
+    shouldAlwaysCompleteAnimation?: boolean;
     startScroll?: number;
@@ -90,0 +90,0 @@ endScroll?: number;

package.json

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

src/classes/Element.ts

@@ -112,3 +112,3 @@ import bezier from 'bezier-easing';
         this.scrollAxis,
-        this.props.shouldStartAnimationInitialInView
+        this.props.shouldAlwaysCompleteAnimation
       );
@@ -125,3 +125,3 @@
         scroll,
-        this.props.shouldStartAnimationInitialInView
+        this.props.shouldAlwaysCompleteAnimation
       );
@@ -128,0 +128,0 @@ }

src/classes/ParallaxController.ts

@@ -68,2 +68,4 @@ import { resetStyles } from '../helpers/elementStyles';
       height: 0,
+      scrollWidth: 0,
+      scrollHeight: 0,
       scrollContainer: this._hasScrollContainer ? scrollContainer : undefined,
@@ -202,7 +204,11 @@ });
     if (this._hasScrollContainer) {
-      // @ts-ignore
+      // @ts-expect-error
       const width = this.viewEl.offsetWidth;
-      // @ts-ignore
+      // @ts-expect-error
       const height = this.viewEl.offsetHeight;
-      return this.view.setSize(width, height);
+      // @ts-expect-error
+      const scrollHeight = this.viewEl.scrollHeight;
+      // @ts-expect-error
+      const scrollWidth = this.viewEl.scrollWidth;
+      return this.view.setSize({ width, height, scrollHeight, scrollWidth });
     }
@@ -213,4 +219,6 @@
     const height = window.innerHeight || html.clientHeight;
+    const scrollHeight = html.scrollHeight;
+    const scrollWidth = html.scrollWidth;
 
-    return this.view.setSize(width, height);
+    return this.view.setSize({ width, height, scrollHeight, scrollWidth });
   }
@@ -296,3 +304,9 @@
     this._hasScrollContainer = !!el;
-    this.view = new View({ width: 0, height: 0, scrollContainer: el });
+    this.view = new View({
+      width: 0,
+      height: 0,
+      scrollWidth: 0,
+      scrollHeight: 0,
+      scrollContainer: el,
+    });
     this._setViewSize();
@@ -299,0 +313,0 @@ this._addListeners(this.viewEl);

src/classes/View.test.ts

@@ -9,2 +9,4 @@ import { View } from './View';
       height: 150,
+      scrollWidth: 100,
+      scrollHeight: 3000,
       scrollContainer: div,
@@ -24,8 +26,17 @@ });
       height: 150,
+      scrollWidth: 100,
+      scrollHeight: 3000,
       scrollContainer: div,
     });
-    const instance = view.setSize(400, 250);
+    const instance = view.setSize({
+      width: 400,
+      height: 250,
+      scrollWidth: 400,
+      scrollHeight: 4000,
+    });
     expect(instance).toMatchObject({
       width: 400,
       height: 250,
+      scrollWidth: 400,
+      scrollHeight: 4000,
       scrollContainer: div,
@@ -32,0 +43,0 @@ });

src/classes/View.ts

@@ -5,2 +5,4 @@ export class View {
   height: number;
+  scrollHeight: number;
+  scrollWidth: number;
 
@@ -10,2 +12,4 @@ constructor({
     height,
+    scrollHeight,
+    scrollWidth,
     scrollContainer,
@@ -15,2 +19,4 @@ }: {
     height: number;
+    scrollHeight: number;
+    scrollWidth: number;
     scrollContainer?: HTMLElement;
@@ -21,9 +27,23 @@ }) {
     this.height = height;
+    this.scrollHeight = scrollHeight;
+    this.scrollWidth = scrollWidth;
   }
 
-  setSize(width: number, height: number) {
+  setSize({
+    width,
+    height,
+    scrollHeight,
+    scrollWidth,
+  }: {
+    width: number;
+    height: number;
+    scrollHeight: number;
+    scrollWidth: number;
+  }) {
     this.width = width;
     this.height = height;
+    this.scrollHeight = scrollHeight;
+    this.scrollWidth = scrollWidth;
     return this;
   }
 }

src/helpers/createLimitsForRelativeElements.test.ts

@@ -6,3 +6,8 @@ import { Scroll, View } from '..';
 
-const DEFAULT_VIEW = new View({ width: 768, height: 1024 });
+const DEFAULT_VIEW = new View({
+  width: 768,
+  height: 1024,
+  scrollHeight: 2048,
+  scrollWidth: 768,
+});
 
@@ -25,3 +30,3 @@ const DEFAULT_SCROLL = new Scroll(0, 0);
   ),
-  view: new View({ width: 768, height: 1024 }),
+  view: DEFAULT_VIEW,
 });
@@ -28,0 +33,0 @@

src/helpers/createLimitsForRelativeElements.ts

@@ -8,3 +8,3 @@ import { Rect, Scroll, View } from '..';
   scroll: Scroll,
-  shouldStartAnimationInitialInView?: boolean
+  shouldAlwaysCompleteAnimation?: boolean
 ): Limits {
@@ -22,3 +22,3 @@ let startY = rect.top - view.height;
 
-  if (shouldStartAnimationInitialInView) {
+  if (shouldAlwaysCompleteAnimation) {
     if (scroll.y + rect.top < view.height) {
@@ -30,2 +30,8 @@ startY = 0;
     }
+    if (endY > view.scrollHeight - view.height) {
+      endY = view.scrollHeight - view.height;
+    }
+    if (endX > view.scrollWidth - view.width) {
+      endX = view.scrollWidth - view.width;
+    }
   }
@@ -32,0 +38,0 @@

src/helpers/createLimitsWithTranslationsForRelativeElements.ts

@@ -23,3 +23,3 @@ import { ParsedValueEffect } from '../types';
   scrollAxis: ValidScrollAxis,
-  shouldStartAnimationInitialInView?: boolean
+  shouldAlwaysCompleteAnimation?: boolean
 ): Limits {
@@ -86,8 +86,57 @@ // get start and end accounting for percent effects
 
-  if (shouldStartAnimationInitialInView) {
-    if (scroll.y + rect.top < view.height) {
+  // NOTE: please refactor and isolate this :(
+  if (shouldAlwaysCompleteAnimation) {
+    const topBeginsInView = scroll.y + rect.top < view.height;
+    const leftBeginsInView = scroll.x + rect.left < view.width;
+    const bottomEndsInView =
+      scroll.y + rect.bottom > view.scrollHeight - view.height;
+    const rightEndsInView =
+      scroll.x + rect.right > view.scrollWidth - view.height;
+
+    if (topBeginsInView && bottomEndsInView) {
+      startMultiplierY = 1;
+      endMultiplierY = 1;
       startY = 0;
+      endY = view.scrollHeight - view.height;
+    }
+    if (leftBeginsInView && rightEndsInView) {
+      startMultiplierX = 1;
+      endMultiplierX = 1;
+      startX = 0;
+      endX = view.scrollWidth - view.width;
+    }
+
+    if (!topBeginsInView && bottomEndsInView) {
+      startY = rect.top - view.height + scroll.y;
+      endY = view.scrollHeight - view.height;
+      const totalDist = endY - startY;
+      startMultiplierY = getTranslateScalar(
+        startTranslateYPx,
+        endTranslateYPx,
+        totalDist
+      );
+      endMultiplierY = 1;
+      if (startTranslateYPx < 0) {
+        startY = startY + startTranslateYPx * startMultiplierY;
+      }
+    }
+    if (!leftBeginsInView && rightEndsInView) {
+      startX = rect.left - view.width + scroll.x;
+      endX = view.scrollWidth - view.width;
+      const totalDist = endX - startX;
+      startMultiplierX = getTranslateScalar(
+        startTranslateXPx,
+        endTranslateXPx,
+        totalDist
+      );
+      endMultiplierX = 1;
+      if (startTranslateXPx < 0) {
+        startX = startX + startTranslateXPx * startMultiplierX;
+      }
+    }
+
+    if (topBeginsInView && !bottomEndsInView) {
+      startY = 0;
       endY = rect.bottom + scroll.y;
       const totalDist = endY - startY;
-      // no multiplier for start value since this is initially in view
       startMultiplierY = 1;
@@ -99,3 +148,2 @@ endMultiplierY = getTranslateScalar(
       );
-      // Apply the scale to end initial values
       if (endTranslateYPx > 0) {
@@ -105,7 +153,6 @@ endY = endY + endTranslateYPx * endMultiplierY;
     }
-    if (scroll.x + rect.left < view.width) {
+    if (leftBeginsInView && !rightEndsInView) {
       startX = 0;
       endX = rect.right + scroll.x;
       const totalDist = endX - startX;
-      // no multiplier for start value since this is initially in view
       startMultiplierX = 1;
@@ -117,3 +164,2 @@ endMultiplierX = getTranslateScalar(
       );
-      // Apply the scale to end initial values
       if (endTranslateXPx > 0) {
@@ -120,0 +166,0 @@ endX = endX + endTranslateXPx * endMultiplierX;

src/types.ts

@@ -103,3 +103,3 @@ import { EasingFunction } from 'bezier-easing';
   /* Start animation at initial position if the element is positioned inside the view when scroll is at zero */
-  shouldStartAnimationInitialInView?: boolean;
+  shouldAlwaysCompleteAnimation?: boolean;
 
@@ -106,0 +106,0 @@ startScroll?: number;

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

416849

increased by5.71%

Lines of code

5473

increased by4.81%

No dependency changes