[ { "path": ".babelrc", "content": "{\n \"presets\": [\n \"@babel/preset-env\"\n ],\n \"plugins\": [\n \"@babel/plugin-proposal-class-properties\"\n ]\n}" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: bug\nassignees: ''\n\n---\n\n**lax.js version**\nPlease note, only bugs in v2.0 or later will be fixed.\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**Code**\nPlease provide a link to a repo or code example of the issue in question.\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n" }, { "path": ".gitignore", "content": "node_modules/\n.DS_Store\nLaxLogo.sketch" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2020 Alex Fox\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "# Archive Notice\nDue 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. \n\n# lax.js\n\nSimple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll. \n\n![Lax 2.0 Gif](https://i.imgur.com/XNvvAOv.gif)\n\n[>> DEMO <<](https://alexfox.dev/lax.js/)\n\n---\n## What's new with Lax.js 2.0\nLax.js 2.0 has been completely re-written with a focus on modularity and flexibility giving you more tools to create awesome animations.\n- New javascript animation syntax, allowing for more advanced effect combos\n- Use any value to drive animations, for example mouse position, time of day .. and of course scroll!\n- Animations can be given inertia when scrolling\n- Create custom CSS bindings \n- Animation easings\n- And much more..\n\n## Examples\n- [Scroll effect](https://alexfox.dev/lax.js/examples/scroll)\n- [Horizontal snap scroll](https://alexfox.dev/lax.js/examples/snap-scroll)\n- [Inertia](https://alexfox.dev/lax.js/examples/inertia)\n- [Video/Gif playback](https://alexfox.dev/lax.js/examples/sprite)\n- [Cursor position](https://alexfox.dev/lax.js/examples/cursor)\n- [Text input](https://alexfox.dev/lax.js/examples/input)\n- [Update HTML content](https://alexfox.dev/lax.js/examples/on-update)\n- [Preset Explorer](https://alexfox.dev/lax.js/preset-explorer)\n\n\n# Documentation\n\n### 1. Getting started\n\n- [Setup](#setup)\n- [Using presets](#using-presets)\n- [Usage with UI frameworks](#dom-behavior-and-usage-with-frameworks)\n- [Adding drivers](#adding-drivers)\n- [Adding elements](#adding-elements)\n\n### 2. Going deeper\n\n- [Custom animations](#custom-animations)\n- [Optimising performance](#optimising-performance)\n\n### 3. Glossary\n\n- [CSS properties](#css-properties)\n- [Special values](#special-values)\n- [Supported easings](#supported-easings)\n\n# Getting started\n\n### NPM Setup\n\n```bash\n# https://www.npmjs.com/package/lax.js\n\nnpm install lax.js\nyarn add lax.js\n```\n```js\nimport lax from 'lax.js'\n```\n\n### HTML setup\n\n```html\n\n\n\n```\n\n\n## Setup\n\nTo implement lax you need to create at least one _driver_, to provide values for animations, as well as the element animation bindings. Below is a simple example:\n\n```html\n\n\n\n\n
Hello
\n```\n\n## Using presets\n\nThe easiest way to get started is to use presets via html classes. For example: \n\n```html\n
\n```\n\nMultiple 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).\n\n## DOM behavior and usage with Frameworks \n\nTo increase performance, `lax.js` indexes the list of elements to animate when the page loads. If you're using a library like React, Vue or EmberJS, it is likely that you are adding elements after the initial window.onload. Because of this you will need to call `lax.addElements` when you add components to the DOM that you want to animate, and `lax.removeElements` when the component unmounts.\n\nPlease find a React example [here](https://codesandbox.io/s/laxjs-react-example-nc4h7). Other examples will be available soon for Vue.js and Angular.\n\n## Adding drivers\n\nDrivers provide the values that _drive_ your animations. To set up a driver just call `lax.addDriver` with a name and a function which returns a number. This method is called every frame to calculate the animations so keep the method as computationally _light_ as possible. The example below will be the most common use case for lax which returns the scrollY position of the window.\n\n```javascript\nlax.addDriver(\n 'scrollY', // Driver name\n function(laxFrame) { \n return window.scrollY // Value method\n },\n { } // Options\n)\n```\n\n### Driver options\n\n#### `inertiaEnabled: boolean = false`\n\nIf enabled, the driver will calculate the speed at which its value is changing. Used to add inertia to elements using the [inertia element option](#inertia-number).\n\nSee this in action in the [here](https://alexfox.dev/lax.js/examples/inertia).\n\n#### `frameStep: number = 1`\n\nBy default each driver updates its value every animation frame, around ~60 times per second. You can use the `frameStep` to reduce frequency of the driver value updating. For example a value of `2` would only update ~30 times per second and a value of `60` would only update about once per second.\n\n## Adding elements\n\nYou can add lax animations to an element using the `addElements` method:\n\n```javascript\nlax.addElements(\n '.selector', // Element selector rule\n { // Animation data\n scrollY: { \n opacity: [\n [0, 100],\n [1, 0]\n ]\n }\n },\n { \n style: {} // Element options\n }\n)\n```\n\n### Element options\n\n#### `style: StyleObject`\n\nAdd static CSS to each element, for example:\n\n```css\n{\n transform: '200ms scale ease-in-out';\n}\n```\n\n#### `elements: Array`\n\nPass 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.\n\nThis allows the library to tag the elements for removal later. Example:\n\n```js\nconst myDomElements = $('.selector')\n\n{\n elements: myDomElements\n}\n```\n\n#### `onUpdate: (driverValues: Object, domElement: DomElement) => void`\nA 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).\n\nThe driver values are formatted as follows:\n```js\n{\n scrollY: [ // Driver name\n 100, // Driver value\n 0 // Driver inertia\n ]\n}\n```\n\n# Going deeper\n\n## Custom animations\nCustom animations are defined using an object.\n\n```javascript\n// Animation data\n{\n scrollY: { // Driver name\n translateX: [ // CSS property\n ['elInY', 'elOutY'], // Driver value map\n [0, 'screenWidth'], // Animation value map\n {\n inertia: 10 // Options\n }\n ],\n opacity: [\n // etc\n ]\n }\n}\n```\n\n### Driver name\nThe name of the driver you want to use as a source of values to map to your animation, for example, the document's scrollY position. Read about adding drivers [here](#adding-drivers).\n\n### CSS property\nThe name of the CSS property you want to animate, for example `opacity` or `rotate`. See a list of supported properties [here](#css-properties).\n\n> 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.\n\n### Value maps\nThe value maps are used to interpolate the driver value and output a value for your CSS property. For example:\n\n```javascript\n[0, 200, 800] // Driver value map\n[0, 10, 20] // Animation value map\n\n// Result\n\n| In | Out |\n| --- | --- |\n| 0 | 0 |\n| 100 | 5 |\n| 200 | 10 |\n| 500 | 15 |\n| 800 | 20 |\n```\n\nWithin the maps you can use strings for simple formulas as well as use special values. e.g:\n\n```javascript\n['elInY', 'elCenterY-200', 'elCenterY',\n```\n\nSee a list of available values [here](#special-values).\n\nYou can also use mobile breakpoints within driver value maps and animation maps for more flexibility.\n\n```javascript\nscrollY: {\n translateX: [\n ['elInY', 'elCenterY', 'elOutY'],\n {\n 500: [10, 20, 50], // Screen width < 500\n 900: [30, 40, 60], // Screen width > 500 and < 900\n 1400: [30, 40, 60], // Screen width > 900\n },\n ];\n}\n```\n\n### Options\n\n#### `modValue: number | undefined`\nSet this option to modulus the value from the driver, for example if you want to loop the animation value as the driver value continues to increase.\n\n#### `frameStep: number = 1`\nBy default each animation updates its value every animation frame, around ~60 times per second. You can use the `frameStep` to reduce frequency of the animation updating. For example a value of `2` would only update ~30 times per second and a value of `60` would only update about once per second.\n\n#### `inertia: number`\nUse to add inertia to your animations. Use in combination with the [inertiaEnabled](#inertiaenabled-boolean--false) driver option.\n\nSee inertia in action [here](https://alexfox.dev/lax.js/examples/inertia).\n\n\n#### `inertiaMode: \"normal\" | \"absolute\"`\nUse in combination with `inertia`. If set to `absolute` the inertia value will always be a positive number via the `Math.abs` operator.\n\n#### `cssUnit: string = \"\"`\nDefine the unit to be appended to the end of the value, for example \nFor example `px` `deg`\n\n#### `cssFn: (value: number, domElement: DomElement) => number | string`\nSome CSS properties require more complex strings as values. For example, `box-shadow` has multiple values that could be modified by a lax animation.\n\n```javascript\n// Box-shadow example\n(val) => {\n return `${val}px ${val}px ${val}px rgba(0,0,0,0.5)`;\n};\n```\n\n#### `easing: string`\nSee a list of available values [here](#supported-easings).\n\n## Optimising performance\nLax.js has been designed to be performant but there are a few things to bare in mind when creating your websites.\n- Smaller elements perform better. \n- Postion `fixed` and `absolute` elements perform best as they do not trigger a layout change when updated.\n- Off-screen elements do not need to be updated so consider that when creating your animation value maps.\n- The css properties `blur`, `hue-rotate` and `brightness` are graphically intensive and do not run as smoothly as the other available properties.\n\n# Glossary\n\n## CSS properties\n\n| name |\n| ---------- |\n| opacity |\n| scaleX |\n| scaleY |\n| scale |\n| skewX |\n| skewY |\n| skew |\n| rotateX |\n| rotateY |\n| rotate |\n| translateX |\n| translateY |\n| translateZ |\n| blur |\n| hue-rotate |\n| brightness |\n\n## Special values\n\n| key | value |\n| ------------ | -------------------------------------------------------------------------------- |\n| screenWidth | current width of the screen |\n| screenHeight | current height of the screen |\n| pageWidth | width of the document |\n| pageHeight | height of the document |\n| elWidth | width of the element |\n| elHeight | height of the element |\n| elInY | window scrollY position when element will appear at the bottom of the screen |\n| elOutY | window scrollY position when element will disappear at the top of the screen |\n| elCenterY | window scrollY position when element will be centered vertically on the screen |\n| elInX | window scrollX position when element will appear at the right of the screen |\n| elOutX | window scrollX position when element will disappear at the left of the screen |\n| elCenterX | window scrollX position when element will be centered horizontally on the screen |\n| index | index of the element when added using `lax.addElements` |\n\n## Supported easings\n\n| name |\n| -------------- |\n| easeInQuad |\n| easeOutQuad |\n| easeInOutQuad |\n| easeInCubic |\n| easeOutCubic |\n| easeInOutCubic |\n| easeInQuart |\n| easeOutQuart |\n| easeInOutQuart |\n| easeInQuint |\n| easeOutQuint |\n| easeInOutQuint |\n| easeOutBounce |\n| easeInBounce |\n| easeOutBack |\n| easeInBack |\n" }, { "path": "docs/examples/cursor.html", "content": "\n \n \n\n\n\n\n\n
\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n

Lax.js

\n
\n" }, { "path": "docs/examples/html-inline.html", "content": "\n \n \n\n\n\n\n\n
\n" }, { "path": "docs/examples/inertia.html", "content": "\n \n \n\n\n\n\n\n
\n
\n" }, { "path": "docs/examples/input.html", "content": "\n \n \n\n\n\n\n\n \n" }, { "path": "docs/examples/on-update.html", "content": "\n \n \n\n\n\n\n\n
\n
\n" }, { "path": "docs/examples/scroll.html", "content": "\n \n \n\n\n\n\n\n
\n
\n" }, { "path": "docs/examples/snap-scroll.html", "content": "\n \n \n\n \n \n\n\n\n\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n

Superstar

\n

\n Classics never go out of style. An instant icon since their debut, adidas Superstar Shoes first rose to fame on\n the basketball courts of the '70s and haven't slowed their roll since.\n

\n
\n\n
\n
\n

Retrorun

\n

\n Retro design with a modern twist. Check out a busy side street or stroll to the corner store in these adidas\n running-inspired shoes. Suede overlays and contrast 3-Stripes give the flexible upper a sleek, sporty finish.\n

\n
\n\n
\n
\n

Grand Court

\n

\n A '70s style reborn. These shoes take inspiration from iconic sport styles of the past and move them into the\n future. The shoes craft an everyday look with a leather-like upper.\n

\n
\n" }, { "path": "docs/examples/sprite.html", "content": "\n \n \n\n\n\n\n\n
\n
\n" }, { "path": "docs/index.html", "content": "\n\n\n\n \n\n \n \n\n \n\n \n\n\n\n\n \n \n
\n \n
\n\n

scroll down

\n\n
\n \n
\n\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n

oooh

\n

aaah

\n\n

wheee!

\n\n
\n\n \n
\n Get lax.js\n
\n \n\n\n \n \n \n \n \n \n" }, { "path": "docs/preset-explorer.html", "content": "\n \n\n \n \n\n\n\n\n\n
\n

Lax preset explorer

\n\n
\n
\n Preset code\n How to use\n
\n\n \n \n
\n
\n\n
\n

Scroll Down..

\n

Scroll Up..

\n\n \n
\n\n" }, { "path": "jsconfig.json", "content": "{\n \"compilerOptions\": {\n \"checkJs\": true\n },\n}" }, { "path": "lib/lax.js", "content": "\"use strict\";\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _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; }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\n\nfunction _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.\"); }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _iterableToArrayLimit(arr, i) { if (typeof Symbol === \"undefined\" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n(function () {\n var inOutMap = function inOutMap() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 30;\n return [\"elInY+elHeight\", \"elCenterY-\".concat(y), \"elCenterY\", \"elCenterY+\".concat(y), \"elOutY-elHeight\"];\n };\n\n var laxPresets = {\n fadeInOut: function fadeInOut() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 30;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n return {\n \"opacity\": [inOutMap(y), [str, 1, 1, 1, str]]\n };\n },\n fadeIn: function fadeIn() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'elCenterY';\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n return {\n \"opacity\": [[\"elInY+elHeight\", y], [str, 1]]\n };\n },\n fadeOut: function fadeOut() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'elCenterY';\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n return {\n \"opacity\": [[y, \"elOutY-elHeight\"], [1, str]]\n };\n },\n blurInOut: function blurInOut() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;\n return {\n \"blur\": [inOutMap(y), [str, 0, 0, 0, str]]\n };\n },\n blurIn: function blurIn() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'elCenterY';\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;\n return {\n \"blur\": [[\"elInY+elHeight\", y], [str, 0]]\n };\n },\n blurOut: function blurOut() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'elCenterY';\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;\n return {\n \"opacity\": [[y, \"elOutY-elHeight\"], [0, str]]\n };\n },\n scaleInOut: function scaleInOut() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6;\n return {\n \"scale\": [inOutMap(y), [str, 1, 1, 1, str]]\n };\n },\n scaleIn: function scaleIn() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'elCenterY';\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6;\n return {\n \"scale\": [[\"elInY+elHeight\", y], [str, 1]]\n };\n },\n scaleOut: function scaleOut() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'elCenterY';\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6;\n return {\n \"scale\": [[y, \"elOutY-elHeight\"], [1, str]]\n };\n },\n slideX: function slideX() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;\n return {\n \"translateX\": [['elInY', y], [0, str]]\n };\n },\n slideY: function slideY() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 500;\n return {\n \"translateY\": [['elInY', y], [0, str]]\n };\n },\n spin: function spin() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 360;\n return {\n \"rotate\": [[0, y], [0, str], {\n modValue: y\n }]\n };\n },\n flipX: function flipX() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 360;\n return {\n \"rotateX\": [[0, y], [0, str], {\n modValue: y\n }]\n };\n },\n flipY: function flipY() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1000;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 360;\n return {\n \"rotateY\": [[0, y], [0, str], {\n modValue: y\n }]\n };\n },\n jiggle: function jiggle() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 40;\n return {\n \"skewX\": [[0, y * 1, y * 2, y * 3, y * 4], [0, str, 0, -str, 0], {\n modValue: y * 4\n }]\n };\n },\n seesaw: function seesaw() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 40;\n return {\n \"skewY\": [[0, y * 1, y * 2, y * 3, y * 4], [0, str, 0, -str, 0], {\n modValue: y * 4\n }]\n };\n },\n zigzag: function zigzag() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 100;\n return {\n \"translateX\": [[0, y * 1, y * 2, y * 3, y * 4], [0, str, 0, -str, 0], {\n modValue: y * 4\n }]\n };\n },\n hueRotate: function hueRotate() {\n var y = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 600;\n var str = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 360;\n return {\n \"hue-rotate\": [[0, y], [0, str], {\n modValue: y\n }]\n };\n }\n };\n\n var laxInstance = function () {\n var transformKeys = [\"perspective\", \"scaleX\", \"scaleY\", \"scale\", \"skewX\", \"skewY\", \"skew\", \"rotateX\", \"rotateY\", \"rotate\"];\n var filterKeys = [\"blur\", \"hue-rotate\", \"brightness\"];\n var translate3dKeys = [\"translateX\", \"translateY\", \"translateZ\"];\n var pxUnits = [\"perspective\", \"border-radius\", \"blur\", \"translateX\", \"translateY\", \"translateZ\"];\n var degUnits = [\"hue-rotate\", \"rotate\", \"rotateX\", \"rotateY\", \"skew\", \"skewX\", \"skewY\"];\n\n function getArrayValues(arr, windowWidth) {\n if (Array.isArray(arr)) return arr;\n var keys = Object.keys(arr).map(function (x) {\n return parseInt(x);\n }).sort(function (a, b) {\n return a > b ? 1 : -1;\n });\n var retKey = keys[keys.length - 1];\n\n for (var i = 0; i < keys.length; i++) {\n var key = keys[i];\n\n if (windowWidth < key) {\n retKey = key;\n break;\n }\n }\n\n return arr[retKey];\n }\n\n function lerp(start, end, t) {\n return start * (1 - t) + end * t;\n }\n\n function invlerp(a, b, v) {\n return (v - a) / (b - a);\n }\n\n function interpolate(arrA, arrB, v, easingFn) {\n var k = 0;\n arrA.forEach(function (a) {\n if (a < v) k++;\n });\n\n if (k <= 0) {\n return arrB[0];\n }\n\n if (k >= arrA.length) {\n return arrB[arrA.length - 1];\n }\n\n var j = k - 1;\n var vector = invlerp(arrA[j], arrA[k], v);\n if (easingFn) vector = easingFn(vector);\n var lerpVal = lerp(arrB[j], arrB[k], vector);\n return lerpVal;\n }\n\n var easings = {\n easeInQuad: function easeInQuad(t) {\n return t * t;\n },\n easeOutQuad: function easeOutQuad(t) {\n return t * (2 - t);\n },\n easeInOutQuad: function easeInOutQuad(t) {\n return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t;\n },\n easeInCubic: function easeInCubic(t) {\n return t * t * t;\n },\n easeOutCubic: function easeOutCubic(t) {\n return --t * t * t + 1;\n },\n easeInOutCubic: function easeInOutCubic(t) {\n return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;\n },\n easeInQuart: function easeInQuart(t) {\n return t * t * t * t;\n },\n easeOutQuart: function easeOutQuart(t) {\n return 1 - --t * t * t * t;\n },\n easeInOutQuart: function easeInOutQuart(t) {\n return t < .5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;\n },\n easeInQuint: function easeInQuint(t) {\n return t * t * t * t * t;\n },\n easeOutQuint: function easeOutQuint(t) {\n return 1 + --t * t * t * t * t;\n },\n easeInOutQuint: function easeInOutQuint(t) {\n return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;\n },\n easeOutBounce: function easeOutBounce(t) {\n var n1 = 7.5625;\n var d1 = 2.75;\n\n if (t < 1 / d1) {\n return n1 * t * t;\n } else if (t < 2 / d1) {\n return n1 * (t -= 1.5 / d1) * t + 0.75;\n } else if (t < 2.5 / d1) {\n return n1 * (t -= 2.25 / d1) * t + 0.9375;\n } else {\n return n1 * (t -= 2.625 / d1) * t + 0.984375;\n }\n },\n easeInBounce: function easeInBounce(t) {\n return 1 - easings.easeOutBounce(1 - t);\n },\n easeOutBack: function easeOutBack(t) {\n var c1 = 1.70158;\n var c3 = c1 + 1;\n return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);\n },\n easeInBack: function easeInBack(t) {\n var c1 = 1.70158;\n var c3 = c1 + 1;\n return c3 * t * t * t - c1 * t * t;\n }\n };\n\n function flattenStyles(styles) {\n var flattenedStyles = {\n transform: '',\n filter: ''\n };\n var translate3dValues = {\n translateX: 0.00001,\n translateY: 0.00001,\n translateZ: 0.00001\n };\n Object.keys(styles).forEach(function (key) {\n var val = styles[key];\n var unit = pxUnits.includes(key) ? 'px' : degUnits.includes(key) ? 'deg' : '';\n\n if (translate3dKeys.includes(key)) {\n translate3dValues[key] = val;\n } else if (transformKeys.includes(key)) {\n flattenedStyles.transform += \"\".concat(key, \"(\").concat(val).concat(unit, \") \");\n } else if (filterKeys.includes(key)) {\n flattenedStyles.filter += \"\".concat(key, \"(\").concat(val).concat(unit, \") \");\n } else {\n flattenedStyles[key] = \"\".concat(val).concat(unit, \" \");\n }\n });\n flattenedStyles.transform = \"translate3d(\".concat(translate3dValues.translateX, \"px, \").concat(translate3dValues.translateY, \"px, \").concat(translate3dValues.translateZ, \"px) \").concat(flattenedStyles.transform);\n return flattenedStyles;\n } // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes\n\n\n function getScrollPosition() {\n var supportPageOffset = window.pageXOffset !== undefined;\n var isCSS1Compat = (document.compatMode || '') === 'CSS1Compat';\n var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;\n var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;\n return [y, x];\n }\n\n function parseValue(val, _ref, index) {\n var width = _ref.width,\n height = _ref.height,\n x = _ref.x,\n y = _ref.y;\n\n if (typeof val === 'number') {\n return val;\n }\n\n var pageHeight = document.body.scrollHeight;\n var pageWidth = document.body.scrollWidth;\n var screenWidth = window.innerWidth;\n var screenHeight = window.innerHeight;\n\n var _getScrollPosition = getScrollPosition(),\n _getScrollPosition2 = _slicedToArray(_getScrollPosition, 2),\n scrollTop = _getScrollPosition2[0],\n scrollLeft = _getScrollPosition2[1];\n\n var left = x + scrollLeft;\n var right = left + width;\n var top = y + scrollTop;\n var bottom = top + height;\n return Function(\"return \".concat(val.replace(/screenWidth/g, screenWidth).replace(/screenHeight/g, screenHeight).replace(/pageHeight/g, pageHeight).replace(/pageWidth/g, pageWidth).replace(/elWidth/g, width).replace(/elHeight/g, height).replace(/elInY/g, top - screenHeight).replace(/elOutY/g, bottom).replace(/elCenterY/g, top + height / 2 - screenHeight / 2).replace(/elInX/g, left - screenWidth).replace(/elOutX/g, right).replace(/elCenterX/g, left + width / 2 - screenWidth / 2).replace(/index/g, index)))();\n }\n\n var LaxDriver = function LaxDriver(name, getValueFn) {\n var _this = this;\n\n var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\n _classCallCheck(this, LaxDriver);\n\n _defineProperty(this, \"getValueFn\", void 0);\n\n _defineProperty(this, \"name\", '');\n\n _defineProperty(this, \"lastValue\", 0);\n\n _defineProperty(this, \"frameStep\", 1);\n\n _defineProperty(this, \"m1\", 0);\n\n _defineProperty(this, \"m2\", 0);\n\n _defineProperty(this, \"inertia\", 0);\n\n _defineProperty(this, \"inertiaEnabled\", false);\n\n _defineProperty(this, \"getValue\", function (frame) {\n var value = _this.lastValue;\n\n if (frame % _this.frameStep === 0) {\n value = _this.getValueFn(frame);\n }\n\n if (_this.inertiaEnabled) {\n var delta = value - _this.lastValue;\n var damping = 0.8;\n _this.m1 = _this.m1 * damping + delta * (1 - damping);\n _this.m2 = _this.m2 * damping + _this.m1 * (1 - damping);\n _this.inertia = Math.round(_this.m2 * 5000) / 15000;\n }\n\n _this.lastValue = value;\n return [_this.lastValue, _this.inertia];\n });\n\n this.name = name;\n this.getValueFn = getValueFn;\n Object.keys(options).forEach(function (key) {\n _this[key] = options[key];\n });\n this.lastValue = this.getValueFn(0);\n };\n\n var LaxElement = function LaxElement(selector, laxInstance, domElement, transformsData) {\n var _this2 = this;\n\n var groupIndex = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;\n\n var _options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};\n\n _classCallCheck(this, LaxElement);\n\n _defineProperty(this, \"domElement\", void 0);\n\n _defineProperty(this, \"transformsData\", void 0);\n\n _defineProperty(this, \"styles\", {});\n\n _defineProperty(this, \"selector\", '');\n\n _defineProperty(this, \"groupIndex\", 0);\n\n _defineProperty(this, \"laxInstance\", void 0);\n\n _defineProperty(this, \"onUpdate\", void 0);\n\n _defineProperty(this, \"update\", function (driverValues, frame) {\n var transforms = _this2.transforms;\n var styles = {};\n\n for (var driverName in transforms) {\n var styleBindings = transforms[driverName];\n\n if (!driverValues[driverName]) {\n console.error(\"No lax driver with name: \", driverName);\n }\n\n var _driverValues$driverN = _slicedToArray(driverValues[driverName], 2),\n value = _driverValues$driverN[0],\n inertiaValue = _driverValues$driverN[1];\n\n for (var key in styleBindings) {\n var _styleBindings$key = _slicedToArray(styleBindings[key], 3),\n arr1 = _styleBindings$key[0],\n arr2 = _styleBindings$key[1],\n _styleBindings$key$ = _styleBindings$key[2],\n options = _styleBindings$key$ === void 0 ? {} : _styleBindings$key$;\n\n var modValue = options.modValue,\n _options$frameStep = options.frameStep,\n frameStep = _options$frameStep === void 0 ? 1 : _options$frameStep,\n easing = options.easing,\n inertia = options.inertia,\n inertiaMode = options.inertiaMode,\n cssFn = options.cssFn,\n _options$cssUnit = options.cssUnit,\n cssUnit = _options$cssUnit === void 0 ? '' : _options$cssUnit;\n var easingFn = easings[easing];\n\n if (frame % frameStep === 0) {\n var v = modValue ? value % modValue : value;\n var interpolatedValue = interpolate(arr1, arr2, v, easingFn);\n\n if (inertia) {\n var inertiaExtra = inertiaValue * inertia;\n if (inertiaMode === 'absolute') inertiaExtra = Math.abs(inertiaExtra);\n interpolatedValue += inertiaExtra;\n }\n\n var unit = cssUnit || pxUnits.includes(key) ? 'px' : degUnits.includes(key) ? 'deg' : '';\n var dp = unit === 'px' ? 0 : 3;\n var val = interpolatedValue.toFixed(dp);\n styles[key] = cssFn ? cssFn(val, _this2.domElement) : val + cssUnit;\n }\n }\n }\n\n _this2.applyStyles(styles);\n\n if (_this2.onUpdate) _this2.onUpdate(driverValues, _this2.domElement);\n });\n\n _defineProperty(this, \"calculateTransforms\", function () {\n _this2.transforms = {};\n var windowWidth = _this2.laxInstance.windowWidth;\n\n var _loop = function _loop(driverName) {\n var styleBindings = _this2.transformsData[driverName];\n var parsedStyleBindings = {};\n var _styleBindings$preset = styleBindings.presets,\n presets = _styleBindings$preset === void 0 ? [] : _styleBindings$preset;\n presets.forEach(function (presetString) {\n var _presetString$split = presetString.split(\":\"),\n _presetString$split2 = _slicedToArray(_presetString$split, 3),\n presetName = _presetString$split2[0],\n y = _presetString$split2[1],\n str = _presetString$split2[2];\n\n var presetFn = window.lax.presets[presetName];\n\n if (!presetFn) {\n console.error(\"Lax preset cannot be found with name: \", presetName);\n } else {\n var preset = presetFn(y, str);\n Object.keys(preset).forEach(function (key) {\n styleBindings[key] = preset[key];\n });\n }\n });\n delete styleBindings.presets;\n\n var _loop2 = function _loop2(key) {\n var _styleBindings$key2 = _slicedToArray(styleBindings[key], 3),\n _styleBindings$key2$ = _styleBindings$key2[0],\n arr1 = _styleBindings$key2$ === void 0 ? [-1e9, 1e9] : _styleBindings$key2$,\n _styleBindings$key2$2 = _styleBindings$key2[1],\n arr2 = _styleBindings$key2$2 === void 0 ? [-1e9, 1e9] : _styleBindings$key2$2,\n _styleBindings$key2$3 = _styleBindings$key2[2],\n options = _styleBindings$key2$3 === void 0 ? {} : _styleBindings$key2$3;\n\n var bounds = _this2.domElement.getBoundingClientRect();\n\n var parsedArr1 = getArrayValues(arr1, windowWidth).map(function (i) {\n return parseValue(i, bounds, _this2.groupIndex);\n });\n var parsedArr2 = getArrayValues(arr2, windowWidth).map(function (i) {\n return parseValue(i, bounds, _this2.groupIndex);\n });\n parsedStyleBindings[key] = [parsedArr1, parsedArr2, options];\n };\n\n for (var key in styleBindings) {\n _loop2(key);\n }\n\n _this2.transforms[driverName] = parsedStyleBindings;\n };\n\n for (var driverName in _this2.transformsData) {\n _loop(driverName);\n }\n });\n\n _defineProperty(this, \"applyStyles\", function (styles) {\n var mergedStyles = flattenStyles(styles);\n Object.keys(mergedStyles).forEach(function (key) {\n _this2.domElement.style.setProperty(key, mergedStyles[key]);\n });\n });\n\n this.selector = selector;\n this.laxInstance = laxInstance;\n this.domElement = domElement;\n this.transformsData = transformsData;\n this.groupIndex = groupIndex;\n var _options$style = _options.style,\n style = _options$style === void 0 ? {} : _options$style,\n onUpdate = _options.onUpdate;\n Object.keys(style).forEach(function (key) {\n domElement.style.setProperty(key, style[key]);\n });\n if (onUpdate) this.onUpdate = onUpdate;\n this.calculateTransforms();\n };\n\n var Lax = function Lax() {\n var _this3 = this;\n\n _classCallCheck(this, Lax);\n\n _defineProperty(this, \"drivers\", []);\n\n _defineProperty(this, \"elements\", []);\n\n _defineProperty(this, \"frame\", 0);\n\n _defineProperty(this, \"debug\", false);\n\n _defineProperty(this, \"windowWidth\", 0);\n\n _defineProperty(this, \"windowHeight\", 0);\n\n _defineProperty(this, \"presets\", laxPresets);\n\n _defineProperty(this, \"debugData\", {\n frameLengths: []\n });\n\n _defineProperty(this, \"init\", function () {\n _this3.findAndAddElements();\n\n window.requestAnimationFrame(_this3.onAnimationFrame);\n _this3.windowWidth = document.body.clientWidth;\n _this3.windowHeight = document.body.clientHeight;\n window.onresize = _this3.onWindowResize;\n });\n\n _defineProperty(this, \"onWindowResize\", function () {\n var changed = document.body.clientWidth !== _this3.windowWidth || document.body.clientHeight !== _this3.windowHeight;\n\n if (changed) {\n _this3.windowWidth = document.body.clientWidth;\n _this3.windowHeight = document.body.clientHeight;\n\n _this3.elements.forEach(function (el) {\n return el.calculateTransforms();\n });\n }\n });\n\n _defineProperty(this, \"onAnimationFrame\", function (e) {\n if (_this3.debug) {\n _this3.debugData.frameStart = Date.now();\n }\n\n var driverValues = {};\n\n _this3.drivers.forEach(function (driver) {\n driverValues[driver.name] = driver.getValue(_this3.frame);\n });\n\n _this3.elements.forEach(function (element) {\n element.update(driverValues, _this3.frame);\n });\n\n if (_this3.debug) {\n _this3.debugData.frameLengths.push(Date.now() - _this3.debugData.frameStart);\n }\n\n if (_this3.frame % 60 === 0 && _this3.debug) {\n var averageFrameTime = Math.ceil(_this3.debugData.frameLengths.reduce(function (a, b) {\n return a + b;\n }, 0) / 60);\n console.log(\"Average frame calculation time: \".concat(averageFrameTime, \"ms\"));\n _this3.debugData.frameLengths = [];\n }\n\n _this3.frame++;\n window.requestAnimationFrame(_this3.onAnimationFrame);\n });\n\n _defineProperty(this, \"addDriver\", function (name, getValueFn) {\n var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};\n\n _this3.drivers.push(new LaxDriver(name, getValueFn, options));\n });\n\n _defineProperty(this, \"removeDriver\", function (name) {\n _this3.drivers = _this3.drivers.filter(function (driver) {\n return driver.name !== name;\n });\n });\n\n _defineProperty(this, \"findAndAddElements\", function () {\n _this3.elements = [];\n var elements = document.querySelectorAll(\".lax\");\n elements.forEach(function (domElement) {\n var driverName = \"scrollY\";\n var presets = [];\n domElement.classList.forEach(function (className) {\n if (className.includes(\"lax_preset\")) {\n var preset = className.replace(\"lax_preset_\", \"\");\n presets.push(preset);\n }\n });\n\n var transforms = _defineProperty({}, driverName, {\n presets: presets\n });\n\n _this3.elements.push(new LaxElement('.lax', _this3, domElement, transforms, 0, {}));\n });\n });\n\n _defineProperty(this, \"addElements\", function (selector, transforms, options) {\n var domElements = document.querySelectorAll(selector);\n domElements.forEach(function (domElement, i) {\n _this3.elements.push(new LaxElement(selector, _this3, domElement, transforms, i, options));\n });\n });\n\n _defineProperty(this, \"removeElements\", function (selector) {\n _this3.elements = _this3.elements.filter(function (element) {\n return element.selector !== selector;\n });\n });\n\n _defineProperty(this, \"addElement\", function (domElement, transforms, options) {\n _this3.elements.push(new LaxElement('', _this3, domElement, transforms, 0, options));\n });\n\n _defineProperty(this, \"removeElement\", function (domElement) {\n _this3.elements = _this3.elements.filter(function (element) {\n return element.domElement !== domElement;\n });\n });\n };\n\n return new Lax();\n }();\n\n if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') module.exports = laxInstance;else window.lax = laxInstance;\n})();" }, { "path": "package.json", "content": "{\n \"name\": \"lax.js\",\n \"version\": \"2.0.3\",\n \"scripts\": {\n \"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\"\n },\n \"devDependencies\": {\n \"@babel/cli\": \"^7.12.1\",\n \"@babel/core\": \"^7.12.3\",\n \"@babel/plugin-proposal-class-properties\": \"^7.12.1\",\n \"@babel/preset-env\": \"^7.12.1\",\n \"uglify-js\": \"^3.9.4\"\n },\n \"description\": \"Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.\",\n \"license\": \"MIT\",\n \"author\": \"alexfoxy@gmail.com\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/alexfoxy/lax.js\"\n },\n \"main\": \"lib/lax.min.js\",\n \"keywords\": [\n \"javascript\",\n \"lax\",\n \"laxxx\",\n \"lax.js\",\n \"laxjs\",\n \"parallax\",\n \"scroll\",\n \"animation\",\n \"effects\",\n \"css\",\n \"html\"\n ],\n \"dependencies\": {}\n}" }, { "path": "src/lax.js", "content": "(() => {\n const inOutMap = (y = 30) => {\n return [\"elInY+elHeight\", `elCenterY-${y}`, \"elCenterY\", `elCenterY+${y}`, \"elOutY-elHeight\"]\n }\n\n const laxPresets = {\n fadeInOut: (y = 30, str = 0) => ({\n \"opacity\": [\n inOutMap(y),\n [str, 1, 1, 1, str]\n ],\n }),\n fadeIn: (y = 'elCenterY', str = 0) => ({\n \"opacity\": [\n [\"elInY+elHeight\", y],\n [str, 1],\n ],\n }),\n fadeOut: (y = 'elCenterY', str = 0) => ({\n \"opacity\": [\n [y, \"elOutY-elHeight\"],\n [1, str],\n ],\n }),\n blurInOut: (y = 100, str = 20) => ({\n \"blur\": [\n inOutMap(y),\n [str, 0, 0, 0, str],\n ],\n }),\n blurIn: (y = 'elCenterY', str = 20) => ({\n \"blur\": [\n [\"elInY+elHeight\", y],\n [str, 0],\n ],\n }),\n blurOut: (y = 'elCenterY', str = 20) => ({\n \"opacity\": [\n [y, \"elOutY-elHeight\"],\n [0, str],\n ],\n }),\n scaleInOut: (y = 100, str = 0.6) => ({\n \"scale\": [\n inOutMap(y),\n [str, 1, 1, 1, str],\n ],\n }),\n scaleIn: (y = 'elCenterY', str = 0.6) => ({\n \"scale\": [\n [\"elInY+elHeight\", y],\n [str, 1],\n ],\n }),\n scaleOut: (y = 'elCenterY', str = 0.6) => ({\n \"scale\": [\n [y, \"elOutY-elHeight\"],\n [1, str],\n ],\n }),\n slideX: (y = 0, str = 500) => ({\n \"translateX\": [\n ['elInY', y],\n [0, str],\n ],\n }),\n slideY: (y = 0, str = 500) => ({\n \"translateY\": [\n ['elInY', y],\n [0, str],\n ],\n }),\n spin: (y = 1000, str = 360) => ({\n \"rotate\": [\n [0, y],\n [0, str],\n {\n modValue: y,\n }\n ],\n }),\n flipX: (y = 1000, str = 360) => ({\n \"rotateX\": [\n [0, y],\n [0, str],\n {\n modValue: y\n }\n ],\n }),\n flipY: (y = 1000, str = 360) => ({\n \"rotateY\": [\n [0, y],\n [0, str],\n {\n modValue: y\n }\n ],\n }),\n jiggle: (y = 50, str = 40) => ({\n \"skewX\": [\n [0, y * 1, y * 2, y * 3, y * 4],\n [0, str, 0, -str, 0],\n {\n modValue: y * 4,\n }\n ],\n }),\n seesaw: (y = 50, str = 40) => ({\n \"skewY\": [\n [0, y * 1, y * 2, y * 3, y * 4],\n [0, str, 0, -str, 0],\n {\n modValue: y * 4,\n }\n ],\n }),\n zigzag: (y = 100, str = 100) => ({\n \"translateX\": [\n [0, y * 1, y * 2, y * 3, y * 4],\n [0, str, 0, -str, 0],\n {\n modValue: y * 4,\n }\n ],\n }),\n hueRotate: (y = 600, str = 360) => ({\n \"hue-rotate\": [\n [0, y],\n [0, str],\n {\n modValue: y,\n }\n ],\n }),\n }\n\n const laxInstance = (() => {\n const transformKeys = [\"perspective\", \"scaleX\", \"scaleY\", \"scale\", \"skewX\", \"skewY\", \"skew\", \"rotateX\", \"rotateY\", \"rotate\"]\n const filterKeys = [\"blur\", \"hue-rotate\", \"brightness\"]\n const translate3dKeys = [\"translateX\", \"translateY\", \"translateZ\"]\n\n const pxUnits = [\"perspective\", \"border-radius\", \"blur\", \"translateX\", \"translateY\", \"translateZ\"]\n const degUnits = [\"hue-rotate\", \"rotate\", \"rotateX\", \"rotateY\", \"skew\", \"skewX\", \"skewY\"]\n\n function getArrayValues(arr, windowWidth) {\n if (Array.isArray(arr)) return arr\n\n const keys = Object.keys(arr).map(x => parseInt(x)).sort((a, b) => a > b ? 1 : -1)\n\n let retKey = keys[keys.length - 1]\n for (let i = 0; i < keys.length; i++) {\n const key = keys[i]\n if (windowWidth < key) {\n retKey = key\n break\n }\n }\n\n return arr[retKey]\n }\n\n function lerp(start, end, t) {\n return start * (1 - t) + end * t\n }\n\n function invlerp(a, b, v) {\n return (v - a) / (b - a)\n }\n\n function interpolate(arrA, arrB, v, easingFn) {\n let k = 0\n\n arrA.forEach((a) => {\n if (a < v) k++\n })\n\n if (k <= 0) {\n return arrB[0]\n }\n\n if (k >= arrA.length) {\n return arrB[arrA.length - 1]\n }\n\n const j = k - 1\n\n let vector = invlerp(arrA[j], arrA[k], v)\n if (easingFn) vector = easingFn(vector)\n const lerpVal = lerp(arrB[j], arrB[k], vector)\n return lerpVal\n }\n\n const easings = {\n easeInQuad: t => t * t,\n easeOutQuad: t => t * (2 - t),\n easeInOutQuad: t => t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t,\n easeInCubic: t => t * t * t,\n easeOutCubic: t => (--t) * t * t + 1,\n easeInOutCubic: t => t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,\n easeInQuart: t => t * t * t * t,\n easeOutQuart: t => 1 - (--t) * t * t * t,\n easeInOutQuart: t => t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t,\n easeInQuint: t => t * t * t * t * t,\n easeOutQuint: t => 1 + (--t) * t * t * t * t,\n easeInOutQuint: t => t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t,\n easeOutBounce: t => {\n const n1 = 7.5625\n const d1 = 2.75\n\n if (t < 1 / d1) {\n return n1 * t * t\n } else if (t < 2 / d1) {\n return n1 * (t -= 1.5 / d1) * t + 0.75\n } else if (t < 2.5 / d1) {\n return n1 * (t -= 2.25 / d1) * t + 0.9375\n } else {\n return n1 * (t -= 2.625 / d1) * t + 0.984375\n }\n },\n easeInBounce: t => {\n return 1 - easings.easeOutBounce(1 - t)\n },\n easeOutBack: t => {\n const c1 = 1.70158\n const c3 = c1 + 1\n\n return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2)\n },\n easeInBack: t => {\n const c1 = 1.70158\n const c3 = c1 + 1\n\n return c3 * t * t * t - c1 * t * t\n },\n }\n\n function flattenStyles(styles) {\n const flattenedStyles = {\n transform: '',\n filter: ''\n }\n\n const translate3dValues = {\n translateX: 0.00001,\n translateY: 0.00001,\n translateZ: 0.00001\n }\n\n Object.keys(styles).forEach((key) => {\n const val = styles[key]\n const unit = pxUnits.includes(key) ? 'px' : (degUnits.includes(key) ? 'deg' : '')\n\n if (translate3dKeys.includes(key)) {\n translate3dValues[key] = val\n } else if (transformKeys.includes(key)) {\n flattenedStyles.transform += `${key}(${val}${unit}) `\n } else if (filterKeys.includes(key)) {\n flattenedStyles.filter += `${key}(${val}${unit}) `\n } else {\n flattenedStyles[key] = `${val}${unit} `\n }\n })\n\n flattenedStyles.transform = `translate3d(${translate3dValues.translateX}px, ${translate3dValues.translateY}px, ${translate3dValues.translateZ}px) ${flattenedStyles.transform}`\n\n return flattenedStyles\n }\n\n // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollY#Notes\n function getScrollPosition() {\n const supportPageOffset = window.pageXOffset !== undefined\n const isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat')\n\n const x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft\n const y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop\n\n return [y, x]\n }\n\n function parseValue(val, { width, height, x, y }, index) {\n if (typeof val === 'number') {\n return val\n }\n\n const pageHeight = document.body.scrollHeight\n const pageWidth = document.body.scrollWidth\n const screenWidth = window.innerWidth\n const screenHeight = window.innerHeight\n const [scrollTop, scrollLeft] = getScrollPosition()\n\n const left = x + scrollLeft\n const right = left + width\n const top = y + scrollTop\n const bottom = top + height\n\n return Function(`return ${val\n .replace(/screenWidth/g, screenWidth)\n .replace(/screenHeight/g, screenHeight)\n .replace(/pageHeight/g, pageHeight)\n .replace(/pageWidth/g, pageWidth)\n .replace(/elWidth/g, width)\n .replace(/elHeight/g, height)\n .replace(/elInY/g, top - screenHeight)\n .replace(/elOutY/g, bottom)\n .replace(/elCenterY/g, top + (height / 2) - (screenHeight / 2))\n .replace(/elInX/g, left - screenWidth)\n .replace(/elOutX/g, right)\n .replace(/elCenterX/g, left + (width / 2) - (screenWidth / 2))\n .replace(/index/g, index)\n }`)()\n }\n\n class LaxDriver {\n getValueFn\n name = ''\n lastValue = 0\n frameStep = 1\n m1 = 0\n\n m2 = 0\n inertia = 0\n inertiaEnabled = false\n\n\n constructor(name, getValueFn, options = {}) {\n this.name = name\n this.getValueFn = getValueFn\n\n Object.keys(options).forEach((key) => {\n this[key] = options[key]\n })\n\n this.lastValue = this.getValueFn(0)\n }\n\n getValue = (frame) => {\n let value = this.lastValue\n\n if (frame % this.frameStep === 0) {\n value = this.getValueFn(frame)\n }\n\n if (this.inertiaEnabled) {\n const delta = value - this.lastValue\n const damping = 0.8\n\n this.m1 = this.m1 * damping + delta * (1 - damping)\n this.m2 = this.m2 * damping + this.m1 * (1 - damping)\n this.inertia = Math.round(this.m2 * 5000) / 15000\n }\n\n this.lastValue = value\n return [this.lastValue, this.inertia]\n }\n }\n\n class LaxElement {\n domElement\n transformsData\n styles = {}\n selector = ''\n\n groupIndex = 0\n laxInstance\n\n onUpdate\n\n constructor(selector, laxInstance, domElement, transformsData, groupIndex = 0, options = {}) {\n this.selector = selector\n this.laxInstance = laxInstance\n this.domElement = domElement\n this.transformsData = transformsData\n this.groupIndex = groupIndex\n\n const { style = {}, onUpdate } = options\n\n Object.keys(style).forEach(key => {\n domElement.style.setProperty(key, style[key])\n })\n\n if (onUpdate) this.onUpdate = onUpdate\n\n this.calculateTransforms()\n }\n\n update = (driverValues, frame) => {\n const { transforms } = this\n\n const styles = {}\n\n for (let driverName in transforms) {\n const styleBindings = transforms[driverName]\n\n if (!driverValues[driverName]) {\n console.error(\"No lax driver with name: \", driverName)\n }\n\n const [value, inertiaValue] = driverValues[driverName]\n\n for (let key in styleBindings) {\n const [arr1, arr2, options = {}] = styleBindings[key]\n const { modValue, frameStep = 1, easing, inertia, inertiaMode, cssFn, cssUnit = '' } = options\n\n const easingFn = easings[easing]\n\n if (frame % frameStep === 0) {\n const v = modValue ? value % modValue : value\n\n let interpolatedValue = interpolate(arr1, arr2, v, easingFn)\n\n if (inertia) {\n let inertiaExtra = inertiaValue * inertia\n if (inertiaMode === 'absolute') inertiaExtra = Math.abs((inertiaExtra))\n interpolatedValue += inertiaExtra\n }\n\n const unit = cssUnit || pxUnits.includes(key) ? 'px' : (degUnits.includes(key) ? 'deg' : '')\n const dp = unit === 'px' ? 0 : 3\n const val = interpolatedValue.toFixed(dp)\n styles[key] = cssFn ? cssFn(val, this.domElement) : val + cssUnit\n }\n }\n }\n\n this.applyStyles(styles)\n if (this.onUpdate) this.onUpdate(driverValues, this.domElement)\n }\n\n calculateTransforms = () => {\n this.transforms = {}\n const windowWidth = this.laxInstance.windowWidth\n\n for (let driverName in this.transformsData) {\n let styleBindings = this.transformsData[driverName]\n\n const parsedStyleBindings = {}\n\n const { presets = [] } = styleBindings\n\n presets.forEach((presetString) => {\n\n const [presetName, y, str] = presetString.split(\":\")\n\n const presetFn = window.lax.presets[presetName]\n\n if (!presetFn) {\n console.error(\"Lax preset cannot be found with name: \", presetName)\n } else {\n const preset = presetFn(y, str)\n\n Object.keys(preset).forEach((key) => {\n styleBindings[key] = preset[key]\n })\n }\n })\n\n delete styleBindings.presets\n\n for (let key in styleBindings) {\n let [arr1 = [-1e9, 1e9], arr2 = [-1e9, 1e9], options = {}] = styleBindings[key]\n\n const saveTransform = this.domElement.style.transform\n this.domElement.style.removeProperty(\"transform\")\n const bounds = this.domElement.getBoundingClientRect()\n this.domElement.style.transform = saveTransform\n\n const parsedArr1 = getArrayValues(arr1, windowWidth).map(i => parseValue(i, bounds, this.groupIndex))\n const parsedArr2 = getArrayValues(arr2, windowWidth).map(i => parseValue(i, bounds, this.groupIndex))\n\n parsedStyleBindings[key] = [parsedArr1, parsedArr2, options]\n }\n\n this.transforms[driverName] = parsedStyleBindings\n }\n }\n\n applyStyles = (styles) => {\n const mergedStyles = flattenStyles(styles)\n\n Object.keys(mergedStyles).forEach((key) => {\n this.domElement.style.setProperty(key, mergedStyles[key])\n })\n }\n }\n\n class Lax {\n drivers = []\n elements = []\n frame = 0\n\n debug = false\n\n windowWidth = 0\n windowHeight = 0\n presets = laxPresets\n\n debugData = {\n frameLengths: []\n }\n\n init = () => {\n this.findAndAddElements()\n\n window.requestAnimationFrame(this.onAnimationFrame)\n this.windowWidth = document.body.clientWidth\n this.windowHeight = document.body.clientHeight\n\n window.onresize = this.onWindowResize\n }\n\n onWindowResize = () => {\n const changed = document.body.clientWidth !== this.windowWidth ||\n document.body.clientHeight !== this.windowHeight\n\n if (changed) {\n this.windowWidth = document.body.clientWidth\n this.windowHeight = document.body.clientHeight\n this.elements.forEach(el => el.calculateTransforms())\n }\n }\n\n onAnimationFrame = (e) => {\n if (this.debug) {\n this.debugData.frameStart = Date.now()\n }\n\n const driverValues = {}\n\n this.drivers.forEach((driver) => {\n driverValues[driver.name] = driver.getValue(this.frame)\n })\n\n this.elements.forEach((element) => {\n element.update(driverValues, this.frame)\n })\n\n if (this.debug) {\n this.debugData.frameLengths.push(Date.now() - this.debugData.frameStart)\n }\n\n if (this.frame % 60 === 0 && this.debug) {\n const averageFrameTime = Math.ceil((this.debugData.frameLengths.reduce((a, b) => a + b, 0) / 60))\n console.log(`Average frame calculation time: ${averageFrameTime}ms`)\n this.debugData.frameLengths = []\n }\n\n this.frame++\n\n window.requestAnimationFrame(this.onAnimationFrame)\n }\n\n addDriver = (name, getValueFn, options = {}) => {\n this.drivers.push(\n new LaxDriver(name, getValueFn, options)\n )\n }\n\n removeDriver = (name) => {\n this.drivers = this.drivers.filter(driver => driver.name !== name)\n }\n\n findAndAddElements = () => {\n this.elements = []\n const elements = document.querySelectorAll(\".lax\")\n\n elements.forEach((domElement) => {\n const driverName = \"scrollY\"\n const presets = []\n\n domElement.classList.forEach((className) => {\n if (className.includes(\"lax_preset\")) {\n const preset = className.replace(\"lax_preset_\", \"\")\n presets.push(preset)\n }\n })\n\n const transforms = {\n [driverName]: {\n presets\n }\n }\n\n this.elements.push(new LaxElement('.lax', this, domElement, transforms, 0, {}))\n })\n }\n\n addElements = (selector, transforms, options = {}) => {\n const domElements = options.domElements || document.querySelectorAll(selector)\n\n domElements.forEach((domElement, i) => {\n this.elements.push(new LaxElement(selector, this, domElement, transforms, i, options))\n })\n }\n\n removeElements = (selector) => {\n this.elements = this.elements.filter(element => element.selector !== selector)\n }\n\n addElement = (domElement, transforms, options) => {\n this.elements.push(new LaxElement('', this, domElement, transforms, 0, options))\n }\n\n removeElement = (domElement) => {\n this.elements = this.elements.filter(element => element.domElement !== domElement)\n }\n }\n\n return new Lax()\n })()\n\n if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')\n module.exports = laxInstance\n else\n window.lax = laxInstance\n})()\n" } ]