Merge pull request #129 from alexfoxy/dev

Merge 2.0.3 release
New build
2026-04-24 03:01:10 -04:00 · 2020-12-28 19:07:31 +00:00 · 2020-12-28 19:07:16 +00:00 · 2020-12-28 18:23:47 +00:00 · 2020-12-28 18:20:32 +00:00 · 2020-12-28 18:19:23 +00:00
10 changed files with 67 additions and 41 deletions
--- a/README.md
+++ b/README.md
@@ -78,11 +78,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 +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).
@@ -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. 
--- a/docs/examples/html-inline.html
+++ b/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>
--- a/docs/index.html
+++ b/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;
--- a/docs/lib/lax.min.js
+++ b/docs/lib/lax.min.js
--- 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)
        })
@@ -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" />
--- 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],
--- a/lib/lax.min.js
+++ b/lib/lax.min.js
--- a/lib/lax.min.js.gz
+++ b/lib/lax.min.js.gz
--- 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"
  },
--- a/src/lax.js
+++ b/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 = 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]
Author	SHA1	Message	Date
Alex Fox	607c580c92	Merge pull request #129 from alexfoxy/dev Merge 2.0.3 release	2020-12-28 19:07:31 +00:00
Alex Fox	9f2a396600	New build	2020-12-28 19:07:16 +00:00
Alex Fox	26496247c2	Updated build	2020-12-28 18:23:47 +00:00
Alex Fox	684a50a795	Merge pull request #128 from alexfoxy/bug/AF01/update-preset-deliminator Bug: AF01 Updated preset-deliminator to `:` to allow for negative values with presets	2020-12-28 18:20:32 +00:00
Alex Fox	42dd4d8e50	Updated preset-deliminator	2020-12-28 18:19:23 +00:00
Alex Fox	6b5fce714a	Merge pull request #119 from heyimbrucelee/master Use "_" char as delimiter for presets string	2020-12-28 18:12:49 +00:00
Alex Fox	6a6eedf156	Merge pull request #122 from arthurdenner/patch-1 docs: update element and animation options	2020-12-28 18:11:14 +00:00
Alex Fox	c27f2d1208	Merge pull request #127 from alexfoxy/bug/AF01/pass-frame-to-getValueFn Pass frame to getValueFn	2020-12-28 18:09:40 +00:00
Alex Fox	bdf8c186a0	Merge pull request #126 from alexfoxy/bug/AF01/pass-frame-to-getValueFn Bug: AF01 - pass frame to get value fn	2020-12-28 18:09:14 +00:00
Alex Fox	c84a79ba67	Pass frame to getValueFn	2020-12-28 18:07:50 +00:00
Alex Fox	47ac9f4531	Merge pull request #124 from susiwen8/fix-scrollY Fix: scrollY compatibility	2020-12-28 18:04:46 +00:00
Alex Fox	6715763440	Merge branch 'master' into dev	2020-12-28 18:02:52 +00:00
susiwen8	18679a9920	Fix: scrollY compatibility	2020-12-09 10:26:56 +08:00
Arthur Denner	b4c109d20f	docs: update element and animation options	2020-11-26 22:40:24 +01:00
me	2d38405398	Use "_" char as delimiter for presets string --> fix use of negative values	2020-11-23 15:16:55 +01:00
Alex Fox	362595b5db	Fix "how to use" link on preset-explorer	2020-11-16 21:03:55 +00:00
Alex Fox	239bc9cb86	Merge branch 'master' of https://github.com/alexfoxy/laxxx into master	2020-11-16 21:02:12 +00:00
Alex Fox	552314fa53	Fix X scale example	2020-11-16 21:02:09 +00:00
Alex Fox	b36213454b	Fix readme code	2020-11-16 21:00:34 +00:00