diff --git a/README.md b/README.md
index 86a4452..80d1ee6 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,7 @@ To implement lax you need to create at least one _driver_, to provide values for
The easiest way to get started is to use presets via html classes. For example:
```html
-
+
```
Multiple presets can be chained together and they can be customised to suit your needs. Use the [preset explorer](https://alexfox.dev/lax.js/preset-explorer) to explore effects and see a simple example [here](https://alexfox.dev/lax.js/html-inline).
diff --git a/docs/examples/html-inline.html b/docs/examples/html-inline.html
index f865a2b..4cb2d7b 100644
--- a/docs/examples/html-inline.html
+++ b/docs/examples/html-inline.html
@@ -37,5 +37,5 @@
-
+
\ No newline at end of file
diff --git a/docs/lib/lax.min.js b/docs/lib/lax.min.js
index 1aa07ae..9c0f4a6 100644
--- a/docs/lib/lax.min.js
+++ b/docs/lib/lax.min.js
@@ -1 +1 @@
-"use strict";function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n=e.length)return t[e.length-1];var o,a=(a=e[o=i-1],e=e[i],(n-a)/(e-a));return r&&(a=r(a)),o=t[o],t=t[i],o*(1-(a=a))+t*a}(f,h,g?u%g:u,w),d&&(c=s*d,"absolute"===p&&(c=Math.abs(c)),w+=c),c="px"==(m||_.includes(a)?"px":P.includes(a)?"deg":"")?0:3,c=w.toFixed(c),i[a]=y?y(c,b.domElement):c+m)}}b.applyStyles(i),b.onUpdate&&b.onUpdate(e,b.domElement)}),_defineProperty(this,"calculateTransforms",function(){b.transforms={};var e,l=b.laxInstance.windowWidth;for(e in b.transformsData)!function(e){var o=b.transformsData[e],a={},t=o.presets;(void 0===t?[]:t).forEach(function(e){var t,n=_slicedToArray(e.split("-"),3),r=n[0],i=n[1],e=n[2],n=window.lax.presets[r];n?(t=n(i,e),Object.keys(t).forEach(function(e){o[e]=t[e]})):console.error("Lax preset cannot be found with name: ",r)}),delete o.presets;for(var n in o)!function(e){var t=_slicedToArray(o[e],3),n=t[0],r=void 0===n?[-1e9,1e9]:n,n=t[1],n=void 0===n?[-1e9,1e9]:n,t=t[2],t=void 0===t?{}:t,i=b.domElement.getBoundingClientRect(),r=c(r,l).map(function(e){return d(e,i,b.groupIndex)}),n=c(n,l).map(function(e){return d(e,i,b.groupIndex)});a[e]=[r,n,t]}(n);b.transforms[e]=a}(e)}),_defineProperty(this,"applyStyles",function(e){var r,i,o,t=(r=e,i={transform:"",filter:""},o={translateX:1e-5,translateY:1e-5,translateZ:1e-5},Object.keys(r).forEach(function(e){var t=r[e],n=_.includes(e)?"px":P.includes(e)?"deg":"";s.includes(e)?o[e]=t:l.includes(e)?i.transform+="".concat(e,"(").concat(t).concat(n,") "):u.includes(e)?i.filter+="".concat(e,"(").concat(t).concat(n,") "):i[e]="".concat(t).concat(n," ")}),i.transform="translate3d(".concat(o.translateX,"px, ").concat(o.translateY,"px, ").concat(o.translateZ,"px) ").concat(i.transform),i);Object.keys(t).forEach(function(e){b.domElement.style.setProperty(e,t[e])})}),this.selector=e,this.laxInstance=t,this.domElement=n,this.transformsData=r,this.groupIndex=i;var a=void 0===(i=o.style)?{}:i,o=o.onUpdate;Object.keys(a).forEach(function(e){n.style.setProperty(e,a[e])}),o&&(this.onUpdate=o),this.calculateTransforms()}"undefined"!=typeof module&&void 0!==module.exports?module.exports=e:window.lax=e}();
\ No newline at end of file
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n=e.length)return t[e.length-1];var o,a=(a=e[o=i-1],e=e[i],(n-a)/(e-a));return r&&(a=r(a)),o=t[o],t=t[i],o*(1-(a=a))+t*a}(f,h,g?u%g:u,w),d&&(c=s*d,"absolute"===m&&(c=Math.abs(c)),w+=c),c="px"==(p||_.includes(a)?"px":P.includes(a)?"deg":"")?0:3,c=w.toFixed(c),i[a]=y?y(c,b.domElement):c+p)}}b.applyStyles(i),b.onUpdate&&b.onUpdate(e,b.domElement)}),_defineProperty(this,"calculateTransforms",function(){b.transforms={};var e,l=b.laxInstance.windowWidth;for(e in b.transformsData)!function(e){var o=b.transformsData[e],a={},t=o.presets;(void 0===t?[]:t).forEach(function(e){var t,n=_slicedToArray(e.split(":"),3),r=n[0],i=n[1],e=n[2],n=window.lax.presets[r];n?(t=n(i,e),Object.keys(t).forEach(function(e){o[e]=t[e]})):console.error("Lax preset cannot be found with name: ",r)}),delete o.presets;for(var n in o)!function(e){var t=_slicedToArray(o[e],3),n=t[0],r=void 0===n?[-1e9,1e9]:n,n=t[1],n=void 0===n?[-1e9,1e9]:n,t=t[2],t=void 0===t?{}:t,i=b.domElement.getBoundingClientRect(),r=c(r,l).map(function(e){return d(e,i,b.groupIndex)}),n=c(n,l).map(function(e){return d(e,i,b.groupIndex)});a[e]=[r,n,t]}(n);b.transforms[e]=a}(e)}),_defineProperty(this,"applyStyles",function(e){var r,i,o,t=(r=e,i={transform:"",filter:""},o={translateX:1e-5,translateY:1e-5,translateZ:1e-5},Object.keys(r).forEach(function(e){var t=r[e],n=_.includes(e)?"px":P.includes(e)?"deg":"";s.includes(e)?o[e]=t:l.includes(e)?i.transform+="".concat(e,"(").concat(t).concat(n,") "):u.includes(e)?i.filter+="".concat(e,"(").concat(t).concat(n,") "):i[e]="".concat(t).concat(n," ")}),i.transform="translate3d(".concat(o.translateX,"px, ").concat(o.translateY,"px, ").concat(o.translateZ,"px) ").concat(i.transform),i);Object.keys(t).forEach(function(e){b.domElement.style.setProperty(e,t[e])})}),this.selector=e,this.laxInstance=t,this.domElement=n,this.transformsData=r,this.groupIndex=i;var a=void 0===(i=o.style)?{}:i,o=o.onUpdate;Object.keys(a).forEach(function(e){n.style.setProperty(e,a[e])}),o&&(this.onUpdate=o),this.calculateTransforms()}"undefined"!=typeof module&&void 0!==module.exports?module.exports=e:window.lax=e}();
\ No newline at end of file
diff --git a/docs/preset-explorer.html b/docs/preset-explorer.html
index e2821cc..6e388be 100644
--- a/docs/preset-explorer.html
+++ b/docs/preset-explorer.html
@@ -153,7 +153,7 @@
enabledPresets.forEach((presetName) => {
const control = controlData[presetName]
- const controlStr = control ? "-" + control.map(c => c.value).join("-") : ''
+ const controlStr = control ? ":" + control.map(c => c.value).join(":") : ''
const settingString = `${presetName}${controlStr}`
presets.push(settingString)
})
diff --git a/lib/lax.js b/lib/lax.js
index 74eccad..2916529 100644
--- a/lib/lax.js
+++ b/lib/lax.js
@@ -1,5 +1,9 @@
"use strict";
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -12,10 +16,6 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
(function () {
var inOutMap = function inOutMap() {
var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 30;
@@ -314,6 +314,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
});
flattenedStyles.transform = "translate3d(".concat(translate3dValues.translateX, "px, ").concat(translate3dValues.translateY, "px, ").concat(translate3dValues.translateZ, "px) ").concat(flattenedStyles.transform);
return flattenedStyles;
+ } // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes
+
+
+ function getScrollPosition() {
+ var supportPageOffset = window.pageXOffset !== undefined;
+ var isCSS1Compat = (document.compatMode || '') === 'CSS1Compat';
+ var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
+ var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
+ return [y, x];
}
function parseValue(val, _ref, index) {
@@ -330,8 +339,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var pageWidth = document.body.scrollWidth;
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
- var scrollTop = window.scrollY;
- var scrollLeft = window.scrollX;
+
+ var _getScrollPosition = getScrollPosition(),
+ _getScrollPosition2 = _slicedToArray(_getScrollPosition, 2),
+ scrollTop = _getScrollPosition2[0],
+ scrollLeft = _getScrollPosition2[1];
+
var left = x + scrollLeft;
var right = left + width;
var top = y + scrollTop;
@@ -366,7 +379,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var value = _this.lastValue;
if (frame % _this.frameStep === 0) {
- value = _this.getValueFn();
+ value = _this.getValueFn(frame);
}
if (_this.inertiaEnabled) {
@@ -386,7 +399,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
Object.keys(options).forEach(function (key) {
_this[key] = options[key];
});
- this.lastValue = this.getValueFn();
+ this.lastValue = this.getValueFn(0);
};
var LaxElement = function LaxElement(selector, laxInstance, domElement, transformsData) {
@@ -478,7 +491,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var _styleBindings$preset = styleBindings.presets,
presets = _styleBindings$preset === void 0 ? [] : _styleBindings$preset;
presets.forEach(function (presetString) {
- var _presetString$split = presetString.split("_"),
+ var _presetString$split = presetString.split(":"),
_presetString$split2 = _slicedToArray(_presetString$split, 3),
presetName = _presetString$split2[0],
y = _presetString$split2[1],
diff --git a/lib/lax.min.js b/lib/lax.min.js
index 75906ba..9c0f4a6 100644
--- a/lib/lax.min.js
+++ b/lib/lax.min.js
@@ -1 +1 @@
-"use strict";function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n=e.length)return t[e.length-1];var o,a=(a=e[o=i-1],e=e[i],(n-a)/(e-a));return r&&(a=r(a)),o=t[o],t=t[i],o*(1-(a=a))+t*a}(f,h,g?u%g:u,w),d&&(c=s*d,"absolute"===p&&(c=Math.abs(c)),w+=c),c="px"==(m||_.includes(a)?"px":P.includes(a)?"deg":"")?0:3,c=w.toFixed(c),i[a]=y?y(c,b.domElement):c+m)}}b.applyStyles(i),b.onUpdate&&b.onUpdate(e,b.domElement)}),_defineProperty(this,"calculateTransforms",function(){b.transforms={};var e,l=b.laxInstance.windowWidth;for(e in b.transformsData)!function(e){var o=b.transformsData[e],a={},t=o.presets;(void 0===t?[]:t).forEach(function(e){var t,n=_slicedToArray(e.split("_"),3),r=n[0],i=n[1],e=n[2],n=window.lax.presets[r];n?(t=n(i,e),Object.keys(t).forEach(function(e){o[e]=t[e]})):console.error("Lax preset cannot be found with name: ",r)}),delete o.presets;for(var n in o)!function(e){var t=_slicedToArray(o[e],3),n=t[0],r=void 0===n?[-1e9,1e9]:n,n=t[1],n=void 0===n?[-1e9,1e9]:n,t=t[2],t=void 0===t?{}:t,i=b.domElement.getBoundingClientRect(),r=c(r,l).map(function(e){return d(e,i,b.groupIndex)}),n=c(n,l).map(function(e){return d(e,i,b.groupIndex)});a[e]=[r,n,t]}(n);b.transforms[e]=a}(e)}),_defineProperty(this,"applyStyles",function(e){var r,i,o,t=(r=e,i={transform:"",filter:""},o={translateX:1e-5,translateY:1e-5,translateZ:1e-5},Object.keys(r).forEach(function(e){var t=r[e],n=_.includes(e)?"px":P.includes(e)?"deg":"";s.includes(e)?o[e]=t:l.includes(e)?i.transform+="".concat(e,"(").concat(t).concat(n,") "):u.includes(e)?i.filter+="".concat(e,"(").concat(t).concat(n,") "):i[e]="".concat(t).concat(n," ")}),i.transform="translate3d(".concat(o.translateX,"px, ").concat(o.translateY,"px, ").concat(o.translateZ,"px) ").concat(i.transform),i);Object.keys(t).forEach(function(e){b.domElement.style.setProperty(e,t[e])})}),this.selector=e,this.laxInstance=t,this.domElement=n,this.transformsData=r,this.groupIndex=i;var a=void 0===(i=o.style)?{}:i,o=o.onUpdate;Object.keys(a).forEach(function(e){n.style.setProperty(e,a[e])}),o&&(this.onUpdate=o),this.calculateTransforms()}"undefined"!=typeof module&&void 0!==module.exports?module.exports=e:window.lax=e}();
\ No newline at end of file
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperty(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(e,t):void 0}}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n=e.length)return t[e.length-1];var o,a=(a=e[o=i-1],e=e[i],(n-a)/(e-a));return r&&(a=r(a)),o=t[o],t=t[i],o*(1-(a=a))+t*a}(f,h,g?u%g:u,w),d&&(c=s*d,"absolute"===m&&(c=Math.abs(c)),w+=c),c="px"==(p||_.includes(a)?"px":P.includes(a)?"deg":"")?0:3,c=w.toFixed(c),i[a]=y?y(c,b.domElement):c+p)}}b.applyStyles(i),b.onUpdate&&b.onUpdate(e,b.domElement)}),_defineProperty(this,"calculateTransforms",function(){b.transforms={};var e,l=b.laxInstance.windowWidth;for(e in b.transformsData)!function(e){var o=b.transformsData[e],a={},t=o.presets;(void 0===t?[]:t).forEach(function(e){var t,n=_slicedToArray(e.split(":"),3),r=n[0],i=n[1],e=n[2],n=window.lax.presets[r];n?(t=n(i,e),Object.keys(t).forEach(function(e){o[e]=t[e]})):console.error("Lax preset cannot be found with name: ",r)}),delete o.presets;for(var n in o)!function(e){var t=_slicedToArray(o[e],3),n=t[0],r=void 0===n?[-1e9,1e9]:n,n=t[1],n=void 0===n?[-1e9,1e9]:n,t=t[2],t=void 0===t?{}:t,i=b.domElement.getBoundingClientRect(),r=c(r,l).map(function(e){return d(e,i,b.groupIndex)}),n=c(n,l).map(function(e){return d(e,i,b.groupIndex)});a[e]=[r,n,t]}(n);b.transforms[e]=a}(e)}),_defineProperty(this,"applyStyles",function(e){var r,i,o,t=(r=e,i={transform:"",filter:""},o={translateX:1e-5,translateY:1e-5,translateZ:1e-5},Object.keys(r).forEach(function(e){var t=r[e],n=_.includes(e)?"px":P.includes(e)?"deg":"";s.includes(e)?o[e]=t:l.includes(e)?i.transform+="".concat(e,"(").concat(t).concat(n,") "):u.includes(e)?i.filter+="".concat(e,"(").concat(t).concat(n,") "):i[e]="".concat(t).concat(n," ")}),i.transform="translate3d(".concat(o.translateX,"px, ").concat(o.translateY,"px, ").concat(o.translateZ,"px) ").concat(i.transform),i);Object.keys(t).forEach(function(e){b.domElement.style.setProperty(e,t[e])})}),this.selector=e,this.laxInstance=t,this.domElement=n,this.transformsData=r,this.groupIndex=i;var a=void 0===(i=o.style)?{}:i,o=o.onUpdate;Object.keys(a).forEach(function(e){n.style.setProperty(e,a[e])}),o&&(this.onUpdate=o),this.calculateTransforms()}"undefined"!=typeof module&&void 0!==module.exports?module.exports=e:window.lax=e}();
\ No newline at end of file
diff --git a/lib/lax.min.js.gz b/lib/lax.min.js.gz
index 71a9019..bf06561 100644
Binary files a/lib/lax.min.js.gz and b/lib/lax.min.js.gz differ
diff --git a/package.json b/package.json
index 60875b0..886c712 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "lax.js",
- "version": "2.0.2",
+ "version": "2.0.3",
"scripts": {
"build": "babel src -d lib && uglifyjs lib/lax.js -o lib/lax.min.js -c -m && gzip -c lib/lax.min.js > lib/lax.min.js.gz && cp lib/lax.min.js docs/lib/lax.min.js"
},
diff --git a/src/lax.js b/src/lax.js
index ca2473e..f324d16 100644
--- a/src/lax.js
+++ b/src/lax.js
@@ -440,7 +440,7 @@
presets.forEach((presetString) => {
- const [presetName, y, str] = presetString.split("_")
+ const [presetName, y, str] = presetString.split(":")
const presetFn = window.lax.presets[presetName]