parallax-controller - npm Package Compare versions

Comparing version 1.0.7 to 1.1.0

dist/helpers/parseElementTransitionEffects.d.ts

@@ -0,4 +1,5 @@
+import { ValidScrollAxis } from '..';
 import { ValidCSSEffects, ParallaxElementConfig, ParallaxStartEndEffects, AllValidUnits } from '../types';
 export declare const PARALLAX_EFFECTS: ValidCSSEffects[];
-export declare const MAP_EFFECT_TO_DEFAULT_VALUE: {
+export declare const MAP_EFFECT_TO_DEFAULT_UNIT: {
     [key in ValidCSSEffects]: AllValidUnits;
@@ -9,2 +10,2 @@ };
  */
-export declare function parseElementTransitionEffects(props: ParallaxElementConfig): ParallaxStartEndEffects;
+export declare function parseElementTransitionEffects(props: ParallaxElementConfig, scrollAxis: ValidScrollAxis): ParallaxStartEndEffects;

dist/parallax-controller.cjs.development.js

@@ -43,2 +43,3 @@ 'use strict';
 (function (ValidCSSEffects) {
+  ValidCSSEffects["speed"] = "speed";
   ValidCSSEffects["translateX"] = "translateX";
@@ -251,3 +252,4 @@ ValidCSSEffects["translateY"] = "translateY";
 var PARALLAX_EFFECTS = /*#__PURE__*/Object.values(exports.ValidCSSEffects);
-var MAP_EFFECT_TO_DEFAULT_VALUE = {
+var MAP_EFFECT_TO_DEFAULT_UNIT = {
+  speed: 'px',
   translateX: '%',
@@ -269,24 +271,51 @@ translateY: '%',
 
-function parseElementTransitionEffects(props) {
+function parseElementTransitionEffects(props, scrollAxis) {
   var parsedEffects = {};
   PARALLAX_EFFECTS.forEach(function (key) {
-    var _props$key, _props$key2;
+    var defaultValue = MAP_EFFECT_TO_DEFAULT_UNIT[key]; // If the provided type is a number, this must be the speed prop
+    // in which case we need to construct the proper translate config
 
-    if (typeof (props == null ? void 0 : (_props$key = props[key]) == null ? void 0 : _props$key[0]) !== 'undefined' && typeof (props == null ? void 0 : (_props$key2 = props[key]) == null ? void 0 : _props$key2[1]) !== 'undefined') {
-      var _props$key3, _props$key4, _props$key5;
-
-      var defaultValue = MAP_EFFECT_TO_DEFAULT_VALUE[key];
-      var startParsed = parseValueAndUnit(props == null ? void 0 : (_props$key3 = props[key]) == null ? void 0 : _props$key3[0], defaultValue);
-      var endParsed = parseValueAndUnit(props == null ? void 0 : (_props$key4 = props[key]) == null ? void 0 : _props$key4[1], defaultValue);
-      var easing = createEasingFunction(props == null ? void 0 : (_props$key5 = props[key]) == null ? void 0 : _props$key5[2]);
-      parsedEffects[key] = {
+    if (typeof (props == null ? void 0 : props[key]) === 'number') {
+      var value = props == null ? void 0 : props[key];
+      var startSpeed = (value || 0) * 10 + "px";
+      var endSpeed = (value || 0) * -10 + "px";
+      var startParsed = parseValueAndUnit(startSpeed);
+      var endParsed = parseValueAndUnit(endSpeed);
+      var speedConfig = {
         start: startParsed.value,
         end: endParsed.value,
-        unit: startParsed.unit,
-        easing: easing
-      };
+        unit: startParsed.unit
+      }; // Manually set translate y value
 
-      if (startParsed.unit !== endParsed.unit) {
-        throw new Error('Must provide matching units for the min and max offset values of each axis.');
+      if (scrollAxis === exports.ScrollAxis.vertical) {
+        parsedEffects.translateY = speedConfig;
+      } // Manually set translate y value
+
+
+      if (scrollAxis === exports.ScrollAxis.horizontal) {
+        parsedEffects.translateX = speedConfig;
       }
+    } // The rest are standard effect being parsed
+
+
+    if (Array.isArray(props == null ? void 0 : props[key])) {
+      var _value = props == null ? void 0 : props[key];
+
+      if (typeof _value[0] !== 'undefined' && typeof _value[1] !== 'undefined') {
+        var _startParsed = parseValueAndUnit(_value == null ? void 0 : _value[0], defaultValue);
+
+        var _endParsed = parseValueAndUnit(_value == null ? void 0 : _value[1], defaultValue);
+
+        var easing = createEasingFunction(_value == null ? void 0 : _value[2]);
+        parsedEffects[key] = {
+          start: _startParsed.value,
+          end: _endParsed.value,
+          unit: _startParsed.unit,
+          easing: easing
+        };
+
+        if (_startParsed.unit !== _endParsed.unit) {
+          throw new Error('Must provide matching units for the min and max offset values of each axis.');
+        }
+      }
     }
@@ -607,3 +636,3 @@ });
     this.id = createId();
-    this.effects = parseElementTransitionEffects(this.props);
+    this.effects = parseElementTransitionEffects(this.props, this.scrollAxis);
     this.isInView = null;
@@ -622,3 +651,3 @@ this.progress = 0;
     this.props = _extends({}, this.props, nextProps);
-    this.effects = parseElementTransitionEffects(nextProps);
+    this.effects = parseElementTransitionEffects(nextProps, this.scrollAxis);
 
@@ -625,0 +654,0 @@ this._setElementEasing(nextProps.easing);

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={})).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={translateX:"%",translateY:"%",rotate:"deg",rotateX:"deg",rotateY:"deg",rotateZ:"deg",scale:"",scaleX:"",scaleY:"",scaleZ:"",opacity:""};function w(t){var e={};return m.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,a,o,l=g[i],h=p(null==t||null==(r=t[i])?void 0:r[0],l),u=p(null==t||null==(a=t[i])?void 0:a[1],l),c=v(null==t||null==(o=t[i])?void 0:o[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 E(t,e,i,s){var n=(i-t)/e;return s&&(n=s(n)),n}function x(t,e,i){return i>=t&&i<=e}function _(t,e,i,s,n){return(i-e)*(t-s)/(n-s)+e}function I(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 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]&&I(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&&I(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 X={start:0,end:0,unit:""},Y=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.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._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=(s=this.effects,!((i=this.props).rootMargin||i.targetElement||!s.translateX&&!s.translateY));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):(n?(this.limits=function(t,e,i,s,n){var r=i.translateY||X,a=b(i.translateX||X,t.width),l=a.start,h=a.end,u=b(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(l,h,e.width+t.width),x=E;return c<0&&(p+=c*g),d>0&&(v+=d*w),l<0&&(f+=l*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(l,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=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=x(this.limits.startX,this.limits.endX,t.x);if(this._updateElementIsInView(e),!e)return this;var i=E(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=x(this.limits.startY,this.limits.endY,t.y);if(this._updateElementIsInView(e),!this.isInView)return this;var i=E(this.limits.startY,this.limits.totalY,t.y,this.easing);return this._updateElementProgress(i),this},t}(),P=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,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 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 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 M(n[0],n[1]),this.view=new P({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","_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 Y(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 P({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=Y,exports.Limits=o,exports.ParallaxController=Q,exports.Rect=c,exports.Scroll=M,exports.View=P,exports.createId=u,exports.getProgressAmount=E,exports.isElementInView=x,exports.parseElementTransitionEffects=w,exports.parseValueAndUnit=p,exports.resetStyles=O,exports.scaleBetween=_,exports.scaleEffectByProgress=I,exports.setElementStyles=y,exports.testForPassiveScroll=A;
+"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 E(t,e,i,s){var n=(i-t)/e;return s&&(n=s(n)),n}function x(t,e,i){return i>=t&&i<=e}function _(t,e,i,s,n){return(i-e)*(t-s)/(n-s)+e}function I(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 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]&&I(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&&I(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 X={start:0,end:0,unit:""},Y=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=(s=this.effects,!((i=this.props).rootMargin||i.targetElement||!s.translateX&&!s.translateY));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):(n?(this.limits=function(t,e,i,s,n){var r=i.translateY||X,a=b(i.translateX||X,t.width),l=a.start,h=a.end,u=b(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(l,h,e.width+t.width),x=E;return c<0&&(p+=c*g),d>0&&(v+=d*w),l<0&&(f+=l*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(l,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=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=x(this.limits.startX,this.limits.endX,t.x);if(this._updateElementIsInView(e),!e)return this;var i=E(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=x(this.limits.startY,this.limits.endY,t.y);if(this._updateElementIsInView(e),!this.isInView)return this;var i=E(this.limits.startY,this.limits.totalY,t.y,this.easing);return this._updateElementProgress(i),this},t}(),P=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}(),A=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(){t=!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 A(n[0],n[1]),this.view=new P({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 Y(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 P({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=Y,exports.Limits=o,exports.ParallaxController=Q,exports.Rect=c,exports.Scroll=A,exports.View=P,exports.createId=u,exports.getProgressAmount=E,exports.isElementInView=x,exports.parseElementTransitionEffects=w,exports.parseValueAndUnit=p,exports.resetStyles=O,exports.scaleBetween=_,exports.scaleEffectByProgress=I,exports.setElementStyles=y,exports.testForPassiveScroll=M;
 //# sourceMappingURL=parallax-controller.cjs.production.min.js.map

dist/parallax-controller.esm.js

@@ -39,2 +39,3 @@ import bezier from 'bezier-easing';
 (function (ValidCSSEffects) {
+  ValidCSSEffects["speed"] = "speed";
   ValidCSSEffects["translateX"] = "translateX";
@@ -257,3 +258,4 @@ ValidCSSEffects["translateY"] = "translateY";
 var PARALLAX_EFFECTS = /*#__PURE__*/Object.values(ValidCSSEffects);
-var MAP_EFFECT_TO_DEFAULT_VALUE = {
+var MAP_EFFECT_TO_DEFAULT_UNIT = {
+  speed: 'px',
   translateX: '%',
@@ -275,24 +277,51 @@ translateY: '%',
 
-function parseElementTransitionEffects(props) {
+function parseElementTransitionEffects(props, scrollAxis) {
   var parsedEffects = {};
   PARALLAX_EFFECTS.forEach(function (key) {
-    var _props$key, _props$key2;
+    var defaultValue = MAP_EFFECT_TO_DEFAULT_UNIT[key]; // If the provided type is a number, this must be the speed prop
+    // in which case we need to construct the proper translate config
 
-    if (typeof (props == null ? void 0 : (_props$key = props[key]) == null ? void 0 : _props$key[0]) !== 'undefined' && typeof (props == null ? void 0 : (_props$key2 = props[key]) == null ? void 0 : _props$key2[1]) !== 'undefined') {
-      var _props$key3, _props$key4, _props$key5;
-
-      var defaultValue = MAP_EFFECT_TO_DEFAULT_VALUE[key];
-      var startParsed = parseValueAndUnit(props == null ? void 0 : (_props$key3 = props[key]) == null ? void 0 : _props$key3[0], defaultValue);
-      var endParsed = parseValueAndUnit(props == null ? void 0 : (_props$key4 = props[key]) == null ? void 0 : _props$key4[1], defaultValue);
-      var easing = createEasingFunction(props == null ? void 0 : (_props$key5 = props[key]) == null ? void 0 : _props$key5[2]);
-      parsedEffects[key] = {
+    if (typeof (props == null ? void 0 : props[key]) === 'number') {
+      var value = props == null ? void 0 : props[key];
+      var startSpeed = (value || 0) * 10 + "px";
+      var endSpeed = (value || 0) * -10 + "px";
+      var startParsed = parseValueAndUnit(startSpeed);
+      var endParsed = parseValueAndUnit(endSpeed);
+      var speedConfig = {
         start: startParsed.value,
         end: endParsed.value,
-        unit: startParsed.unit,
-        easing: easing
-      };
+        unit: startParsed.unit
+      }; // Manually set translate y value
 
-      if (startParsed.unit !== endParsed.unit) {
-        throw new Error('Must provide matching units for the min and max offset values of each axis.');
+      if (scrollAxis === ScrollAxis.vertical) {
+        parsedEffects.translateY = speedConfig;
+      } // Manually set translate y value
+
+
+      if (scrollAxis === ScrollAxis.horizontal) {
+        parsedEffects.translateX = speedConfig;
       }
+    } // The rest are standard effect being parsed
+
+
+    if (Array.isArray(props == null ? void 0 : props[key])) {
+      var _value = props == null ? void 0 : props[key];
+
+      if (typeof _value[0] !== 'undefined' && typeof _value[1] !== 'undefined') {
+        var _startParsed = parseValueAndUnit(_value == null ? void 0 : _value[0], defaultValue);
+
+        var _endParsed = parseValueAndUnit(_value == null ? void 0 : _value[1], defaultValue);
+
+        var easing = createEasingFunction(_value == null ? void 0 : _value[2]);
+        parsedEffects[key] = {
+          start: _startParsed.value,
+          end: _endParsed.value,
+          unit: _startParsed.unit,
+          easing: easing
+        };
+
+        if (_startParsed.unit !== _endParsed.unit) {
+          throw new Error('Must provide matching units for the min and max offset values of each axis.');
+        }
+      }
     }
@@ -613,3 +642,3 @@ });
     this.id = createId();
-    this.effects = parseElementTransitionEffects(this.props);
+    this.effects = parseElementTransitionEffects(this.props, this.scrollAxis);
     this.isInView = null;
@@ -628,3 +657,3 @@ this.progress = 0;
     this.props = _extends({}, this.props, nextProps);
-    this.effects = parseElementTransitionEffects(nextProps);
+    this.effects = parseElementTransitionEffects(nextProps, this.scrollAxis);
 
@@ -631,0 +660,0 @@ this._setElementEasing(nextProps.easing);

dist/types.d.ts

@@ -17,2 +17,3 @@ import { EasingFunction } from 'bezier-easing';
 export declare enum ValidCSSEffects {
+    'speed' = "speed",
     'translateX' = "translateX",
@@ -72,2 +73,3 @@ 'translateY' = "translateY",
 export declare type ParallaxElementConfig = {
+    speed?: number;
     disabled?: boolean;
@@ -74,0 +76,0 @@ translateX?: CSSEffect;

package.json

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

src/classes/Element.ts

@@ -54,3 +54,3 @@ import bezier from 'bezier-easing';
     this.id = createId();
-    this.effects = parseElementTransitionEffects(this.props);
+    this.effects = parseElementTransitionEffects(this.props, this.scrollAxis);
     this.isInView = null;
@@ -71,3 +71,3 @@ this.progress = 0;
     this.props = { ...this.props, ...nextProps };
-    this.effects = parseElementTransitionEffects(nextProps);
+    this.effects = parseElementTransitionEffects(nextProps, this.scrollAxis);
     this._setElementEasing(nextProps.easing);
@@ -74,0 +74,0 @@

src/helpers/parseElementTransitionEffects.test.ts

@@ -6,2 +6,3 @@ import {
 import { CSSEffect, ScaleOpacityEffect } from '../types';
+import { ScrollAxis } from '..';
 
@@ -17,3 +18,3 @@ describe('parseElementTransitionEffects', () => {
     };
-    expect(parseElementTransitionEffects(props)).toEqual({
+    expect(parseElementTransitionEffects(props, ScrollAxis.vertical)).toEqual({
       translateY: {
@@ -42,3 +43,3 @@ start: 0,
     };
-    expect(parseElementTransitionEffects(props)).toEqual({
+    expect(parseElementTransitionEffects(props, ScrollAxis.vertical)).toEqual({
       translateY: {
@@ -78,3 +79,3 @@ start: 100,
 
-    expect(parseElementTransitionEffects(effects)).toEqual(
+    expect(parseElementTransitionEffects(effects, ScrollAxis.vertical)).toEqual(
       expectedParsedEffects
@@ -84,2 +85,36 @@ );
 
+  describe('parses speed', () => {
+    it('and creates proper translate y effect for vertical scrolling', () => {
+      const effects = { speed: -10 };
+
+      const expectedParsedEffects = {
+        translateY: {
+          start: 10 * effects.speed,
+          end: -10 * effects.speed,
+          unit: 'px',
+        },
+      };
+
+      expect(
+        parseElementTransitionEffects(effects, ScrollAxis.vertical)
+      ).toEqual(expectedParsedEffects);
+    });
+
+    it('and creates proper translate x effect for horizontal scrolling', () => {
+      const effects = { speed: -10 };
+
+      const expectedParsedEffects = {
+        translateX: {
+          start: 10 * effects.speed,
+          end: -10 * effects.speed,
+          unit: 'px',
+        },
+      };
+
+      expect(
+        parseElementTransitionEffects(effects, ScrollAxis.horizontal)
+      ).toEqual(expectedParsedEffects);
+    });
+  });
+
   it('parses the scale properties for an element', () => {
@@ -91,3 +126,5 @@ const scaleProps: {
     };
-    expect(parseElementTransitionEffects(scaleProps)).toEqual({
+    expect(
+      parseElementTransitionEffects(scaleProps, ScrollAxis.vertical)
+    ).toEqual({
       scale: {
@@ -105,3 +142,5 @@ start: 1,
     };
-    expect(parseElementTransitionEffects(scaleXProps)).toEqual({
+    expect(
+      parseElementTransitionEffects(scaleXProps, ScrollAxis.vertical)
+    ).toEqual({
       scaleX: {
@@ -119,3 +158,5 @@ start: 1.3,
     };
-    expect(parseElementTransitionEffects(scaleYProps)).toEqual({
+    expect(
+      parseElementTransitionEffects(scaleYProps, ScrollAxis.vertical)
+    ).toEqual({
       scaleY: {
@@ -133,3 +174,5 @@ start: 0,
     };
-    expect(parseElementTransitionEffects(scaleZProps)).toEqual({
+    expect(
+      parseElementTransitionEffects(scaleZProps, ScrollAxis.vertical)
+    ).toEqual({
       scaleZ: {
@@ -145,3 +188,3 @@ start: 0,
   it('ignores and omits effects if no values are provided', () => {
-    expect(parseElementTransitionEffects({})).toEqual({});
+    expect(parseElementTransitionEffects({}, ScrollAxis.vertical)).toEqual({});
   });
@@ -154,4 +197,6 @@
     } = { translateY: ['100px', '-50%'], translateX: ['100px', '300%'] };
-    expect(() => parseElementTransitionEffects(props)).toThrow();
+    expect(() =>
+      parseElementTransitionEffects(props, ScrollAxis.vertical)
+    ).toThrow();
   });
 });

src/helpers/parseElementTransitionEffects.ts

@@ -0,1 +1,2 @@
+import { CSSEffect, ScrollAxis, ValidScrollAxis } from '..';
 import {
@@ -13,5 +14,6 @@ ParsedValueEffect,
 
-export const MAP_EFFECT_TO_DEFAULT_VALUE: {
+export const MAP_EFFECT_TO_DEFAULT_UNIT: {
   [key in ValidCSSEffects]: AllValidUnits;
 } = {
+  speed: 'px',
   translateX: '%',
@@ -33,3 +35,4 @@ translateY: '%',
 export function parseElementTransitionEffects(
-  props: ParallaxElementConfig
+  props: ParallaxElementConfig,
+  scrollAxis: ValidScrollAxis
 ): ParallaxStartEndEffects {
@@ -39,26 +42,55 @@ const parsedEffects: { [key: string]: ParsedValueEffect } = {};
   PARALLAX_EFFECTS.forEach((key: keyof typeof ValidCSSEffects) => {
-    if (
-      typeof props?.[key]?.[0] !== 'undefined' &&
-      typeof props?.[key]?.[1] !== 'undefined'
-    ) {
-      const defaultValue: AllValidUnits = MAP_EFFECT_TO_DEFAULT_VALUE[key];
+    const defaultValue: AllValidUnits = MAP_EFFECT_TO_DEFAULT_UNIT[key];
 
-      const startParsed = parseValueAndUnit(props?.[key]?.[0], defaultValue);
-      const endParsed = parseValueAndUnit(props?.[key]?.[1], defaultValue);
+    // If the provided type is a number, this must be the speed prop
+    // in which case we need to construct the proper translate config
+    if (typeof props?.[key] === 'number') {
+      const value = props?.[key] as number;
+      const startSpeed = `${(value || 0) * 10}px`;
+      const endSpeed = `${(value || 0) * -10}px`;
 
-      const easing = createEasingFunction(props?.[key]?.[2]);
+      const startParsed = parseValueAndUnit(startSpeed);
+      const endParsed = parseValueAndUnit(endSpeed);
 
-      parsedEffects[key] = {
+      const speedConfig = {
         start: startParsed.value,
         end: endParsed.value,
         unit: startParsed.unit,
-        easing,
       };
 
-      if (startParsed.unit !== endParsed.unit) {
-        throw new Error(
-          'Must provide matching units for the min and max offset values of each axis.'
-        );
+      // Manually set translate y value
+      if (scrollAxis === ScrollAxis.vertical) {
+        parsedEffects.translateY = speedConfig;
       }
+
+      // Manually set translate y value
+      if (scrollAxis === ScrollAxis.horizontal) {
+        parsedEffects.translateX = speedConfig;
+      }
     }
+
+    // The rest are standard effect being parsed
+    if (Array.isArray(props?.[key])) {
+      const value = props?.[key] as CSSEffect;
+
+      if (typeof value[0] !== 'undefined' && typeof value[1] !== 'undefined') {
+        const startParsed = parseValueAndUnit(value?.[0], defaultValue);
+        const endParsed = parseValueAndUnit(value?.[1], defaultValue);
+
+        const easing = createEasingFunction(value?.[2]);
+
+        parsedEffects[key] = {
+          start: startParsed.value,
+          end: endParsed.value,
+          unit: startParsed.unit,
+          easing,
+        };
+
+        if (startParsed.unit !== endParsed.unit) {
+          throw new Error(
+            'Must provide matching units for the min and max offset values of each axis.'
+          );
+        }
+      }
+    }
   });
@@ -65,0 +97,0 @@

src/types.ts

@@ -19,2 +19,3 @@ import { EasingFunction } from 'bezier-easing';
 export enum ValidCSSEffects {
+  'speed' = 'speed',
   'translateX' = 'translateX',
@@ -87,2 +88,3 @@ 'translateY' = 'translateY',
 export type ParallaxElementConfig = {
+  speed?: number;
   disabled?: boolean;
@@ -89,0 +91,0 @@ translateX?: CSSEffect;

No alert changes

Improved metrics

Total package byte prevSize

388009

increased by2.65%

Lines of code

5133

increased by2.29%

No dependency changes