Update README.md

[BUGFIX] Continue to allow empty options to be passed to `addElements`

README.md

@@ -1,3 +1,6 @@
+# Archive Notice
+Due to other commitments I am unable to continue maintaining this project. As far as I know it still works, but there are likely better, more up to date alterantives out there. 
+
 # lax.js
 
 Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. 
@@ -78,11 +81,11 @@ To implement lax you need to create at least one _driver_, to provide values for
 ```html
 <!-- JS -->
 <script>
-  window.onload = function() {
+  window.onload = function () {
     lax.init()
 
     // Add a driver that we use to control our animations
-    lax.addDriver('scrollY', function() {
+    lax.addDriver('scrollY', function () {
       return window.scrollY
     })
 
@@ -94,8 +97,8 @@ To implement lax you need to create at least one _driver_, to provide values for
           [0, 'screenWidth/2', 'screenWidth'],
         ]
       }
-    }
-  })
+    })
+  }
 </script>
 
 <!-- HTML -->
@@ -107,10 +110,10 @@ 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
-<div class="lax lax_preset_fadeIn-50-100 lax_preset_spin"></div>
+<div class="lax lax_preset_fadeIn:50:100 lax_preset_spin"></div>
 ```
 
-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).
+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/examples/html-inline).
 
 ## DOM behavior and usage with Frameworks 
 
