Merge pull request #129 from alexfoxy/dev

Merge 2.0.3 release

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,6 +7,9 @@ assignees: ''
 
 ---
 
+**lax.js version**
+Please note, only bugs in v2.0 or later will be fixed.
+
 **Describe the bug**
 A clear and concise description of what the bug is.
 

README.md

@@ -78,12 +78,12 @@ 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() {
-      return document.body.scrollTop
+    lax.addDriver('scrollY', function () {
+      return window.scrollY
     })
 
     // Add animation bindings to elements
@@ -94,8 +94,8 @@ To implement lax you need to create at least one _driver_, to provide values for
           [0, 'screenWidth/2', 'screenWidth'],
         ]
       }
-    }
-  })
+    })
+  }
 </script>
 
 <!-- HTML -->
@@ -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
-<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).
@@ -126,7 +126,7 @@ Drivers provide the values that _drive_ your animations. To set up a driver just
 lax.addDriver(
   'scrollY',                          // Driver name
   function(laxFrame) {                     
-    return document.body.scrollTop    // Value method
+    return window.scrollY    // Value method
   },
   { }                                 // Options
 )
@@ -177,6 +177,19 @@ Add static CSS to each element, for example:
 }
 ```
 
+#### `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 +219,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:
@@ -270,20 +283,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 +293,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

@@ -6,7 +6,7 @@
       lax.init()
 
       lax.addDriver('scrollY', function () {
-        return document.body.scrollTop
+        return window.scrollY
       })
     }
 
@@ -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/examples/inertia.html

@@ -6,7 +6,7 @@
       lax.init()
 
       lax.addDriver('scrollY', function () {
-        return document.body.scrollTop
+        return window.scrollY
       }, { inertiaEnabled: true })
 
       lax.addElements(".circle", {

docs/examples/on-update.html

@@ -6,7 +6,7 @@
       lax.init()
 
       lax.addDriver('scrollY', function () {
-        return document.body.scrollTop
+        return window.scrollY
       })
 
       lax.addElements("#text", {}, {

docs/examples/scroll.html

@@ -6,7 +6,7 @@
       lax.init()
 
       lax.addDriver('scrollY', function () {
-        return document.body.scrollTop
+        return window.scrollY
       })
 
       const container = document.querySelector('.container')

docs/examples/snap-scroll.html

@@ -158,11 +158,15 @@
   @media only screen and (max-width: 600px) {
     p {
       padding: 50px;
-      top: 6vh;
+      top: 55vh;
     }
 
     h1 {
-      top: 60vh;
+      top: 48vh;
+    }
+
+    .image {
+      top: -2vh;
     }
   }
 

docs/examples/sprite.html

@@ -6,7 +6,7 @@
       lax.init()
 
       lax.addDriver('scrollY', function () {
-        return document.body.scrollTop
+        return window.scrollY
       })
 
       const frameWidth = 370

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)
         })
@@ -304,7 +304,7 @@
       lax.init()
 
       lax.addDriver('scrollY', function () {
-        return document.body.scrollTop
+        return window.scrollY
       })
 
       updateLaxSettings()
@@ -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 = document.body.scrollTop;
-      var scrollLeft = document.body.scrollLeft;
+
+      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.1",
+  "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

@@ -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 = document.body.scrollTop
-      const scrollLeft = document.body.scrollLeft
+      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]