@@ -177,6 +180,33 @@ Add static CSS to each element, for example:
 }
 ```
 
+#### `elements: Array<DOM nodes>`
+
+Pass references to raw DOM elements to allow for more flexible selection patterns. In this case, a unique `selector` must still be passed as the first argument, however it does _not_ need to be a valid DOM selector.
+
+This allows the library to tag the elements for removal later. Example:
+
+```js
+const myDomElements = $('.selector')
+
+{
+  elements: myDomElements
+}
+```
+
+#### `onUpdate: (driverValues: Object, domElement: DomElement) => void`
+A method called every frame with the current driverValues and domElement. This could be used to toggle classes on an element or set innerHTML. See it in action [here](https://alexfox.dev/lax.js/examples/on-update).
+
+The driver values are formatted as follows:
+```js
+{
+  scrollY: [  // Driver name
+    100,      // Driver value
+    0         // Driver inertia
+  ]
+}
+```
+
 # Going deeper
 
 ## Custom animations
@@ -206,7 +236,7 @@ The name of the driver you want to use as a source of values to map to your anim
 ### CSS property
 The name of the CSS property you want to animate, for example `opacity` or `rotate`. See a list of supported properties [here](#css-properties).
 
-> Some css properties, for example `box-shadow`, require a custom function to build the style string. To do this use the [cssFn](#cssfn-value-number--string) element option.
+> Some CSS properties, for example `box-shadow`, require a custom function to build the style string. To do this use the [cssFn](#cssfn-value-number--string) element option.
 
 ### Value maps
 The value maps are used to interpolate the driver value and output a value for your CSS property. For example:
@@ -234,7 +264,7 @@ Within the maps you can use strings for simple formulas as well as use special v
 
 See a list of available values [here](#special-values).
 
-You can also use mobile breakpoints within animation maps for more flexibility.
+You can also use mobile breakpoints within driver value maps and animation maps for more flexibility.
 
 ```javascript
 scrollY: {
@@ -270,20 +300,7 @@ Use in combination with `inertia`. If set to `absolute` the inertia value will a
 Define the unit to be appended to the end of the value, for example 
 For example `px` `deg`
 
-#### `onUpdate: (driverValues: Object, domElement: DomElement) => void`
-A method called every frame with the current driverValues and domElement. This could be used to toggle classes on an element or set innerHTML. See it in action [here](https://alexfox.dev/lax.js/examples/on-update).
-
-The driver values are formatted as follows:
-```js
-{
-  scrollY: [  // Drivr name
-    100,      // Driver value
-    0         // Driver inertia
-  ]
-}
-```
-
-#### `cssFn: (value: number) => string`
+#### `cssFn: (value: number, domElement: DomElement) => number | string`
 Some CSS properties require more complex strings as values. For example, `box-shadow` has multiple values that could be modified by a lax animation.
 
 ```javascript
@@ -293,6 +310,9 @@ Some CSS properties require more complex strings as values. For example, `box-sh
 };
 ```
 
+#### `easing: string`
+See a list of available values [here](#supported-easings).
+
 ## Optimising performance
 Lax.js has been designed to be performant but there are a few things to bare in mind when creating your websites.
 - Smaller elements perform better. 

docs/examples/html-inline.html

@@ -37,5 +37,5 @@
 </style>
 
 <body>
-  <div class="square lax lax_preset_spin-400-360 lax_preset_flipX"></div>
+  <div class="square lax lax_preset_spin:400:360 lax_preset_flipX"></div>
 </body>

docs/index.html

@@ -239,7 +239,7 @@
       position: fixed;
       left: 50vw;
       margin-left: -300px;
-      transform: scale(1);
+      transform: scale(0.25);
       transform-origin: 50% 50%;
       width: 600px;
       height: 600px;

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)
         })
@@ -470,7 +470,7 @@
     <div id="presetStringContainer">
       <div id="presetTextHelper">
         <span>Preset code</span>
-        <a href="">How to use</a>
+        <a href="https://github.com/alexfoxy/lax.js#using-presets">How to use</a>
       </div>
 
       <input id="presetString" />

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],

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"
   },

src/lax.js

@@ -205,33 +205,33 @@
       easeOutQuint: t => 1 + (--t) * t * t * t * t,
       easeInOutQuint: t => t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t,
       easeOutBounce: t => {
-        const n1 = 7.5625;
-        const d1 = 2.75;
+        const n1 = 7.5625
+        const d1 = 2.75
 
         if (t < 1 / d1) {
-          return n1 * t * t;
+          return n1 * t * t
         } else if (t < 2 / d1) {
-          return n1 * (t -= 1.5 / d1) * t + 0.75;
+          return n1 * (t -= 1.5 / d1) * t + 0.75
         } else if (t < 2.5 / d1) {
-          return n1 * (t -= 2.25 / d1) * t + 0.9375;
+          return n1 * (t -= 2.25 / d1) * t + 0.9375
         } else {
-          return n1 * (t -= 2.625 / d1) * t + 0.984375;
+          return n1 * (t -= 2.625 / d1) * t + 0.984375
         }
       },
       easeInBounce: t => {
-        return 1 - easings.easeOutBounce(1 - t);
+        return 1 - easings.easeOutBounce(1 - t)
       },
       easeOutBack: t => {
-        const c1 = 1.70158;
-        const c3 = c1 + 1;
+        const c1 = 1.70158
+        const c3 = c1 + 1
 
-        return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+        return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2)
       },
       easeInBack: t => {
-        const c1 = 1.70158;
-        const c3 = c1 + 1;
+        const c1 = 1.70158
+        const c3 = c1 + 1
 
-        return c3 * t * t * t - c1 * t * t;
+        return c3 * t * t * t - c1 * t * t
       },
     }
 
@@ -267,6 +267,17 @@
       return flattenedStyles
     }
 
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes
+    function getScrollPosition() {
+      const supportPageOffset = window.pageXOffset !== undefined
+      const isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat')
+
+      const x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft
+      const y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop
+
+      return [y, x]
+    }
+
     function parseValue(val, { width, height, x, y }, index) {
       if (typeof val === 'number') {
         return val
@@ -276,8 +287,7 @@
       const pageWidth = document.body.scrollWidth
       const screenWidth = window.innerWidth
       const screenHeight = window.innerHeight
-      const scrollTop = window.scrollY
-      const scrollLeft = window.scrollX
+      const [scrollTop, scrollLeft] = getScrollPosition()
 
       const left = x + scrollLeft
       const right = left + width
@@ -321,14 +331,14 @@
           this[key] = options[key]
         })
 
-        this.lastValue = this.getValueFn()
+        this.lastValue = this.getValueFn(0)
       }
 
       getValue = (frame) => {
         let value = this.lastValue
 
         if (frame % this.frameStep === 0) {
-          value = this.getValueFn()
+          value = this.getValueFn(frame)
         }
 
         if (this.inertiaEnabled) {
@@ -430,7 +440,7 @@
 
           presets.forEach((presetString) => {
 
-            const [presetName, y, str] = presetString.split("-")
+            const [presetName, y, str] = presetString.split(":")
 
             const presetFn = window.lax.presets[presetName]
 
@@ -450,7 +460,11 @@
           for (let key in styleBindings) {
             let [arr1 = [-1e9, 1e9], arr2 = [-1e9, 1e9], options = {}] = styleBindings[key]
 
+            const saveTransform = this.domElement.style.transform
+            this.domElement.style.removeProperty("transform")
             const bounds = this.domElement.getBoundingClientRect()
+            this.domElement.style.transform = saveTransform
+
             const parsedArr1 = getArrayValues(arr1, windowWidth).map(i => parseValue(i, bounds, this.groupIndex))
             const parsedArr2 = getArrayValues(arr2, windowWidth).map(i => parseValue(i, bounds, this.groupIndex))
 
@@ -571,8 +585,8 @@
         })
       }
 
-      addElements = (selector, transforms, options) => {
-        const domElements = document.querySelectorAll(selector)
+      addElements = (selector, transforms, options = {}) => {
+        const domElements = options.domElements || document.querySelectorAll(selector)
 
         domElements.forEach((domElement, i) => {
           this.elements.push(new LaxElement(selector, this, domElement, transforms, i, options))
@@ -596,7 +610,7 @@
   })()
 
   if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
-    module.exports = laxInstance;
+    module.exports = laxInstance
   else
-    window.lax = laxInstance;
+    window.lax = laxInstance
 })()

yarn.lock

@@ -980,15 +980,15 @@ braces@~3.0.2:
     fill-range "^7.0.1"
 
 browserslist@^4.14.5, browserslist@^4.14.6:
-  version "4.14.7"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.7.tgz#c071c1b3622c1c2e790799a37bb09473a4351cb6"
-  integrity sha512-BSVRLCeG3Xt/j/1cCGj1019Wbty0H+Yvu2AOuZSuoaUWn3RatbL33Cxk+Q4jRMRAbOm0p7SLravLjpnT6s0vzQ==
+  version "4.16.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
+  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
   dependencies:
-    caniuse-lite "^1.0.30001157"
-    colorette "^1.2.1"
-    electron-to-chromium "^1.3.591"
+    caniuse-lite "^1.0.30001219"
+    colorette "^1.2.2"
+    electron-to-chromium "^1.3.723"
     escalade "^3.1.1"
-    node-releases "^1.1.66"
+    node-releases "^1.1.71"
 
 cache-base@^1.0.1:
   version "1.0.1"
@@ -1013,10 +1013,10 @@ call-bind@^1.0.0:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.0"
 
-caniuse-lite@^1.0.30001157:
-  version "1.0.30001157"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz#2d11aaeb239b340bc1aa730eca18a37fdb07a9ab"
-  integrity sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA==
+caniuse-lite@^1.0.30001219:
+  version "1.0.30001228"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa"
+  integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==
 
 chalk@^2.0.0:
   version "2.4.2"
@@ -1091,10 +1091,10 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-colorette@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
-  integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
+colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
 commander@^4.0.1:
   version "4.1.1"
@@ -1184,10 +1184,10 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-electron-to-chromium@^1.3.591:
-  version "1.3.592"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.592.tgz#4621521b223bf6e5469373528321e185d3c24670"
-  integrity sha512-kGNowksvqQiPb1pUSQKpd8JFoGPLxYOwduNRCqCxGh/2Q1qE2JdmwouCW41lUzDxOb/2RIV4lR0tVIfboWlO9A==
+electron-to-chromium@^1.3.723:
+  version "1.3.736"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.736.tgz#f632d900a1f788dab22fec9c62ec5c9c8f0c4052"
+  integrity sha512-DY8dA7gR51MSo66DqitEQoUMQ0Z+A2DSXFi7tK304bdTVqczCAfUuyQw6Wdg8hIoo5zIxkU1L24RQtUce1Ioig==
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -1616,9 +1616,9 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
 lodash@^4.17.19:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 make-dir@^2.1.0:
   version "2.1.0"
@@ -1711,10 +1711,10 @@ nanomatch@^1.2.9:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-node-releases@^1.1.66:
-  version "1.1.66"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.66.tgz#609bd0dc069381015cd982300bae51ab4f1b1814"
-  integrity sha512-JHEQ1iWPGK+38VLB2H9ef2otU4l8s3yAMt9Xf934r6+ojCYDMHPMqvCc9TnzfeFSP1QEOeU6YZEd3+De0LTCgg==
+node-releases@^1.1.71:
+  version "1.1.72"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
+  integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
 
 normalize-path@^2.1.1:
   version "2.1.1"
@@ -1789,9 +1789,9 @@ path-is-absolute@^1.0.0:
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
 path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 picomatch@^2.0.4, picomatch@^2.2.1:
   version "2.2.2"