Merge pull request #58 from alexfoxy/dev

Fixed issue #52
fixed anchor on presets
2026-04-24 03:01:10 -04:00 · 2019-09-20 08:32:11 +01:00 · 2019-07-13 09:54:52 +01:00 · 2019-07-13 09:48:25 +01:00 · 2019-07-13 08:36:54 +01:00 · 2019-04-10 10:50:03 +01:00
31 changed files with 1667 additions and 437 deletions
--- a/README.md
+++ b/README.md
@@ -1,14 +1,18 @@
 # lax.js

-Simple & light weight (<2kb gzipped) vanilla javascript plugin to create *smooth* & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!
+Simple & light weight (<3kb gzipped) vanilla javascript plugin to create *smooth* & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!

 [>>> DEMO <<<](https://alexfox.dev/laxxx/)

-![](https://i.imgur.com/DHhlrM3.gif) 
+![](https://i.imgur.com/Jbkna80.gif) 

-## Getting started
+[>>> MARIO DEMO <<<](https://alexfox.dev/laxxx/sprite.html)

-### NPM setup
+![](https://i.imgur.com/GGQFucZ.gif)
+
+## Getting Started
+
+### NPM Setup

 ```bash
 npm install lax.js
@@ -17,11 +21,13 @@ npm install lax.js
 import lax from 'lax.js'
 ```

-### Basic browser setup
+### Basic Browser Setup
 1) Add lax.js to your html

 ```html
 <script src="lib/lax.min.js" >
+<!-- or via CDN -->
+<script src="https://cdn.jsdelivr.net/npm/lax.js" >
 ```

 2) Initialize the plugin
@@ -29,42 +35,46 @@ import lax from 'lax.js'
 ```javascript
 window.onload = function() {
 	lax.setup() // init
-	  
-	document.addEventListener('scroll', function(e) {
-	  lax.update(window.scrollY) // update every scroll
-	}, false)
+
+	const updateLax = () => {
+		lax.update(window.scrollY)
+		window.requestAnimationFrame(updateLax)
+	}
+
+	window.requestAnimationFrame(updateLax)
 }
 ```


-3) Add attributes to the HTML tags you want to animate e.g.
+3) Add class and attributes to the HTML tags you want to animate e.g.
 ```html
-<p data-lax-preset="spin fadeInOut">Look at me goooooo!</p>
+<p class="lax" data-lax-preset="spin fadeInOut">Look at me goooooo!</p>
 ```

 4) Scroll and enjoy!

-### Usage with React, Vue.js & DOM changes
-To increase performance lax.js indexes the list of elements to animate when the page loads. If you're using a library like React or vue.js, it is likely that you are adding elements after the initial `window.onload`. Because of this you will need to call `lax.addElement(domElement)` when you add components to the DOM that you want to animate. 
+### Usage With React, Vue.js, EmberJS & DOM Changes
+To increase performance lax.js indexes the list of elements to animate when the page loads. If you're using a library like React, vue.js or EmberJS, it is likely that you are adding elements after the initial `window.onload`. Because of this you will need to call `lax.addElement(domElement)` when you add components to the DOM that you want to animate. 

 See below for working examples:
 * [react](https://codepen.io/alexfoxy/pen/PLaKaE)
+* [react (using hooks)](https://github.com/arthurdenner/use-lax)
 * [vue](https://codepen.io/alexfoxy/pen/ZPRZBq)
+* [ember](https://github.com/redpencilio/ember-lax)

 You can also call `lax.removeElement(domElement)` when the component unmounts.


 ## Presets
-
-The easiest way to get started is to use the presets via the `data-lax-preset` attribute. You can chain multiple presets together for e.g. `data-lax-preset="blurOut fadeOut spin"`. Some presets also support an optional strength e.g. `data-lax-preset="blurOut-50"`
+The easiest way to get started is to use the presets via the `data-lax-preset` attribute. You can chain multiple presets together for e.g. `data-lax-preset="blurOut fadeOut spin"`. Some presets also support an optional strength e.g. `data-lax-preset="blurOut-50"`.

 See the list of [Supported Presets](#supported-presets) for details.

 ## Custom Animations

-You can easily create your own effects. Just add an attribute to your HTML tag (see [Supported Attribute Keys](#supported-attribute-keys)) with an array of values. These arrays take the format of `scrollPos val, scrollPos val, ...` e.g:
+You can easily create your own effects. Just add an attribute to your HTML tag (see [Supported Attribute Keys](#supported-attribute-keys)) with an array of values. These arrays take the format of `scrollPos val, scrollPos val, ... | option=val` e.g:
 ```html
-<p data-lax-opacity="0 1, 100 1, 200 0">
+<p class="lax" data-lax-opacity="0 1, 100 1, 200 0 | loop=200">
 	I start to fade out after the window scrolls 100px
 	and then I'm gone by 200px!
 </p>
@@ -72,13 +82,13 @@ You can easily create your own effects. Just add an attribute to your HTML tag (

 By default the `scrollPos` is `window.scrollY` but you can use an element distance from the top of the screen instead. You can either pass in a selector `data-lax-anchor="#bio"` or set it to use itself `data-lax-anchor="self"` (this is the default for all presets) e.g.
 ```html
-<p data-lax-opacity="200 1, 100 1, 0 0" data-lax-anchor="self">
+<p class="lax" data-lax-opacity="200 1, 100 1, 0 0" data-lax-anchor="self">
 	I start to fade out after I'm 100px away from the top of the window
 	and then I'm gone by the time I reach the top!
 </p>
 ```

-There are also some shortcuts for useful values: 
+### Special Values

 | Key     	| Value           |
 | ------------- | ------------- |
@@ -89,20 +99,59 @@ There are also some shortcuts for useful values:

 You can use these instead of integer values for the scrollPos  e.g.
 ```html
-<p data-lax-opacity="0 1, vh 0">
+<p class="lax" data-lax-opacity="0 1, vh 0">
 	I fade out as the page scrolls down and
 	I'm gone when the page has scrolled the view port height!
 </p>
 ```

+### Calculated Values
+
 You can also use vanilla JS within `( )` for calculations and access to more variables e.g.
 ```html
-<p data-lax-opacity="0 1, (document.body.scrollHeight*0.5) 0">
+<p class="lax" data-lax-opacity="0 1, (document.body.scrollHeight*0.5) 0">
 	I fade out as the page scrolls down and
 	I'm gone when the page has scrolled 50%
 	down the entire page height!
 </p>
 ```
+
+### Options
+
+You can pass options into your custom animations for more control e.g. 
+
+```html
+<p class="lax" data-lax-opacity="0 1, 100 0, 200 100 | loop=200 offset=100 speed=2">
+	I start at 0 opacity and
+	fade in and out every 50px
+</p>
+```
+
+| Option     	| Effect  | 
+| ------------- | -------------	| 
+| loop      	| modulus the input scrollY position so the animation will loop every `loop` pixels |
+| offset     	| add `offset` to scrollY position so the animation will begin at this point |
+| speed     	| multiplies the input scrollY position by `speed` to change the speed of the animation |
+
+
+## Responsive Design
+You can set multiple presets and animations for different screen widths. When setting up lax you need to pass in your screen width breakpoints e.g.
+```javascript
+lax.setup({
+    breakpoints: { small: 0, large: 992 }
+})
+```
+Then you can define presets or transforms per breakpoint. 
+```html
+<p class="lax" data-lax-preset_small="spin">
+	I only spin when the screen is smaller than 992px.
+</p>
+
+<p class="lax" data-lax-scale_small="0 1, 500 0" data-lax-scale_large="0 1, 500 2">
+	I shrink when the screen is smaller than 992px but grow when the screen is larger 992px.
+</p>
+```
+
 ## Supported Presets

 | Preset     	| Default Strength | 
@@ -150,6 +199,8 @@ Transforms
 | skewX     | data-lax-skew-x |
 | skewY     | data-lax-skew-y |
 | rotate     | data-lax-rotate |
+| rotateX 	| data-lax-rotate-x |
+| rotateY 	| data-lax-rotate-y |

 Filters (note - these may be unperformant on low powered machines)

@@ -171,6 +222,24 @@ Other
 | background position-x | data-lax-bg-pos-x  |
 | background position-y | data-lax-bg-pos-y |

+	
+
+## Sprite Sheet Animations
+You can create animations using sprite sheets. See a demo [here](https://alexfox.dev/laxxx/sprite.html).
+
+The `data-lax-sprite-data` is required and formated like so `[frameWidth, frameHeight, frameCount, columnCount, scrollStep]`. You can either set the image using CSS or the `data-lax-sprite-image` attribute. e.g.
+
+```html
+<div 
+	class="lax"
+	data-lax-sprite-data="500,500,36,36,10"
+	data-lax-sprite-image="./spritesheet.png"
+/>
+```
+
+You can turn a gif or a video into a sprite sheet with this tool: https://ezgif.com/gif-to-sprite
+
+Note: current implimentation requires the element to be the same size as the frame width & height.

 ## Custom Presets
 To avoid duplicate code you can define your own presets with a list of attributes e.g.
@@ -184,7 +253,7 @@ lax.addPreset("myCoolPreset", function() {
 ```
 You can then access this preset like this:
 ```html
-<p data-lax-preset="myCoolPreset">
+<p class="lax" data-lax-preset="myCoolPreset">
 	I'm the coolest preset in the world 😎
 </p>
 ```
@@ -199,22 +268,25 @@ You can then access this preset like this:

 ## Notes

-### Screen rotating & resizing 
+### Screen Rotating & Resizing 
 As some values (vh, vw, elh, elw) are calculated on load, when the screen size changes or rotates you might want to recalculate these. E.g.
 ```
 window.addEventListener("resize", function() {
-	lax.populateElements()
+	lax.updateElements()
 });
 ```
 Be warned, on mobile, a resize event is fired when you scroll and the toolbar is hidden so you might want to check if the width or orientation has changed.

 ### Scroll Wheels
-Scroll wheels only increment the scroll position in steps which can cause the animations to look janky. You can use the SmoothScroll (http://www.smoothscroll.net/) plugin to smooth this out, however there maybe performance implications that need investigating.
+Scroll wheels only increment the scroll position in steps which can cause the animations to look janky. 
+
+### Merging Existing Styles
+Only inline styles for transforms and filters will be merged in to the animation. Transforms and filters derived from CSS will be overwritten.

 ## To Do / Ideas
-* ~~Re-calculate values on rotate / change window size~~
-* Elastic bouncing values at edges of screen (if possible)
-* ~~Optimise: Do not update elements with bounds that are off screen~~
 * Implement a tween for scroll wheels to remove reliance on smoothscroll
-* Add "momentum" option 
+* A way to add weight/momentum to moving objecs
+* More cool demos
+* More concise read me for react / vue.js
+* ~~Support for sprite sheet animations~~

--- a/0
+++ b/0
--- a/dev/inertia.html
+++ b/dev/inertia.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=0.75, minimum-scale=0.75">
+
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,600,800" rel="stylesheet">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+
+  <script src="./lib/lax.min.js"></script>
+  <!-- <script src="../src/lax.js"></script> -->
+
+  <script type="text/javascript">
+    window.onload = function() {
+      document.getElementById("main").classList.add("loaded")
+
+      lax.setup()
+
+      let toAdd = 0
+      let lastY = 0
+      const scrolls = [0,0,0,0,0]
+      const update = () => {
+        scrolls.unshift()
+        if(lastY !== window.scrollY) scrolls.push(window.scrollY)
+        lastY = window.scrollY
+        const sum = scrolls.reduce(function(a, b) { return a + b; });
+        const y = sum / scrolls.length
+
+        lax.update(y)
+        window.requestAnimationFrame(update)
+      }
+
+      window.requestAnimationFrame(update)
+      
+
+
+    }
+  </script>
+
+  <style>
+    body,html {
+      margin:0;
+      padding:0;
+      color: #F3F4F5;
+      background: #191818;
+      overflow-x: hidden;
+      height: 10000vh;
+      font-family: 'Montserrat', sans-serif;
+    }
+
+    #letter {
+      width: 10vw; 
+      margin-left: 10vw;
+      position: fixed;
+      top: 20vh;
+    }
+
+  </style>
+</head>
+
+
+<body>
+  <div id="main">
+    <div id="header" class="section">
+      <img src="./img/a.png" id="letter" data-lax-translate-x="0 0, 1000 1000" />
+    </div>
+
+  </div>
+
+</body>
--- a/dev/js/stats.js
+++ b/dev/js/stats.js
@@ -0,0 +1,5 @@
+// stats.js - http://github.com/mrdoob/stats.js
+(function(f,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"===typeof define&&define.amd?define(e):f.Stats=e()})(this,function(){var f=function(){function e(a){c.appendChild(a.dom);return a}function u(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();
+u(++l%c.children.length)},!1);var k=(performance||Date).now(),g=k,a=0,r=e(new f.Panel("FPS","#0ff","#002")),h=e(new f.Panel("MS","#0f0","#020"));if(self.performance&&self.performance.memory)var t=e(new f.Panel("MB","#f08","#201"));u(0);return{REVISION:16,dom:c,addPanel:e,showPanel:u,begin:function(){k=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();h.update(c-k,200);if(c>g+1E3&&(r.update(1E3*a/(c-g),100),g=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/
+1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){k=this.end()},domElement:c,setMode:u}};f.Panel=function(e,f,l){var c=Infinity,k=0,g=Math.round,a=g(window.devicePixelRatio||1),r=80*a,h=48*a,t=3*a,v=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=h;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,h);b.fillStyle=f;b.fillText(e,t,v);
+b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(h,w){c=Math.min(c,h);k=Math.max(k,h);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=f;b.fillText(g(h)+" "+e+" ("+g(c)+"-"+g(k)+")",t,v);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,g((1-h/w)*p))}}};return f});
--- a/dev/performance.html
+++ b/dev/performance.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=0.75, minimum-scale=0.75">
+  <script src="../src/lax.js"></script>
+  <script src="./js/stats.js"></script>
+
+  <script type="text/javascript">
+
+
+    window.onload = function() {
+    	var stats = new Stats();
+		stats.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
+		document.body.appendChild( stats.dom );
+
+		for(let i=0; i<1000; i++) {
+			const el = document.createElement("img")
+			el.src="../docs/img/a.png"       
+  		el.className="lax"
+  		el.style.width = 50 + 'px'
+  		el.style.height = 50 + 'px'
+  		el.style.left = 50*(i%25) + 'px'
+  		el.style.top = 50*Math.floor(i/25) + 'px'
+      el.style.position = "absolute"
+  		el.setAttribute("data-lax-rotate","0 0, 500 1000")
+  		el.setAttribute("data-lax-opacity","0 1, 500 0")
+  		el.setAttribute("data-lax-scale","0 1, 500 0.5")
+  		document.body.appendChild(el)
+		}
+
+    	lax.setup()
+	      
+    	let i = 0
+	      const update = () => {
+	      	stats.begin();
+	        lax.update(i%500)
+	        i++
+		  	stats.end();
+	        window.requestAnimationFrame(update)
+	      }
+
+	      window.requestAnimationFrame(update)
+    }
+
+  </script>
+
+  <style>
+    body,html {
+      margin:0;
+      padding:0;
+      color: #F3F4F5;
+      background: #191818;
+      overflow-x: hidden;
+      height: 500vh;
+      font-family: 'Montserrat', sans-serif;
+    }
+
+    img {
+    	position: fixed;
+    }
+  </style>
+</head>
+
+<body>
+
+</body>
--- a/dev/reactive.html
+++ b/dev/reactive.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=0.75, minimum-scale=0.75">
+
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,600,800" rel="stylesheet">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+
+  <!-- <script src="./lib/lax.min.js"></script> -->
+  <script src="../src/lax.js"></script>
+
+  <script type="text/javascript">
+    window.onload = function() {
+      document.getElementById("main").classList.add("loaded")
+
+      lax.setup({
+        breakpoints: { xs: 0, s: 576, m: 768, l: 992  }
+      })
+
+      const update = () => {
+        lax.update(window.scrollY)
+        window.requestAnimationFrame(update)
+      }
+
+      window.requestAnimationFrame(update)
+      
+      let w = window.innerWidth
+      window.addEventListener("resize", function() {
+        if(w !== window.innerWidth) {
+          lax.populateElements()
+        }
+      });
+    }
+
+  </script>
+
+  <style>
+    body,html {
+      margin:0;
+      padding:0;
+      color: #F3F4F5;
+      background: #191818;
+      overflow-x: hidden;
+      height: 500vh;
+      font-family: 'Montserrat', sans-serif;
+    }
+
+    #main {
+      opacity: 0;
+      transition: opacity 200ms;
+    }
+
+    #main.loaded {
+      opacity: 1;
+    }
+   
+    #header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100vw;
+      z-index: 2;
+      height: 100vh;
+    }
+
+    #header img {
+      width: 78pt;
+      margin-top: 12pt;
+      position: fixed;
+      transform: scale(0.5)
+    }
+
+  </style>
+</head>
+
+<body>
+  <div id="main">
+    <div id="header" class="section">
+      <img src="./img/a.png" 
+        class="lax"
+        data-lax-scale="0 1, vh 5"
+        data-lax-scale_s="0 1, vh 1"
+        data-lax-preset_s="fadeInOut"
+        data-lax-scale_xs="0 1, vh 0"
+      />
+    </div>
+  </div>
+
+</body>
--- a/dev/smoothscroll.html
+++ b/dev/smoothscroll.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=0.75, maximum-scale=0.75, minimum-scale=0.75">
+
+
+  <!-- <script src="./lib/lax.min.js"></script> -->
+  <script src="../src/lax.js"></script>
+
+  <script type="text/javascript">
+    window.onload = function() {
+      document.getElementById("main").classList.add("loaded")
+
+      lax.setup()
+
+      let scrollPosTarget = 0
+      let currentVal = 0
+      const maxStep = 10
+
+      const update = () => {
+        if(scrollPosTarget != window.scrollY) {
+          scrollPosTarget = window.scrollY
+        }
+
+        const d = scrollPosTarget - currentVal
+
+        currentVal += Math.abs(d) > maxStep ? (d > 0 ? maxStep : -maxStep) : d
+        
+        lax.update(currentVal)
+        window.requestAnimationFrame(update)
+      }
+
+      window.requestAnimationFrame(update)
+    }
+  </script>
+
+  <style>
+    body,html {
+      margin:0;
+      padding:0;
+      color: #F3F4F5;
+      background: #191818;
+      overflow-x: hidden;
+      height: 10000vh;
+    }
+
+    #letter {
+      width: 10vw; 
+      margin-left: 10vw;
+      position: fixed;
+      top: 20vh;
+    }
+
+  </style>
+</head>
+
+
+<body>
+  <div id="main">
+    <div id="header" class="section">
+      <img src="../docs/img/a.png" class="lax" id="letter" data-lax-translate-x="0 0, 1000 1000" />
+    </div>
+  </div>
+</body>
--- a/docs/demo.html
+++ b/docs/demo.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat:300,600,800" rel="stylesheet">
+
+
+  <style>
+    body,html {
+      margin:0;
+      padding:0;
+      color: rgb(10,10,10);
+      background: white;
+      overflow-x: hidden;
+      height: 10000vh;
+      font-family: "Raleway", "HelveticaNeue", sans-serif;
+    }
+
+    h4 {
+      font-size: 2rem;
+      line-height: 1.35;
+      letter-spacing: -.08rem;
+    }
+
+    #main {
+      opacity: 0;
+      transition: opacity 200ms;
+    }
+
+    #main.loaded {
+      opacity: 1;
+    }
+
+    #background {
+      position: fixed;
+    }
+
+    .leaf1 {
+      width: 200pt;
+      height: 80pt;
+      position: absolute;
+      background: url('img/leaf1.svg') no-repeat;
+      mix-blend-mode: multiply;
+      opacity: 0.7;
+    }
+
+    .leaf {
+      width: 200pt;
+      height: 100pt;
+      position: absolute;
+      mix-blend-mode: multiply;
+      opacity: 0.7;
+    }
+
+    #center {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100vw;
+    }
+
+    #avatar {
+      width: 150pt;
+      height: 150pt;
+      background: gray;
+      border-radius: 75pt;
+      margin-top: 50pt
+    }
+
+    #bio { 
+      width: 400pt;
+      position: fixed;
+    }
+
+    #bio p {
+      font-size: 14pt;
+      line-height: 26pt;
+      font-weight: 100;
+    }
+
+    .github-corner {
+      z-index: 1000;
+      display: block;
+      position: fixed;
+      top: 0;
+      right: 0;
+      transform: scale(1.2);
+    }
+
+  </style>
+
+  <!-- <script src="./lib/lax.min.js"></script> -->
+  <script src="../src/lax.js"></script>
+
+  <script type="text/javascript">
+
+    window.onload = function() {
+      document.getElementById("main").classList.add("loaded")
+
+      lax.setup()
+
+      const update = () => {
+        lax.update(window.scrollY)
+        window.requestAnimationFrame(update)
+      }
+
+      window.requestAnimationFrame(update)
+    }
+  </script>
+
+</head>
+
+
+<body>
+  <div id="main">
+    <div id="background">
+      <div 
+        class="lax leaf"
+        style="transform: scale(1.5); background: url('img/leaf1.svg') no-repeat;"
+        data-lax-rotate= "0 -20, 900 20, 2000 -20 | loop=2000 offset=200"
+        data-lax-translate-x= "0 110, 800 -100, 900 -110, 1900 100, 2000 110 | loop=2000 offset=200"
+        data-lax-translate-y= "0 -elh, (vh*10) (vh+elh) | loop=(vh*10) offset=1000 speed=1"
+      ></div>
+
+      <div 
+        class="lax leaf"
+        style="transform: scale(2); background: url('img/leaf2.svg') no-repeat;"
+        data-lax-rotate= "0 -20, 900 20, 2000 -20 | loop=2000 offset=500 speed=1.5"
+        data-lax-translate-x= "0 110, 800 -100, 900 -110, 1900 100, 2000 110 | loop=2000 offset=500 speed=1.5"
+        data-lax-translate-y= "0 -elh, (vh*10) (vh+elh) | loop=(vh*10) offset=1000 speed=1"
+      ></div>
+
+      <div 
+        class="lax leaf"
+        style="transform: scale(1.2); background: url('img/leaf3.svg') no-repeat;"
+        data-lax-rotate= "0 -20, 900 20, 2000 -20 | loop=2000 offset=1000"
+        data-lax-translate-x= "0 110, 800 -100, 900 -110, 1900 100, 2000 110 | loop=2000 offset=1000"
+        data-lax-translate-y= "0 -elh, (vh*10) (vh+elh) | loop=(vh*10) offset=400 speed=1"
+      ></div>
+    </div>
+
+    <div id="center">
+      <div 
+        id="avatar"
+        class="lax"
+      /></div>
+
+      <div id="bio">
+        <h4>Scroll Dowwwnn...</h4>
+      </div>
+    </div>
+
+  </div>
+
+    <a href="https://github.com/alexfoxy/laxxx" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#000000; color:#ffffff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
+
+</body>
--- a/docs/img/bart.png
+++ b/docs/img/bart.png
--- a/docs/img/bball.png
+++ b/docs/img/bball.png
--- a/docs/img/bowser-sprite.png
+++ b/docs/img/bowser-sprite.png
--- a/docs/img/leaf1.svg
+++ b/docs/img/leaf1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 155.56 54.07"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="17.69" y1="36.08" x2="165.43" y2="35.97" gradientTransform="translate(-20.45 21.43) rotate(-18.21)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c135d4"/><stop offset="1" stop-color="#6c56e3"/></linearGradient></defs><title>leaf1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M155.56,27c-17.91,16.44-46.08,27-77.77,27S17.91,43.47,0,27C17.91,10.59,46.09,0,77.79,0S137.65,10.59,155.56,27Z"/></g></g></svg>
--- a/docs/img/leaf2.svg
+++ b/docs/img/leaf2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 155.56 54.07"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="-18.84" y1="30.22" x2="128.9" y2="30.11" gradientTransform="translate(16.08 15.58) rotate(-18.21)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d4b43d"/><stop offset="1" stop-color="#ff309e"/></linearGradient></defs><title>leaf2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M155.56,27c-17.91,16.44-46.08,27-77.77,27S17.91,43.47,0,27C17.91,10.59,46.09,0,77.79,0S137.65,10.59,155.56,27Z"/></g></g></svg>
--- a/docs/img/leaf3.svg
+++ b/docs/img/leaf3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 155.56 54.07"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="-0.57" y1="33.15" x2="147.16" y2="33.04" gradientTransform="translate(-2.19 18.5) rotate(-18.21)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#008ad4"/><stop offset="1" stop-color="#57ffb6"/></linearGradient></defs><title>leaf3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M155.56,27c-17.91,16.44-46.08,27-77.77,27S17.91,43.47,0,27C17.91,10.59,46.09,0,77.79,0S137.65,10.59,155.56,27Z"/></g></g></svg>
--- a/docs/img/leaf4.svg
+++ b/docs/img/leaf4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 155.56 54.07"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="-17.27" y1="74.53" x2="130.46" y2="74.42" gradientTransform="translate(0.75 -26.02) rotate(-18.21)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#393fe3"/><stop offset="1" stop-color="#16d7de"/></linearGradient></defs><title>leaf4</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M155.56,27c-17.91,16.44-46.08,27-77.77,27S17.91,43.47,0,27C17.91,10.59,46.09,0,77.79,0S137.65,10.59,155.56,27Z"/></g></g></svg>
--- a/docs/img/leaf5.svg
+++ b/docs/img/leaf5.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 155.56 54.07"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="0.99" y1="77.45" x2="148.73" y2="77.34" gradientTransform="translate(-17.52 -23.09) rotate(-18.21)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#cce371"/><stop offset="1" stop-color="#37e310"/></linearGradient></defs><title>leaf5</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M155.56,27c-17.91,16.44-46.08,27-77.77,27S17.91,43.47,0,27C17.91,10.59,46.09,0,77.79,0S137.65,10.59,155.56,27Z"/></g></g></svg>
--- a/docs/img/mario-foreground.png
+++ b/docs/img/mario-foreground.png
--- a/docs/img/mario-logo.png
+++ b/docs/img/mario-logo.png
--- a/docs/img/mario-scrolldown.png
+++ b/docs/img/mario-scrolldown.png
--- a/docs/img/mario-sprite.png
+++ b/docs/img/mario-sprite.png
--- a/docs/img/mario-stars.gif
+++ b/docs/img/mario-stars.gif
--- a/docs/img/nyan.png
+++ b/docs/img/nyan.png
--- a/docs/index.html
+++ b/docs/index.html
@@ -9,24 +9,26 @@
  <script src="./lib/lax.min.js"></script>
  <!-- <script src="../src/lax.js"></script> -->

+
  <script type="text/javascript">
    window.onload = function() {
      document.getElementById("main").classList.add("loaded")

      lax.setup()
-        
-      document.addEventListener('scroll', function(x) {
+
+      const update = () => {
        lax.update(window.scrollY)
-      }, false)
+        window.requestAnimationFrame(update)
+      }
+
+      window.requestAnimationFrame(update)

      let w = window.innerWidth
      window.addEventListener("resize", function() {
        if(w !== window.innerWidth) {
-          lax.populateElements()
+          lax.updateElements()
        }
      });
-
-      lax.update(window.scrollY)
    }
  </script>

@@ -205,25 +207,35 @@
      cursor: pointer;
    }

+    .github-corner {
+      z-index: 1000;
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: scale(1.2);
+    }
+
  </style>
 </head>


 <body>
+
  <div id="main">
    <div id="header" class="section">
-      <img src="./img/l.png" style="width: 103pt; margin-left: 26pt; margin-bottom: -4pt;" data-lax-translate-x="0 0, vh 200" data-lax-optimize=true />
-      <img src="./img/a.png" data-lax-translate-x="0 0, vh -200" data-lax-optimize=true />
-      <img src="./img/x.png" data-lax-opacity="0 1, (0.8*vh) 0" />
-      <img src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 200" data-lax-opacity="0 1, (0.8*vh) 0" />
-      <img src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 400" data-lax-opacity="0 1, (0.8*vh) 0" />
-      <img src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 600" data-lax-opacity="0 1, (0.8*vh) 0" />
-      <img src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 800" data-lax-opacity="0 1, (0.8*vh) 0" />
-      <img src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 1000" data-lax-opacity="0 1, (0.8*vh) 0" />
-      <h2 data-lax-scale="0 1, vh 0.2" data-lax-translate-y="0 0, vh 1200" data-lax-opacity="0 1, (vh*0.5) 0">awesum scroll effects</h2>
+      <img src="./img/l.png" class="lax" style="width: 103pt; margin-left: 26pt; margin-bottom: -4pt;" data-lax-translate-x="0 0, vh 200" data-lax-optimize=true />
+      <img src="./img/a.png" class="lax" data-lax-translate-x="0 0, vh -200" data-lax-optimize=true />
+      <img src="./img/x.png" class="lax" data-lax-opacity="0 1, (0.8*vh) 0" />
+      <img src="./img/x.png" class="lax" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 200" data-lax-opacity="0 1, (0.8*vh) 0" />
+      <img class="lax" src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 400" data-lax-opacity="0 1, (0.8*vh) 0" />
+      <img class="lax" src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 600" data-lax-opacity="0 1, (0.8*vh) 0" />
+      <img class="lax" src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 800" data-lax-opacity="0 1, (0.8*vh) 0" />
+      <img class="lax" src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 1000" data-lax-opacity="0 1, (0.8*vh) 0" />
+      <h2 class="lax" data-lax-scale="0 1, vh 0.2" data-lax-translate-y="0 0, vh 1200" data-lax-opacity="0 1, (vh*0.5) 0">awesum scroll effects</h2>

-      <h4 data-lax-opacity="0 1, (vh*0.05) 0">scroll down</h4>
-      <i class="fas fa-chevron-down" 
+      <h4 class="lax" data-lax-opacity="0 1, (vh*0.05) 0">scroll down</h4>
+      <i class="lax fas fa-chevron-down" 
        data-lax-opacity="0 1, (vh*0.1) 0" 
        data-lax-translate-y="0 0, 200 100">
      </i>
@@ -232,131 +244,135 @@

    <div id="section1" class="section">
      <div class="left">
-        <div class="bubble a"
+        <div class="lax bubble a"
          style="background: #EDD943"
          data-lax-preset="lazy-250"
        ></div>

-        <div class="bubble c"
+        <div class="lax bubble c"
          style="background: #ED2471; margin-left: 80pt"
          data-lax-preset="lazy-100"
        ></div>

-        <div class="bubble b"
+        <div class="lax bubble b"
          style="background: #35D5E5; margin-left: 160pt"
          data-lax-preset="lazy-300"
        ></div>

-        <h3 data-lax-preset="driftRight" data-lax-optimize=true class="chunkyText" style="color: #35D5E5;">oooh!</h3>
+        <h3 data-lax-preset="driftRight" data-lax-optimize=true class="lax chunkyText" style="color: #35D5E5;">oooh!</h3>
      </div>

      <div class="right">
-          <div class="bubble a"
+          <div class="lax bubble a"
            style="background: #35D5E5; margin-left: 120pt"
            data-lax-preset="lazy-200"
          ></div>

-          <div class="bubble c"
+          <div class="lax bubble c"
            style="background: #EDD943; margin-left: -20pt"
            data-lax-preset="lazy-150"
          ></div>

-          <div class="bubble b"
+          <div class="lax bubble b"
            style="background: #ED2471; margin-left: 20pt; margin-top: 200pt"
            data-lax-preset="lazy-350"
          ></div>
-        <h3 data-lax-optimize=true data-lax-preset="driftLeft" class="chunkyText" style="color: #ED2471; margin-top: 200pt;">aaah!</h3>
+        <h3 data-lax-optimize=true data-lax-preset="driftLeft" class="lax chunkyText" style="color: #ED2471; margin-top: 200pt;">aaah!</h3>
      </div>

-      <h3 data-lax-preset="crazy zoomInOut" class="crazyText" data-lax-optimize=true>sooo crazy</h3>
+      <h3 data-lax-preset="crazy zoomInOut" class="lax crazyText" data-lax-optimize=true>sooo crazy</h3>
    </div>

    <div id="section2" class="section">
-      <div class="blockContainer" data-lax-preset="leftToRight-1.1 fadeInOut">
-        <div class="block"
+      <div class="lax blockContainer" data-lax-preset="leftToRight-1.1 fadeInOut">
+        <div class="lax block"
          style="background: #35D5E5;"
          data-lax-preset="spin"
        ></div>
      </div>

-      <div class="blockContainer" data-lax-preset="leftToRight-1.2 fadeInOut">
-        <div class="block"
+      <div class="lax blockContainer" data-lax-preset="leftToRight-1.2 fadeInOut">
+        <div class="lax block"
          style="background: #EDD943; margin-top: -50pt; margin-left: -50pt; width: 40pt; height: 40pt;"
          data-lax-preset="spinRev-500"
        ></div>
      </div>

-      <div class="blockContainer" data-lax-preset="leftToRight-1.4 fadeInOut">
-        <div class="block"
+      <div class="lax blockContainer" data-lax-preset="leftToRight-1.4 fadeInOut">
+        <div class="lax block"
          style="background: #ED2471; margin-top: -90pt; margin-left: -0pt;"
          data-lax-preset="spin-500"
        ></div>
      </div>

-      <div class="blockContainer" data-lax-preset="leftToRight-1.5 fadeInOut">
-        <div class="block"
+      <div class="lax blockContainer" data-lax-preset="leftToRight-1.5 fadeInOut">
+        <div class="lax block"
          style="background: #EDD943; margin-top: 70pt; margin-left: -150pt; width: 40pt; height: 40pt;"
          data-lax-preset="spinRev-500"
        ></div>
      </div>

-      <div class="blockContainer" data-lax-preset="leftToRight-1.3 fadeInOut">
-        <div class="block"
+      <div class="lax blockContainer" data-lax-preset="leftToRight-1.3 fadeInOut">
+        <div class="lax block"
          style="background: #EDD943; margin-top: 100pt; margin-left: -60pt; width: 25pt; height: 25pt;"
          data-lax-preset="spin-500"
        ></div>
      </div>

-      <div class="blockContainer" data-lax-preset="leftToRight-1.05 fadeInOut">
-        <div class="block"
+      <div class="lax blockContainer" data-lax-preset="leftToRight-1.05 fadeInOut">
+        <div class="lax block"
          style="background: #ED2471; margin-top: -30pt; margin-left: -70pt;"
          data-lax-preset="spin"
        ></div>
      </div>

-      <h3 data-lax-preset="leftToRight-0.8 speedy" data-lax-optimize=true class="chunkyText" style="
+      <h3 data-lax-preset="leftToRight-0.8 speedy" data-lax-optimize=true class="lax chunkyText" style="
        color: #white; position: absolute; margin-top: -20pt; margin-left: -100pt">
        wheee!
      </h3>

-      <div class="blockContainer" data-lax-preset="leftToRight-1.15 fadeInOut">
-        <div class="block"
+      <div class="lax blockContainer" data-lax-preset="leftToRight-1.15 fadeInOut">
+        <div class="lax block"
          style="background: #35D5E5; margin-top: -70pt; margin-left: -20pt; width: 40pt; height: 40pt;"
          data-lax-preset="spinRev-500"
        ></div>
      </div>

-      <div class="blockContainer" data-lax-preset="leftToRight-1.45 fadeInOut">
-        <div class="block"
+      <div class="lax blockContainer" data-lax-preset="leftToRight-1.45 fadeInOut">
+        <div class="lax block"
          style="background: #ED2471; margin-top: -50pt; margin-left: -50pt; width: 25pt; height: 25pt;"
          data-lax-preset="spin-500"
        ></div>
      </div>

-      <div class="blockContainer" data-lax-preset="leftToRight-1.5 fadeInOut">
-        <div class="block"
+      <div class="lax blockContainer" data-lax-preset="leftToRight-1.5 fadeInOut">
+        <div class="lax block"
          style="background: #35D5E5; margin-top: 30pt; margin-left: -20pt;"
          data-lax-preset="spinRev-500"
        ></div>
      </div>

-      <div class="blockContainer" data-lax-preset="leftToRight-1.25 fadeInOut">
-        <div class="block"
+      <div class="lax blockContainer" data-lax-preset="leftToRight-1.25 fadeInOut">
+        <div class="lax block"
          style="background: #ED2471; margin-top: 80pt; margin-left: -10pt;"
          data-lax-preset="spin-500"
        ></div>
      </div>
    </div>

-    <div id="section3" class="section">
-      <p data-lax-preset="linger" data-lax-optimize=true>
+    <div id="section3" class="lax section">
+      <p class="lax" data-lax-preset="linger" data-lax-optimize=true>
        Harness the power of scrolling and make your websites come alive!
      </p>
-      <a class="button" data-lax-preset="linger" data-lax-optimize=true data-lax-bg-pos-x="0 0, 3000 1000" href="https://github.com/alexfoxy/laxxx">
+      <a class="lax button" data-lax-preset="linger" data-lax-optimize=true data-lax-bg-pos-x="0 0, 3000 1000" href="https://github.com/alexfoxy/laxxx">
        Get lax.js
      </a>
    </div>

+
+
  </div>

+  <a href="https://github.com/alexfoxy/laxxx" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
 </body>
--- a/docs/lib/lax.min.js
+++ b/docs/lib/lax.min.js
--- a/docs/sprite.html
+++ b/docs/sprite.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
+
+
+  <style>
+    body,html {
+      margin:0;
+      padding:0;
+      color: #F3F4F5;
+      background: #3c2d7f;
+      overflow-x: hidden;
+      height: 10000vh;
+      font-family: 'Montserrat', sans-serif;
+    }
+
+    #main {
+      opacity: 0;
+      transition: opacity 200ms;
+    }
+
+    #main.loaded {
+      opacity: 1;
+    }
+
+    #mario {
+      width: 256px;
+      height: 256px;
+      /*left: 0;*/
+      position: fixed;
+      top: calc(70vh - 256px)
+    }
+
+    #bowser {
+      width: 524px;
+      height: 350px;
+      /*left: 100vw;*/
+      position: fixed;
+      top: calc(70vh - 330px)
+    }
+
+    #stars {
+      width: 100vw;
+      height: 70vh;
+      background: url("img/mario-stars.gif");
+      background-size: 800px;
+      position: fixed;
+      opacity: 0.7;
+      top: 0;
+    }
+
+    #foreground {
+      width: 100vw;
+      height: 30vh;
+      background: url("img/mario-foreground.png");
+      background-size: 15vh;
+      position: fixed;
+      top: 70vh;
+    }
+
+    #nyan {
+      width: 300px;
+      height: 119px;
+      position: fixed;
+      top: 20vh;
+      left: 0;
+    }
+
+    #logo {
+      width: 300pt;
+      height: 100pt;
+      background: url(img/mario-logo.png) no-repeat center top;
+      background-size: contain;
+      position: fixed;
+      top: 10vh;
+      left: calc(50vw - 150pt);
+      z-index: 200;
+    }
+
+    #scrolltext {
+      width: 300pt;
+      height: 50pt;
+      background: url(img/mario-scrolldown.png) no-repeat center top;
+      background-size: contain;
+      position: fixed;
+      top: 83vh;
+      left: calc(50vw - 150pt);
+    }
+
+    #planet1 {
+      width: 30vw;
+      height: 30vw;
+      position: fixed;
+      left: 100vw;
+      bottom: 29vh;
+    }
+
+    #planet2 {
+      width: 20vw;
+      height: 20vw;
+      top: 10vh;
+      left: 30pt;
+      position: fixed;
+    }
+
+    .github-corner {
+      z-index: 1000;
+      display: block;
+      position: fixed;
+      top: 0;
+      right: 0;
+      transform: scale(1.2);
+    }
+
+  </style>
+
+  <script src="./lib/lax.min.js"></script>
+  <!-- <script src="../src/lax.js"></script> -->
+
+  <script type="text/javascript">
+    window.onload = function() {
+      document.getElementById("main").classList.add("loaded")
+
+      lax.setup()
+
+      const update = () => {
+        lax.update(window.scrollY)
+        window.requestAnimationFrame(update)
+      }
+
+      window.requestAnimationFrame(update)
+    }
+  </script>
+
+</head>
+
+
+<body>
+  <div id="main">
+    <div id="header" class="section">
+
+      <div 
+        id="stars"
+        class="lax"
+        data-lax-bg-pos-x="0 0, 10000 -800 | loop=10000"
+      ></div>
+
+      <div 
+        id="planet1"
+        class="lax"
+        data-lax-translate-x="0 0, 5000 (-vw-elw)"
+        data-lax-sprite-data="382,382,15,5,10"
+        data-lax-sprite-image="./img/bart.png"
+      ></div>
+
+      <div 
+        id="foreground"
+        class="lax"
+        data-lax-bg-pos-x="0 0, 7000 (-15*vh) | loop=7000"
+      ></div>
+
+      <div 
+        id="logo"
+      ></div>
+
+      <div 
+        id="scrolltext"
+        data-lax-translate-y="0 0, 360 350"
+        class="lax"
+      ></div>
+
+      <div 
+        id="nyan"
+        data-lax-sprite-data="300,119,12,4,10"
+        data-lax-translate-x="0 vw, 600 -elw | loop=600"
+        data-lax-sprite-image="./img/nyan.png"        
+        class="lax"
+      ></div>
+
+      <div 
+        id="mario"
+        class="lax"
+        data-lax-translate-x="0 -elw, 720 (vw+elw) | loop=720"
+        data-lax-translate-y="0 0, 240 0, 300 -500, 420 0, 720 0 | loop=720"
+        data-lax-sprite-data="256,256,12,4,5"
+        data-lax-sprite-image="./img/mario-sprite.png"
+      ></div>
+
+      <div 
+        id="bowser"
+        class="lax"
+        data-lax-translate-x="0 vw, 720 -elw | loop=720"
+        data-lax-sprite-data="524,350,8,4,10"
+        data-lax-sprite-image="./img/bowser-sprite.png"
+      ></div>
+
+
+    </div>
+
+  </div>
+
+    <a href="https://github.com/alexfoxy/laxxx" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
+
+</body>
--- a/lib/lax.js
+++ b/lib/lax.js
@@ -1,7 +1,15 @@
 "use strict";

+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { 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; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 //
-// lax v0.0.1 (Alex Fox)
+// lax v1.2.3 (Alex Fox)
 // Simple & light weight vanilla javascript plugin to create beautiful animations things when you scrolllll!!
 //
 // Licensed under the terms of the MIT license.
@@ -20,7 +28,9 @@
      elements: []
    };
    var lastY = 0;
-    var transforms = {
+    var currentBreakpoint = 'default';
+    var breakpointsSeparator = "_";
+    var transformFns = {
      "data-lax-opacity": function dataLaxOpacity(style, v) {
        style.opacity = v;
      },
@@ -54,6 +64,12 @@
      "data-lax-rotate": function dataLaxRotate(style, v) {
        style.transform += " rotate(".concat(v, "deg)");
      },
+      "data-lax-rotate-x": function dataLaxRotateX(style, v) {
+        style.transform += " rotateX(".concat(v, "deg)");
+      },
+      "data-lax-rotate-y": function dataLaxRotateY(style, v) {
+        style.transform += " rotateY(".concat(v, "deg)");
+      },
      "data-lax-brightness": function dataLaxBrightness(style, v) {
        style.filter += " brightness(".concat(v, "%)");
      },
@@ -87,8 +103,8 @@
    };
    var _crazy = "";

-    for (var i = 0; i < 100; i++) {
-      _crazy += " " + window.innerHeight * (i / 100) + " " + Math.random() * 360 + ", ";
+    for (var i = 0; i < 20; i++) {
+      _crazy += " " + i * 5 + " " + i * 47 % 360 + ", ";
    }

    lax.presets = {
@@ -117,7 +133,7 @@
      },
      crazy: function crazy(v) {
        return {
-          "data-lax-hue-rotate": _crazy
+          "data-lax-hue-rotate": "".concat(_crazy, " | loop=20")
        };
      },
      spin: function spin() {
@@ -253,49 +269,90 @@
      return yPoint;
    }

-    lax.setup = function (o) {
+    function fnOrVal(s) {
+      if (s[0] === "(") return eval(s);else return parseFloat(s);
+    }
+
+    lax.setup = function () {
+      var o = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      lax.breakpoints = o.breakpoints || {};
+      lax.selector = o.selector || '.lax';
      lax.populateElements();
    };

    lax.removeElement = function (el) {
-      var i = this.elements.findIndex(function (o) {
+      var i = lax.elements.findIndex(function (o) {
        return o.el = el;
      });

      if (i > -1) {
-        this.elements.splice(i, 1);
+        lax.elements.splice(i, 1);
      }
    };

-    lax.addElement = function (el) {
+    lax.createLaxObject = function (el) {
      var o = {
        el: el,
-        transforms: []
+        originalStyle: {
+          transform: el.style.transform,
+          filter: el.style.filter
+        },
+        transforms: {}
      };
-      var presetNames = el.attributes["data-lax-preset"] && el.attributes["data-lax-preset"].value;
+      return o;
+    };

-      if (presetNames) {
-        presetNames.split(" ").forEach(function (p) {
+    lax.calcTransforms = function (o) {
+      var el = o.el; //find presets in data attributes
+
+      var presets = [];
+
+      for (var _i = 0; _i < el.attributes.length; _i++) {
+        var a = el.attributes[_i];
+
+        if (a.name.indexOf("data-lax-preset") > -1) {
+          presets.push(a);
+        }
+      } //unwrap presets into transformations
+
+
+      var _loop = function _loop(_i2) {
+        var a = presets[_i2];
+        var b = a.name.split(breakpointsSeparator);
+        var breakpoint = b[1] ? "".concat(breakpointsSeparator).concat(b[1]) : '';
+        a.value.split(" ").forEach(function (p) {
          var bits = p.split("-");
          var fn = lax.presets[bits[0]];

          if (!fn) {
-            console.error("preset ".concat(bits[0], " is not defined"));
+            console.log("lax error: preset ".concat(bits[0], " is not defined"));
          } else {
            var d = fn(bits[1]);

            for (var k in d) {
-              el.setAttribute(k, d[k]);
+              el.setAttribute("".concat(k).concat(breakpoint), d[k]);
            }
          }
        });
-        el.setAttribute("data-lax-anchor", "self");
-        el.attributes.removeNamedItem("data-lax-preset");
-      }
+        var currentAnchor = el.getAttribute("data-lax-anchor");
+        if (!currentAnchor || currentAnchor === "") el.setAttribute("data-lax-anchor", "self");
+        el.attributes.removeNamedItem(a.name);
+      };
+
+      for (var _i2 = 0; _i2 < presets.length; _i2++) {
+        _loop(_i2);
+      } // use gpu
+

      var useGpu = !(el.attributes["data-lax-use-gpu"] && el.attributes["data-lax-use-gpu"].value === 'false');
-      if (useGpu) el.style["-webkit-backface-visibility"] = "hidden";
-      if (el.attributes["data-lax-use-gpu"]) el.attributes.removeNamedItem("data-lax-use-gpu");
+
+      if (useGpu) {
+        el.style["backface-visibility"] = "hidden";
+        el.style["-webkit-backface-visibility"] = "hidden";
+      }
+
+      if (el.attributes["data-lax-use-gpu"]) el.attributes.removeNamedItem("data-lax-use-gpu"); // optmise off screen
+
      o.optimise = false;

      if (el.attributes["data-lax-optimize"] && el.attributes["data-lax-optimize"].value === 'true') {
@@ -303,74 +360,182 @@
        var bounds = el.getBoundingClientRect();
        el.setAttribute("data-lax-opacity", "".concat(-bounds.height - 1, " 0, ").concat(-bounds.height, " 1, ").concat(window.innerHeight, " 1, ").concat(window.innerHeight + 1, " 0"));
        el.attributes.removeNamedItem("data-lax-optimize");
-      }
+      } // build transform list

-      for (var i = 0; i < el.attributes.length; i++) {
-        var a = el.attributes[i];
-        var bits = a.name.split("-");
+
+      for (var _i3 = 0; _i3 < el.attributes.length; _i3++) {
+        var _a = el.attributes[_i3];
+        if (_a.name.indexOf("data-lax") < 0) continue;
+
+        var b = _a.name.split(breakpointsSeparator);
+
+        var bits = b[0].split("-");
+        var breakpoint = b[1] || "default";

        if (bits[1] === "lax") {
-          if (a.name === "data-lax-anchor") {
-            o["data-lax-anchor"] = a.value === "self" ? el : document.querySelector(a.value);
+          if (_a.name === "data-lax-anchor") {
+            o["data-lax-anchor"] = _a.value === "self" ? el : document.querySelector(_a.value);
            var rect = o["data-lax-anchor"].getBoundingClientRect();
-            o["data-lax-anchor-top"] = Math.floor(rect.top) + window.scrollY;
+            o.anchorTop = Math.floor(rect.top) + window.scrollY;
          } else {
-            o.transforms[a.name] = a.value.replace(new RegExp('vw', 'g'), window.innerWidth).replace(new RegExp('vh', 'g'), window.innerHeight).replace(new RegExp('elh', 'g'), el.clientHeight).replace(new RegExp('elw', 'g'), el.clientWidth).replace(new RegExp('-vw', 'g'), -window.innerWidth).replace(new RegExp('-vh', 'g'), -window.innerHeight).replace(new RegExp('-elh', 'g'), -el.clientHeight).replace(new RegExp('-elw', 'g'), -el.clientWidth).replace(/\s+/g, " ").split(",").map(function (x) {
-              return x.trim().split(" ").map(function (y) {
-                if (y[0] === "(") return eval(y);else return parseFloat(y);
+            (function () {
+              var tString = _a.value.replace(/vw/g, window.innerWidth).replace(/vh/g, window.innerHeight).replace(/elh/g, el.clientHeight).replace(/elw/g, el.clientWidth).replace(/\s+/g, " ");
+
+              var _tString$split = tString.split("|"),
+                  _tString$split2 = _slicedToArray(_tString$split, 2),
+                  arrString = _tString$split2[0],
+                  optionString = _tString$split2[1];
+
+              var options = {};
+
+              if (optionString) {
+                optionString.split(" ").forEach(function (o) {
+                  var _o$split = o.split("="),
+                      _o$split2 = _slicedToArray(_o$split, 2),
+                      key = _o$split2[0],
+                      val = _o$split2[1];
+
+                  options[key] = key && fnOrVal(val);
+                });
+              }
+
+              var name = b[0];
+              var valueMap = arrString.split(",").map(function (x) {
+                return x.trim().split(" ").map(fnOrVal);
+              }).sort(function (a, b) {
+                return a[0] - b[0];
              });
-            }).sort(function (a, b) {
-              return a[0] - b[0];
-            });
+
+              if (!o.transforms[name]) {
+                o.transforms[name] = {};
+              }
+
+              o.transforms[name][breakpoint] = {
+                valueMap: valueMap,
+                options: options
+              };
+            })();
          }
        }
+      } // sprite sheet animation
+
+
+      var spriteData = el.attributes["data-lax-sprite-data"] && el.attributes["data-lax-sprite-data"].value;
+
+      if (spriteData) {
+        o.spriteData = spriteData.split(",").map(function (x) {
+          return parseInt(x);
+        });
+        el.style.height = o.spriteData[1] + "px";
+        el.style.width = o.spriteData[0] + "px";
+        var spriteImage = el.attributes["data-lax-sprite-image"] && el.attributes["data-lax-sprite-image"].value;
+
+        if (spriteImage) {
+          el.style.backgroundImage = "url(".concat(spriteImage, ")");
+        }
      }

+      return o;
+    };
+
+    lax.addElement = function (el) {
+      var o = lax.calcTransforms(lax.createLaxObject(el));
      lax.elements.push(o);
      lax.updateElement(o);
    };

    lax.populateElements = function () {
      lax.elements = [];
-      var selector = Object.keys(transforms).map(function (t) {
-        return "[".concat(t, "]");
-      }).join(",");
-      selector += ",[data-lax-preset]";
-      document.querySelectorAll(selector).forEach(this.addElement);
+      document.querySelectorAll(lax.selector).forEach(lax.addElement);
+      currentBreakpoint = lax.getCurrentBreakPoint();
+    };
+
+    lax.updateElements = function () {
+      lax.elements.forEach(function (o) {
+        lax.calcTransforms(o);
+        lax.updateElement(o);
+      });
+      currentBreakpoint = lax.getCurrentBreakPoint();
+    };
+
+    lax.getCurrentBreakPoint = function () {
+      var b = 'default';
+      var w = window.innerWidth;
+
+      for (var _i4 in lax.breakpoints) {
+        var px = parseFloat(lax.breakpoints[_i4]);
+
+        if (px <= w) {
+          b = _i4;
+        } else {
+          break;
+        }
+      }
+
+      return b;
    };

    lax.updateElement = function (o) {
-      var y = lastY;
-      var r = o["data-lax-anchor-top"] ? o["data-lax-anchor-top"] - y : y;
+      var originalStyle = o.originalStyle,
+          anchorTop = o.anchorTop,
+          transforms = o.transforms,
+          spriteData = o.spriteData,
+          el = o.el;
+      var r = anchorTop ? anchorTop - lastY : lastY;
      var style = {
-        transform: "",
-        filter: ""
+        transform: originalStyle.transform,
+        filter: originalStyle.filter
      };

-      for (var i in o.transforms) {
-        var arr = o.transforms[i];
-        var t = transforms[i];
-        var v = intrp(arr, r);
+      for (var _i5 in transforms) {
+        var transformData = transforms[_i5][currentBreakpoint] || transforms[_i5]["default"];
+
+        if (!transformData) {
+          // console.log(`lax error: there is no setting for key ${i} and screen size ${currentBreakpoint}. Try adding a default value!`)
+          continue;
+        }
+
+        var _r = r;
+        if (transformData.options.offset) _r = _r + transformData.options.offset;
+        if (transformData.options.speed) _r = _r * transformData.options.speed;
+        if (transformData.options.loop) _r = _r % transformData.options.loop;
+        var t = transformFns[_i5];
+        var v = intrp(transformData.valueMap, _r);

        if (!t) {
-          console.error("lax: " + i + " is not supported");
-          return;
+          // console.info(`lax: error ${i} is not supported`)
+          continue;
        }

        t(style, v);
      }

-      for (var k in style) {
-        if (style.opacity === 0) {
-          // if opacity 0 don't update
-          o.el.style.opacity = 0;
-        } else {
-          o.el.style[k] = style[k];
+      if (spriteData) {
+        var _spriteData = _slicedToArray(spriteData, 5),
+            frameW = _spriteData[0],
+            frameH = _spriteData[1],
+            numFrames = _spriteData[2],
+            cols = _spriteData[3],
+            scrollStep = _spriteData[4];
+
+        var frameNo = Math.floor(lastY / scrollStep) % numFrames;
+        var framePosX = frameNo % cols;
+        var framePosY = Math.floor(frameNo / cols);
+        style.backgroundPosition = "-".concat(framePosX * frameW, "px -").concat(framePosY * frameH, "px");
+      }
+
+      if (style.opacity === 0) {
+        // if opacity 0 don't update
+        el.style.opacity = 0;
+      } else {
+        for (var k in style) {
+          el.style[k] = style[k];
        }
      }
    };

    lax.update = function (y) {
+      if (lastY === y) return;
      lastY = y;
      lax.elements.forEach(lax.updateElement);
    };
--- 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,20 +1,20 @@
 {
 	"name": "lax.js",
-	"version": "1.1.0",
+	"version": "1.2.4",
 	"scripts": {
 		"build": "babel src -d lib; uglifyjs lib/lax.js -o lib/lax.min.js -c -m; gzip < lib/lax.min.js > lib/lax.min.js.gz;"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.2.3",
-		"@babel/core": "^7.3.4",
-		"@babel/preset-env": "^7.3.4"
+		"@babel/cli": "^7.5.0",
+		"@babel/core": "^7.5.0",
+		"@babel/preset-env": "^7.5.0"
 	},
 	"description": "Simple & light weight (2kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!",
 	"license": "MIT",
 	"author": "alexfoxy@gmail.com",
 	"repository": {
-	  "type" : "git",
-	  "url" : "https://github.com/alexfoxy/laxxx"
+		"type": "git",
+		"url": "https://github.com/alexfoxy/laxxx"
 	},
 	"main": "lib/lax.min.js",
 	"keywords": [
@@ -26,4 +26,4 @@
 		"css",
 		"html"
 	]
-}
+}
--- a/src/lax.js
+++ b/src/lax.js
@@ -1,5 +1,5 @@
 //
-// lax v0.0.1 (Alex Fox)
+// lax v1.2.3 (Alex Fox)
 // Simple & light weight vanilla javascript plugin to create beautiful animations things when you scrolllll!!
 //
 // Licensed under the terms of the MIT license.
@@ -13,42 +13,46 @@
 // without getting a written permission first.
 //

-(function() {
-  var lax = (function() {
-    var lax = {
+(() => {
+  const lax = (() => {
+    const lax = {
      elements: []
    }

    let lastY = 0;
+    let currentBreakpoint = 'default'
+    const breakpointsSeparator = "_"

-    const transforms = {
-      "data-lax-opacity": function(style, v) { style.opacity = v },
-      "data-lax-translate": function(style, v) { style.transform += ` translate(${v}px, ${v}px)` },
-      "data-lax-translate-x": function(style, v) { style.transform += ` translateX(${v}px)` },
-      "data-lax-translate-y": function(style, v) { style.transform += ` translateY(${v}px)` },
-      "data-lax-scale": function(style, v) { style.transform += ` scale(${v})` },
-      "data-lax-scale-x": function(style, v) { style.transform += ` scaleX(${v})` },
-      "data-lax-scale-y": function(style, v) { style.transform += ` scaleY(${v})` },
-      "data-lax-skew": function(style, v) { style.transform += ` skew(${v}deg, ${v}deg)` },
-      "data-lax-skew-x": function(style, v) { style.transform += ` skewX(${v}deg)` },
-      "data-lax-skew-y": function(style, v) { style.transform += ` skewY(${v}deg)` },
-      "data-lax-rotate": function(style, v) { style.transform += ` rotate(${v}deg)` },
-      "data-lax-brightness": function(style, v) { style.filter += ` brightness(${v}%)` },
-      "data-lax-contrast": function(style, v) { style.filter += ` contrast(${v}%)` },
-      "data-lax-hue-rotate": function(style, v) { style.filter += ` hue-rotate(${v}deg)` },
-      "data-lax-blur": function(style, v) { style.filter += ` blur(${v}px)` },
-      "data-lax-invert": function(style, v) { style.filter += `  invert(${v}%)` },
-      "data-lax-saturate": function(style, v) { style.filter += `  saturate(${v}%)` },
-      "data-lax-grayscale": function(style, v) { style.filter += `  grayscale(${v}%)` },
-      "data-lax-bg-pos": function(style, v) { style.backgroundPosition = `${v}px ${v}px` },
-      "data-lax-bg-pos-x": function(style, v) { style.backgroundPositionX = `${v}px` },
-      "data-lax-bg-pos-y": function(style, v) { style.backgroundPositionY = `${v}px` }
+    const transformFns = {
+      "data-lax-opacity": (style, v) => { style.opacity = v },
+      "data-lax-translate": (style, v) => { style.transform += ` translate(${v}px, ${v}px)` },
+      "data-lax-translate-x": (style, v) => { style.transform += ` translateX(${v}px)` },
+      "data-lax-translate-y": (style, v) => { style.transform += ` translateY(${v}px)` },
+      "data-lax-scale": (style, v) => { style.transform += ` scale(${v})` },
+      "data-lax-scale-x": (style, v) => { style.transform += ` scaleX(${v})` },
+      "data-lax-scale-y": (style, v) => { style.transform += ` scaleY(${v})` },
+      "data-lax-skew": (style, v) => { style.transform += ` skew(${v}deg, ${v}deg)` },
+      "data-lax-skew-x": (style, v) => { style.transform += ` skewX(${v}deg)` },
+      "data-lax-skew-y": (style, v) => { style.transform += ` skewY(${v}deg)` },
+      "data-lax-rotate": (style, v) => { style.transform += ` rotate(${v}deg)` },
+      "data-lax-rotate-x": (style, v) => { style.transform += ` rotateX(${v}deg)` },
+      "data-lax-rotate-y": (style, v) => { style.transform += ` rotateY(${v}deg)` },
+      "data-lax-brightness": (style, v) => { style.filter += ` brightness(${v}%)` },
+      "data-lax-contrast": (style, v) => { style.filter += ` contrast(${v}%)` },
+      "data-lax-hue-rotate": (style, v) => { style.filter += ` hue-rotate(${v}deg)` },
+      "data-lax-blur": (style, v) => { style.filter += ` blur(${v}px)` },
+      "data-lax-invert": (style, v) => { style.filter += `  invert(${v}%)` },
+      "data-lax-saturate": (style, v) => { style.filter += `  saturate(${v}%)` },
+      "data-lax-grayscale": (style, v) => { style.filter += `  grayscale(${v}%)` },
+      "data-lax-bg-pos": (style, v) => { style.backgroundPosition = `${v}px ${v}px` },
+      "data-lax-bg-pos-x": (style, v) => { style.backgroundPositionX = `${v}px` },
+      "data-lax-bg-pos-y": (style, v) => { style.backgroundPositionY = `${v}px` }
    }

    let crazy = ""

-    for(var i=0;i<100;i++) {
-      crazy += " " + (window.innerHeight*(i/100)) + " " + (Math.random() * 360) + ", "
+    for(let i=0;i<20;i++) {
+      crazy += " " + i*5 + " " + (i*47)%360 + ", "
    }

    lax.presets = {
@@ -65,7 +69,7 @@
        return { "data-lax-translate-x": `vh ${v}, (vh*0.8) ${-v}, (vh*0.6) ${v}, (vh*0.4) ${-v}, (vh*0.2) ${v}, (vh*0) ${-v}, (-elh) ${v}` }
      },
      crazy: (v) => {
-        return { "data-lax-hue-rotate": crazy }
+        return { "data-lax-hue-rotate": `${crazy} | loop=20` }
      },
      spin: (v=360) => {
        return { "data-lax-rotate": `(vh) 0, (-elh) ${v}` }
@@ -131,64 +135,101 @@
    }

    function intrp(t, v) {
-      var i = 0
+      let i = 0

      while(t[i][0] <= v && t[i+1] !== undefined) {
        i+=1
      }

-      var x = t[i][0]
-      var prevX = t[i-1] === undefined ? x : t[i-1][0]
+      const x = t[i][0]
+      const prevX = t[i-1] === undefined ? x : t[i-1][0]

-      var y = t[i][1]
-      var prevY = t[i-1] === undefined ? y : t[i-1][1]
+      const y = t[i][1]
+      const prevY = t[i-1] === undefined ? y : t[i-1][1]

-      var xPoint = Math.min(Math.max((v-prevX)/(x-prevX),0),1)
-      var yPoint = (xPoint*(y-prevY)) + prevY
+      const xPoint = Math.min(Math.max((v-prevX)/(x-prevX),0),1)
+      const yPoint = (xPoint*(y-prevY)) + prevY

      return yPoint
    }

-    lax.setup = function(o) {
+    function fnOrVal(s) {
+      if(s[0] === "(") return eval(s)
+      else return parseFloat(s)
+    }
+
+    lax.setup = (o={}) => {
+      lax.breakpoints = o.breakpoints || {}
+      
+      lax.selector = o.selector || '.lax'
      lax.populateElements()
    }

-    lax.removeElement = function(el) {
-      const i = this.elements.findIndex(o => o.el = el)
+    lax.removeElement = (el) => {
+      const i = lax.elements.findIndex(o => o.el = el)
      if(i > -1) {
-        this.elements.splice(i, 1)
+        lax.elements.splice(i, 1)
      }
    }

-    lax.addElement = function(el) {
-      var o = {
+    lax.createLaxObject = (el) => {
+      const o = {
        el: el,
-        transforms: []
+        originalStyle: {
+          transform: el.style.transform,
+          filter: el.style.filter
+        },
+        transforms: {}
      }

-      var presetNames = el.attributes["data-lax-preset"] && el.attributes["data-lax-preset"].value
-      if(presetNames) {
-        presetNames.split(" ").forEach((p) => {
-          const bits = p.split("-")
-          const fn = lax.presets[bits[0]]
-          if(!fn) {
-            console.error(`preset ${bits[0]} is not defined`)
-          } else {
-            const d = fn(bits[1])
-            for(var k in d) {
-              el.setAttribute(k, d[k])
-            }
+      return o
+    }
+
+    lax.calcTransforms = (o) => {
+      const { el } = o
+
+      //find presets in data attributes
+      const presets = []
+      for(let i=0; i<el.attributes.length; i++) {
+          const a = el.attributes[i]
+          if(a.name.indexOf("data-lax-preset") > -1)  {
+            presets.push(a);
          }
-        })
-
-        el.setAttribute("data-lax-anchor", "self")
-        el.attributes.removeNamedItem("data-lax-preset")
      }

+      //unwrap presets into transformations
+      for(let i=0; i<presets.length; i++) {
+          const a = presets[i]
+          const b = a.name.split(breakpointsSeparator)
+          const breakpoint = b[1] ? `${breakpointsSeparator}${b[1]}` : ''
+          a.value.split(" ").forEach((p) => {
+              const bits = p.split("-")
+              const fn = lax.presets[bits[0]]
+              if(!fn) {
+                  console.log(`lax error: preset ${bits[0]} is not defined`)
+              } else {
+                  const d = fn(bits[1])
+                  for(let k in d) {
+                      el.setAttribute(`${k}${breakpoint}`, d[k])
+                  }
+              }
+          })
+	  
+          const currentAnchor = el.getAttribute("data-lax-anchor")
+          if(!currentAnchor || currentAnchor === "") el.setAttribute("data-lax-anchor", "self")
+          el.attributes.removeNamedItem(a.name)
+
+      }
+
+      // use gpu
      const useGpu = !(el.attributes["data-lax-use-gpu"] && el.attributes["data-lax-use-gpu"].value === 'false')
-      if(useGpu) el.style["-webkit-backface-visibility"] = "hidden"
+      if(useGpu) {
+        el.style["backface-visibility"] = "hidden"
+        el.style["-webkit-backface-visibility"] = "hidden"
+      }
      if(el.attributes["data-lax-use-gpu"]) el.attributes.removeNamedItem("data-lax-use-gpu")

+      // optmise off screen
      o.optimise = false 
      if(el.attributes["data-lax-optimize"] && el.attributes["data-lax-optimize"].value === 'true') {
        o.optimise = true
@@ -197,81 +238,160 @@
        el.attributes.removeNamedItem("data-lax-optimize")
      }

-      for(var i=0; i<el.attributes.length; i++) {
-        var a = el.attributes[i]
-        var bits = a.name.split("-")
+      // build transform list
+      for(let i=0; i<el.attributes.length; i++) {
+        const a = el.attributes[i]
+        if(a.name.indexOf("data-lax") < 0) continue
+
+        const b = a.name.split(breakpointsSeparator)
+        const bits = b[0].split("-")
+        const breakpoint = b[1] || "default"
        if(bits[1] === "lax") {
          if(a.name === "data-lax-anchor") {
            o["data-lax-anchor"] = a.value === "self" ? el : document.querySelector(a.value)
            const rect = o["data-lax-anchor"].getBoundingClientRect()
-            o["data-lax-anchor-top"] = Math.floor(rect.top) + window.scrollY
+            o.anchorTop = Math.floor(rect.top) + window.scrollY
          } else {
-            o.transforms[a.name] = a.value
-              .replace(new RegExp('vw', 'g'), window.innerWidth)
-              .replace(new RegExp('vh', 'g'), window.innerHeight)
-              .replace(new RegExp('elh', 'g'), el.clientHeight)
-              .replace(new RegExp('elw', 'g'), el.clientWidth)
-              .replace(new RegExp('-vw', 'g'), -window.innerWidth)
-              .replace(new RegExp('-vh', 'g'), -window.innerHeight)
-              .replace(new RegExp('-elh', 'g'), -el.clientHeight)
-              .replace(new RegExp('-elw', 'g'), -el.clientWidth).replace(/\s+/g," ")
-              .split(",").map((x) => { 
-                return x.trim().split(" ").map(y => {
-                  if(y[0] === "(") return eval(y)
-                  else return parseFloat(y)
-                })
+            const tString = a.value
+              .replace(/vw/g, window.innerWidth)
+              .replace(/vh/g, window.innerHeight)
+              .replace(/elh/g, el.clientHeight)
+              .replace(/elw/g, el.clientWidth)
+              .replace(/\s+/g," ")
+
+            const [arrString, optionString] = tString.split("|")
+            const options = {}
+
+            if(optionString) {
+              optionString.split(" ").forEach((o) => {
+                const [key, val] = o.split("=")
+                options[key] = key && fnOrVal(val)
+              }) 
+            }
+
+            const name = b[0]
+            const valueMap = arrString.split(",").map((x) => { 
+                return x.trim().split(" ").map(fnOrVal)
              }).sort((a,b) => {
                return a[0] - b[0]  
              })
+
+            if(!o.transforms[name]) {
+              o.transforms[name] = {}
+            }
+            
+            o.transforms[name][breakpoint] = { valueMap, options } 
          }
        }
      }

+      // sprite sheet animation
+      const spriteData = el.attributes["data-lax-sprite-data"] && el.attributes["data-lax-sprite-data"].value
+      if(spriteData) {
+        o.spriteData = spriteData.split(",").map(x => parseInt(x))
+        el.style.height = o.spriteData[1] + "px"
+        el.style.width = o.spriteData[0] + "px"
+
+        const spriteImage = el.attributes["data-lax-sprite-image"] && el.attributes["data-lax-sprite-image"].value
+        if(spriteImage) {
+          el.style.backgroundImage = `url(${spriteImage})`
+        }
+      }
+
+      return o
+    }
+
+    lax.addElement = (el) => {
+      const o = lax.calcTransforms(lax.createLaxObject(el))
      lax.elements.push(o)
      lax.updateElement(o)
    }

-    lax.populateElements = function() {
+    lax.populateElements = () => {
      lax.elements = []
-
-      var selector = Object.keys(transforms).map(t => `[${t}]`).join(",")
-      selector += ",[data-lax-preset]"
-
-      document.querySelectorAll(selector).forEach(this.addElement)
+      document.querySelectorAll(lax.selector).forEach(lax.addElement)
+      currentBreakpoint = lax.getCurrentBreakPoint()
    }

-    lax.updateElement = function(o) {
-      const y = lastY
-      var r = o["data-lax-anchor-top"] ? o["data-lax-anchor-top"]-y : y
+    lax.updateElements = () => {
+      lax.elements.forEach((o) => {
+        lax.calcTransforms(o)
+        lax.updateElement(o)
+      }) 

-      var style = {
-        transform: "",
-        filter: ""
+      currentBreakpoint = lax.getCurrentBreakPoint()
+    }
+
+
+    lax.getCurrentBreakPoint = () => {
+      let b = 'default'
+      const w = window.innerWidth
+
+      for(let i in lax.breakpoints) {
+        const px = parseFloat(lax.breakpoints[i])
+        if(px <= w) {
+          b = i
+        } else {
+          break
+        }
      }

-      for(var i in o.transforms) {
-        var arr = o.transforms[i]
-        var t = transforms[i]
-        var v = intrp(arr, r)
+      return b
+    }
+
+    lax.updateElement = (o) => {
+      const { originalStyle, anchorTop, transforms, spriteData, el } = o
+
+      let r = anchorTop ? anchorTop-lastY : lastY
+
+      const style = {
+        transform: originalStyle.transform,
+        filter: originalStyle.filter
+      }
+
+      for(let i in transforms) {
+        const transformData = transforms[i][currentBreakpoint] || transforms[i]["default"]
+
+        if(!transformData) {
+          // console.log(`lax error: there is no setting for key ${i} and screen size ${currentBreakpoint}. Try adding a default value!`)
+          continue
+        }
+
+        let _r = r
+        if(transformData.options.offset) _r = _r+transformData.options.offset
+        if(transformData.options.speed) _r = _r*transformData.options.speed
+        if(transformData.options.loop) _r = _r%transformData.options.loop
+
+        const t = transformFns[i]
+        const v = intrp(transformData.valueMap, _r)

        if(!t) {
-          console.error("lax: " + i + " is not supported")
-          return
+          // console.info(`lax: error ${i} is not supported`)
+          continue
        }

        t(style, v)
      }

-      for(let k in style) {
-        if(style.opacity === 0) { // if opacity 0 don't update
-          o.el.style.opacity = 0 
-        } else {
-          o.el.style[k] = style[k]
+      if(spriteData) {
+        const [frameW,frameH,numFrames,cols,scrollStep] = spriteData
+        const frameNo = Math.floor(lastY/scrollStep) % numFrames
+        const framePosX = frameNo%cols
+        const framePosY = Math.floor(frameNo/cols)
+        style.backgroundPosition = `-${framePosX*frameW}px -${framePosY*frameH}px`
+      }
+
+      if(style.opacity === 0) { // if opacity 0 don't update
+        el.style.opacity = 0 
+      } else {
+        for(let k in style) {
+          el.style[k] = style[k]
        }
      }
    }

-    lax.update = function(y) {
+    lax.update = (y) => {
+      if(lastY === y) return
      lastY = y
      lax.elements.forEach(lax.updateElement)
    }
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,22 +2,22 @@
 # yarn lockfile v1


-"@babel/cli@^7.2.3":
-  version "7.2.3"
-  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.2.3.tgz#1b262e42a3e959d28ab3d205ba2718e1923cfee6"
-  integrity sha512-bfna97nmJV6nDJhXNPeEfxyMjWnt6+IjUAaDPiYRTBlm8L41n8nvw6UAqUCbvpFfU246gHPxW7sfWwqtF4FcYA==
+"@babel/cli@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.5.0.tgz#f403c930692e28ecfa3bf02a9e7562b474f38271"
+  integrity sha512-qNH55fWbKrEsCwID+Qc/3JDPnsSGpIIiMDbppnR8Z6PxLAqMQCFNqBctkIkBrMH49Nx+qqVTrHRWUR+ho2k+qQ==
  dependencies:
    commander "^2.8.1"
    convert-source-map "^1.1.0"
    fs-readdir-recursive "^1.1.0"
    glob "^7.0.0"
-    lodash "^4.17.10"
+    lodash "^4.17.11"
    mkdirp "^0.5.1"
    output-file-sync "^2.0.0"
    slash "^2.0.0"
    source-map "^0.5.0"
  optionalDependencies:
-    chokidar "^2.0.3"
+    chokidar "^2.0.4"

 "@babel/code-frame@^7.0.0":
  version "7.0.0"
@@ -26,18 +26,18 @@
  dependencies:
    "@babel/highlight" "^7.0.0"

-"@babel/core@^7.3.4":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.3.4.tgz#921a5a13746c21e32445bf0798680e9d11a6530b"
-  integrity sha512-jRsuseXBo9pN197KnDwhhaaBzyZr2oIcLHHTt2oDdQrej5Qp57dCCJafWx5ivU8/alEYDpssYqv1MUqcxwQlrA==
+"@babel/core@^7.5.0":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.5.4.tgz#4c32df7ad5a58e9ea27ad025c11276324e0b4ddd"
+  integrity sha512-+DaeBEpYq6b2+ZmHx3tHspC+ZRflrvLqwfv8E3hNr5LVQoyBnL8RPKSBCg+rK2W2My9PWlujBiqd0ZPsR9Q6zQ==
  dependencies:
    "@babel/code-frame" "^7.0.0"
-    "@babel/generator" "^7.3.4"
-    "@babel/helpers" "^7.2.0"
-    "@babel/parser" "^7.3.4"
-    "@babel/template" "^7.2.2"
-    "@babel/traverse" "^7.3.4"
-    "@babel/types" "^7.3.4"
+    "@babel/generator" "^7.5.0"
+    "@babel/helpers" "^7.5.4"
+    "@babel/parser" "^7.5.0"
+    "@babel/template" "^7.4.4"
+    "@babel/traverse" "^7.5.0"
+    "@babel/types" "^7.5.0"
    convert-source-map "^1.1.0"
    debug "^4.1.0"
    json5 "^2.1.0"
@@ -57,6 +57,17 @@
    source-map "^0.5.0"
    trim-right "^1.0.1"

+"@babel/generator@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.0.tgz#f20e4b7a91750ee8b63656073d843d2a736dca4a"
+  integrity sha512-1TTVrt7J9rcG5PMjvO7VEG3FrEoEJNHxumRq66GemPmzboLWtIjjcJgk8rokuAS7IiRSpgVSu5Vb9lc99iJkOA==
+  dependencies:
+    "@babel/types" "^7.5.0"
+    jsesc "^2.5.1"
+    lodash "^4.17.11"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@^7.0.0":
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -72,23 +83,23 @@
    "@babel/helper-explode-assignable-expression" "^7.1.0"
    "@babel/types" "^7.0.0"

-"@babel/helper-call-delegate@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.1.0.tgz#6a957f105f37755e8645343d3038a22e1449cc4a"
-  integrity sha512-YEtYZrw3GUK6emQHKthltKNZwszBcHK58Ygcis+gVUrF4/FmTVr5CCqQNSfmvg2y+YDEANyYoaLz/SHsnusCwQ==
+"@babel/helper-call-delegate@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.4.4.tgz#87c1f8ca19ad552a736a7a27b1c1fcf8b1ff1f43"
+  integrity sha512-l79boDFJ8S1c5hvQvG+rc+wHw6IuH7YldmRKsYtpbawsxURu/paVy57FZMomGK22/JckepaikOkY0MoAmdyOlQ==
  dependencies:
-    "@babel/helper-hoist-variables" "^7.0.0"
-    "@babel/traverse" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/helper-hoist-variables" "^7.4.4"
+    "@babel/traverse" "^7.4.4"
+    "@babel/types" "^7.4.4"

-"@babel/helper-define-map@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.1.0.tgz#3b74caec329b3c80c116290887c0dd9ae468c20c"
-  integrity sha512-yPPcW8dc3gZLN+U1mhYV91QU3n5uTbx7DUdf8NnPbjS0RMwBuHi9Xt2MUgppmNz7CJxTBWsGczTiEp1CSOTPRg==
+"@babel/helper-define-map@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.4.4.tgz#6969d1f570b46bdc900d1eba8e5d59c48ba2c12a"
+  integrity sha512-IX3Ln8gLhZpSuqHJSnTNBWGDE9kdkTEWl21A/K7PQ00tseBwbqCHTvNLHSBd9M0R5rER4h5Rsvj9vw0R5SieBg==
  dependencies:
    "@babel/helper-function-name" "^7.1.0"
-    "@babel/types" "^7.0.0"
-    lodash "^4.17.10"
+    "@babel/types" "^7.4.4"
+    lodash "^4.17.11"

 "@babel/helper-explode-assignable-expression@^7.1.0":
  version "7.1.0"
@@ -114,12 +125,12 @@
  dependencies:
    "@babel/types" "^7.0.0"

-"@babel/helper-hoist-variables@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.0.0.tgz#46adc4c5e758645ae7a45deb92bab0918c23bb88"
-  integrity sha512-Ggv5sldXUeSKsuzLkddtyhyHe2YantsxWKNi7A+7LeD12ExRDWTRk29JCXpaHPAbMaIPZSil7n+lq78WY2VY7w==
+"@babel/helper-hoist-variables@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz#0298b5f25c8c09c53102d52ac4a98f773eb2850a"
+  integrity sha512-VYk2/H/BnYbZDDg39hr3t2kKyifAm1W6zHRfhx8jGjIHpQEBv9dry7oQ2f3+J703TLu69nYdxsovl0XYfcnK4w==
  dependencies:
-    "@babel/types" "^7.0.0"
+    "@babel/types" "^7.4.4"

 "@babel/helper-member-expression-to-functions@^7.0.0":
  version "7.0.0"
@@ -147,6 +158,18 @@
    "@babel/types" "^7.2.2"
    lodash "^4.17.10"

+"@babel/helper-module-transforms@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.4.4.tgz#96115ea42a2f139e619e98ed46df6019b94414b8"
+  integrity sha512-3Z1yp8TVQf+B4ynN7WoHPKS8EkdTbgAEy0nU0rs/1Kw4pDgmvYH3rz3aI11KgxKCba2cn7N+tqzV1mY2HMN96w==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-simple-access" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+    "@babel/template" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    lodash "^4.17.11"
+
 "@babel/helper-optimise-call-expression@^7.0.0":
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.0.0.tgz#a2920c5702b073c15de51106200aa8cad20497d5"
@@ -166,6 +189,13 @@
  dependencies:
    lodash "^4.17.10"

+"@babel/helper-regex@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.4.4.tgz#a47e02bc91fb259d2e6727c2a30013e3ac13c4a2"
+  integrity sha512-Y5nuB/kESmR3tKjU8Nkn1wMGEx1tjJX076HBMeL3XLQCu6vA/YRzuTW0bbb+qRnXvQGn+d6Rx953yffl8vEy7Q==
+  dependencies:
+    lodash "^4.17.11"
+
 "@babel/helper-remap-async-to-generator@^7.1.0":
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.1.0.tgz#361d80821b6f38da75bd3f0785ece20a88c5fe7f"
@@ -177,7 +207,7 @@
    "@babel/traverse" "^7.1.0"
    "@babel/types" "^7.0.0"

-"@babel/helper-replace-supers@^7.1.0", "@babel/helper-replace-supers@^7.3.4":
+"@babel/helper-replace-supers@^7.1.0":
  version "7.3.4"
  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.3.4.tgz#a795208e9b911a6eeb08e5891faacf06e7013e13"
  integrity sha512-pvObL9WVf2ADs+ePg0jrqlhHoxRXlOa+SHRHzAXIz2xkYuOHfGl+fKxPMaS4Fq+uje8JQPobnertBBvyrWnQ1A==
@@ -187,6 +217,16 @@
    "@babel/traverse" "^7.3.4"
    "@babel/types" "^7.3.4"

+"@babel/helper-replace-supers@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.4.4.tgz#aee41783ebe4f2d3ab3ae775e1cc6f1a90cefa27"
+  integrity sha512-04xGEnd+s01nY1l15EuMS1rfKktNF+1CkKmHoErDppjAAZL+IUBZpzT748x262HF7fibaQPhbvWUl5HeSt1EXg==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.0.0"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/traverse" "^7.4.4"
+    "@babel/types" "^7.4.4"
+
 "@babel/helper-simple-access@^7.1.0":
  version "7.1.0"
  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c"
@@ -202,6 +242,13 @@
  dependencies:
    "@babel/types" "^7.0.0"

+"@babel/helper-split-export-declaration@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677"
+  integrity sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==
+  dependencies:
+    "@babel/types" "^7.4.4"
+
 "@babel/helper-wrap-function@^7.1.0":
  version "7.2.0"
  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa"
@@ -212,14 +259,14 @@
    "@babel/traverse" "^7.1.0"
    "@babel/types" "^7.2.0"

-"@babel/helpers@^7.2.0":
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.3.1.tgz#949eec9ea4b45d3210feb7dc1c22db664c9e44b9"
-  integrity sha512-Q82R3jKsVpUV99mgX50gOPCWwco9Ec5Iln/8Vyu4osNIOQgSrd9RFrQeUvmvddFNoLwMyOUWU+5ckioEKpDoGA==
+"@babel/helpers@^7.5.4":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.5.4.tgz#2f00608aa10d460bde0ccf665d6dcf8477357cf0"
+  integrity sha512-6LJ6xwUEJP51w0sIgKyfvFMJvIb9mWAfohJp0+m6eHJigkFdcH8duZ1sfhn0ltJRzwUIT/yqqhdSfRpCpL7oow==
  dependencies:
-    "@babel/template" "^7.1.2"
-    "@babel/traverse" "^7.1.5"
-    "@babel/types" "^7.3.0"
+    "@babel/template" "^7.4.4"
+    "@babel/traverse" "^7.5.0"
+    "@babel/types" "^7.5.0"

 "@babel/highlight@^7.0.0":
  version "7.0.0"
@@ -235,6 +282,11 @@
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.3.4.tgz#a43357e4bbf4b92a437fb9e465c192848287f27c"
  integrity sha512-tXZCqWtlOOP4wgCp6RjRvLmfuhnqTLy9VHwRochJBCP2nDm27JnnuFEnXFASVyQNHk36jD1tAammsCEEqgscIQ==

+"@babel/parser@^7.4.4", "@babel/parser@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.0.tgz#3e0713dff89ad6ae37faec3b29dcfc5c979770b7"
+  integrity sha512-I5nW8AhGpOXGCCNYGc+p7ExQIBxRFnS2fd/d862bNOKvmoEPjYPcfIjsfdy0ujagYOIYPczKgD9l3FsgTkAzKA==
+
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
  version "7.2.0"
  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
@@ -244,6 +296,14 @@
    "@babel/helper-remap-async-to-generator" "^7.1.0"
    "@babel/plugin-syntax-async-generators" "^7.2.0"

+"@babel/plugin-proposal-dynamic-import@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.5.0.tgz#e532202db4838723691b10a67b8ce509e397c506"
+  integrity sha512-x/iMjggsKTFHYC6g11PL7Qy58IK8H5zqfm9e6hu4z1iH2IRyAp9u9dL80zA6R76yFovETFLKz2VJIC2iIPBuFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+
 "@babel/plugin-proposal-json-strings@^7.2.0":
  version "7.2.0"
  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
@@ -252,10 +312,10 @@
    "@babel/helper-plugin-utils" "^7.0.0"
    "@babel/plugin-syntax-json-strings" "^7.2.0"

-"@babel/plugin-proposal-object-rest-spread@^7.3.4":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.3.4.tgz#47f73cf7f2a721aad5c0261205405c642e424654"
-  integrity sha512-j7VQmbbkA+qrzNqbKHrBsW3ddFnOeva6wzSe/zB7T+xaxGc+RCpwo44wCmRixAIGRoIpmVgvzFzNJqQcO3/9RA==
+"@babel/plugin-proposal-object-rest-spread@^7.5.4":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.4.tgz#250de35d867ce8260a31b1fdac6c4fc1baa99331"
+  integrity sha512-KCx0z3y7y8ipZUMAEEJOyNi11lMb/FOPUjjB113tfowgw0c16EGYos7worCKBcUAh2oG+OBnoUhsnTSoLpV9uA==
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"
    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
@@ -268,14 +328,14 @@
    "@babel/helper-plugin-utils" "^7.0.0"
    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"

-"@babel/plugin-proposal-unicode-property-regex@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.2.0.tgz#abe7281fe46c95ddc143a65e5358647792039520"
-  integrity sha512-LvRVYb7kikuOtIoUeWTkOxQEV1kYvL5B6U3iWEGCzPNRus1MzJweFqORTj+0jkxozkTSYNJozPOddxmqdqsRpw==
+"@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.4.4.tgz#501ffd9826c0b91da22690720722ac7cb1ca9c78"
+  integrity sha512-j1NwnOqMG9mFUOH58JTFsA/+ZYzQLUZ/drqWUqxCYLGeu2JFZL8YrNC9hBxKmWtAuOCHPcRpgv7fhap09Fb4kA==
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-regex" "^7.0.0"
-    regexpu-core "^4.2.0"
+    "@babel/helper-regex" "^7.4.4"
+    regexpu-core "^4.5.4"

 "@babel/plugin-syntax-async-generators@^7.2.0":
  version "7.2.0"
@@ -284,6 +344,13 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

+"@babel/plugin-syntax-dynamic-import@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
+  integrity sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-json-strings@^7.2.0":
  version "7.2.0"
  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470"
@@ -312,10 +379,10 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

-"@babel/plugin-transform-async-to-generator@^7.3.4":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.3.4.tgz#4e45408d3c3da231c0e7b823f407a53a7eb3048c"
-  integrity sha512-Y7nCzv2fw/jEZ9f678MuKdMo99MFDJMT/PvD9LisrR5JDFcJH6vYeH6RnjVt3p5tceyGRvTtEN0VOlU+rgHZjA==
+"@babel/plugin-transform-async-to-generator@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.5.0.tgz#89a3848a0166623b5bc481164b5936ab947e887e"
+  integrity sha512-mqvkzwIGkq0bEF1zLRRiTdjfomZJDV33AH3oQzHVGkI2VzEmXLpKKOBvEVaFZBJdN0XTyH38s9j/Kiqr68dggg==
  dependencies:
    "@babel/helper-module-imports" "^7.0.0"
    "@babel/helper-plugin-utils" "^7.0.0"
@@ -328,26 +395,26 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

-"@babel/plugin-transform-block-scoping@^7.3.4":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.3.4.tgz#5c22c339de234076eee96c8783b2fed61202c5c4"
-  integrity sha512-blRr2O8IOZLAOJklXLV4WhcEzpYafYQKSGT3+R26lWG41u/FODJuBggehtOwilVAcFu393v3OFj+HmaE6tVjhA==
+"@babel/plugin-transform-block-scoping@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.4.4.tgz#c13279fabf6b916661531841a23c4b7dae29646d"
+  integrity sha512-jkTUyWZcTrwxu5DD4rWz6rDB5Cjdmgz6z7M7RLXOJyCUkFBawssDGcGh8M/0FTSB87avyJI1HsTwUXp9nKA1PA==
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"
    lodash "^4.17.11"

-"@babel/plugin-transform-classes@^7.3.4":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.3.4.tgz#dc173cb999c6c5297e0b5f2277fdaaec3739d0cc"
-  integrity sha512-J9fAvCFBkXEvBimgYxCjvaVDzL6thk0j0dBvCeZmIUDBwyt+nv6HfbImsSrWsYXfDNDivyANgJlFXDUWRTZBuA==
+"@babel/plugin-transform-classes@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.4.4.tgz#0ce4094cdafd709721076d3b9c38ad31ca715eb6"
+  integrity sha512-/e44eFLImEGIpL9qPxSRat13I5QNRgBLu2hOQJCF7VLy/otSM/sypV1+XaIw5+502RX/+6YaSAPmldk+nhHDPw==
  dependencies:
    "@babel/helper-annotate-as-pure" "^7.0.0"
-    "@babel/helper-define-map" "^7.1.0"
+    "@babel/helper-define-map" "^7.4.4"
    "@babel/helper-function-name" "^7.1.0"
    "@babel/helper-optimise-call-expression" "^7.0.0"
    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.3.4"
-    "@babel/helper-split-export-declaration" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.4.4"
+    "@babel/helper-split-export-declaration" "^7.4.4"
    globals "^11.1.0"

 "@babel/plugin-transform-computed-properties@^7.2.0":
@@ -357,26 +424,26 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

-"@babel/plugin-transform-destructuring@^7.2.0":
-  version "7.3.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.3.2.tgz#f2f5520be055ba1c38c41c0e094d8a461dd78f2d"
-  integrity sha512-Lrj/u53Ufqxl/sGxyjsJ2XNtNuEjDyjpqdhMNh5aZ+XFOdThL46KBj27Uem4ggoezSYBxKWAil6Hu8HtwqesYw==
+"@babel/plugin-transform-destructuring@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.5.0.tgz#f6c09fdfe3f94516ff074fe877db7bc9ef05855a"
+  integrity sha512-YbYgbd3TryYYLGyC7ZR+Tq8H/+bCmwoaxHfJHupom5ECstzbRLTch6gOQbhEY9Z4hiCNHEURgq06ykFv9JZ/QQ==
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

-"@babel/plugin-transform-dotall-regex@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.2.0.tgz#f0aabb93d120a8ac61e925ea0ba440812dbe0e49"
-  integrity sha512-sKxnyHfizweTgKZf7XsXu/CNupKhzijptfTM+bozonIuyVrLWVUvYjE2bhuSBML8VQeMxq4Mm63Q9qvcvUcciQ==
+"@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.4.4.tgz#361a148bc951444312c69446d76ed1ea8e4450c3"
+  integrity sha512-P05YEhRc2h53lZDjRPk/OektxCVevFzZs2Gfjd545Wde3k+yFDbXORgl2e0xpbq8mLcKJ7Idss4fAg0zORN/zg==
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-regex" "^7.0.0"
-    regexpu-core "^4.1.3"
+    "@babel/helper-regex" "^7.4.4"
+    regexpu-core "^4.5.4"

-"@babel/plugin-transform-duplicate-keys@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.2.0.tgz#d952c4930f312a4dbfff18f0b2914e60c35530b3"
-  integrity sha512-q+yuxW4DsTjNceUiTzK0L+AfQ0zD9rWaTLiUqHA8p0gxx7lu1EylenfzjeIWNkPy6e/0VG/Wjw9uf9LueQwLOw==
+"@babel/plugin-transform-duplicate-keys@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.5.0.tgz#c5dbf5106bf84cdf691222c0974c12b1df931853"
+  integrity sha512-igcziksHizyQPlX9gfSjHkE2wmoCH3evvD2qR5w29/Dk0SMKE/eOI7f1HhBdNhR/zxJDqrgpoDTq5YSLH/XMsQ==
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

@@ -388,17 +455,17 @@
    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.1.0"
    "@babel/helper-plugin-utils" "^7.0.0"

-"@babel/plugin-transform-for-of@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.2.0.tgz#ab7468befa80f764bb03d3cb5eef8cc998e1cad9"
-  integrity sha512-Kz7Mt0SsV2tQk6jG5bBv5phVbkd0gd27SgYD4hH1aLMJRchM0dzHaXvrWhVZ+WxAlDoAKZ7Uy3jVTW2mKXQ1WQ==
+"@babel/plugin-transform-for-of@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.4.4.tgz#0267fc735e24c808ba173866c6c4d1440fc3c556"
+  integrity sha512-9T/5Dlr14Z9TIEXLXkt8T1DU7F24cbhwhMNUziN3hB1AXoZcdzPcTiKGRn/6iOymDqtTKWnr/BtRKN9JwbKtdQ==
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

-"@babel/plugin-transform-function-name@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.2.0.tgz#f7930362829ff99a3174c39f0afcc024ef59731a"
-  integrity sha512-kWgksow9lHdvBC2Z4mxTsvc7YdY7w/V6B2vy9cTIPtLEE9NhwoWivaxdNM/S37elu5bqlLP/qOY906LukO9lkQ==
+"@babel/plugin-transform-function-name@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.4.4.tgz#e1436116abb0610c2259094848754ac5230922ad"
+  integrity sha512-iU9pv7U+2jC9ANQkKeNF6DrPy4GBa4NWQtl6dHB4Pb3izX2JOEvDTFarlNsBj/63ZEzNNIAMs3Qw4fNCcSOXJA==
  dependencies:
    "@babel/helper-function-name" "^7.1.0"
    "@babel/helper-plugin-utils" "^7.0.0"
@@ -410,30 +477,40 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

-"@babel/plugin-transform-modules-amd@^7.2.0":
+"@babel/plugin-transform-member-expression-literals@^7.2.0":
  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.2.0.tgz#82a9bce45b95441f617a24011dc89d12da7f4ee6"
-  integrity sha512-mK2A8ucqz1qhrdqjS9VMIDfIvvT2thrEsIQzbaTdc5QFzhDjQv2CkJJ5f6BXIkgbmaoax3zBr2RyvV/8zeoUZw==
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.2.0.tgz#fa10aa5c58a2cb6afcf2c9ffa8cb4d8b3d489a2d"
+  integrity sha512-HiU3zKkSU6scTidmnFJ0bMX8hz5ixC93b4MHMiYebmk2lUVNGOboPsqQvx5LzooihijUoLR/v7Nc1rbBtnc7FA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-modules-amd@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.5.0.tgz#ef00435d46da0a5961aa728a1d2ecff063e4fb91"
+  integrity sha512-n20UsQMKnWrltocZZm24cRURxQnWIvsABPJlw/fvoy9c6AgHZzoelAIzajDHAQrDpuKFFPPcFGd7ChsYuIUMpg==
  dependencies:
    "@babel/helper-module-transforms" "^7.1.0"
    "@babel/helper-plugin-utils" "^7.0.0"
+    babel-plugin-dynamic-import-node "^2.3.0"

-"@babel/plugin-transform-modules-commonjs@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.2.0.tgz#c4f1933f5991d5145e9cfad1dfd848ea1727f404"
-  integrity sha512-V6y0uaUQrQPXUrmj+hgnks8va2L0zcZymeU7TtWEgdRLNkceafKXEduv7QzgQAE4lT+suwooG9dC7LFhdRAbVQ==
+"@babel/plugin-transform-modules-commonjs@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.5.0.tgz#425127e6045231360858eeaa47a71d75eded7a74"
+  integrity sha512-xmHq0B+ytyrWJvQTc5OWAC4ii6Dhr0s22STOoydokG51JjWhyYo5mRPXoi+ZmtHQhZZwuXNN+GG5jy5UZZJxIQ==
  dependencies:
-    "@babel/helper-module-transforms" "^7.1.0"
+    "@babel/helper-module-transforms" "^7.4.4"
    "@babel/helper-plugin-utils" "^7.0.0"
    "@babel/helper-simple-access" "^7.1.0"
+    babel-plugin-dynamic-import-node "^2.3.0"

-"@babel/plugin-transform-modules-systemjs@^7.3.4":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.3.4.tgz#813b34cd9acb6ba70a84939f3680be0eb2e58861"
-  integrity sha512-VZ4+jlGOF36S7TjKs8g4ojp4MEI+ebCQZdswWb/T9I4X84j8OtFAyjXjt/M16iIm5RIZn0UMQgg/VgIwo/87vw==
+"@babel/plugin-transform-modules-systemjs@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.5.0.tgz#e75266a13ef94202db2a0620977756f51d52d249"
+  integrity sha512-Q2m56tyoQWmuNGxEtUyeEkm6qJYFqs4c+XyXH5RAuYxObRNz9Zgj/1g2GMnjYp2EUyEy7YTrxliGCXzecl/vJg==
  dependencies:
-    "@babel/helper-hoist-variables" "^7.0.0"
+    "@babel/helper-hoist-variables" "^7.4.4"
    "@babel/helper-plugin-utils" "^7.0.0"
+    babel-plugin-dynamic-import-node "^2.3.0"

 "@babel/plugin-transform-modules-umd@^7.2.0":
  version "7.2.0"
@@ -443,17 +520,17 @@
    "@babel/helper-module-transforms" "^7.1.0"
    "@babel/helper-plugin-utils" "^7.0.0"

-"@babel/plugin-transform-named-capturing-groups-regex@^7.3.0":
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.3.0.tgz#140b52985b2d6ef0cb092ef3b29502b990f9cd50"
-  integrity sha512-NxIoNVhk9ZxS+9lSoAQ/LM0V2UEvARLttEHUrRDGKFaAxOYQcrkN/nLRE+BbbicCAvZPl7wMP0X60HsHE5DtQw==
+"@babel/plugin-transform-named-capturing-groups-regex@^7.4.5":
+  version "7.4.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.4.5.tgz#9d269fd28a370258199b4294736813a60bbdd106"
+  integrity sha512-z7+2IsWafTBbjNsOxU/Iv5CvTJlr5w4+HGu1HovKYTtgJ362f7kBcQglkfmlspKKZ3bgrbSGvLfNx++ZJgCWsg==
  dependencies:
-    regexp-tree "^0.1.0"
+    regexp-tree "^0.1.6"

-"@babel/plugin-transform-new-target@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.0.0.tgz#ae8fbd89517fa7892d20e6564e641e8770c3aa4a"
-  integrity sha512-yin069FYjah+LbqfGeTfzIBODex/e++Yfa0rH0fpfam9uTbuEeEOx5GLGr210ggOV77mVRNoeqSYqeuaqSzVSw==
+"@babel/plugin-transform-new-target@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.4.4.tgz#18d120438b0cc9ee95a47f2c72bc9768fbed60a5"
+  integrity sha512-r1z3T2DNGQwwe2vPGZMBNjioT2scgWzK9BCnDEh+46z8EEwXBq24uRzd65I7pjtugzPSj921aM15RpESgzsSuA==
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

@@ -465,21 +542,35 @@
    "@babel/helper-plugin-utils" "^7.0.0"
    "@babel/helper-replace-supers" "^7.1.0"

-"@babel/plugin-transform-parameters@^7.2.0":
-  version "7.3.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.3.3.tgz#3a873e07114e1a5bee17d04815662c8317f10e30"
-  integrity sha512-IrIP25VvXWu/VlBWTpsjGptpomtIkYrN/3aDp4UKm7xK6UxZY88kcJ1UwETbzHAlwN21MnNfwlar0u8y3KpiXw==
+"@babel/plugin-transform-parameters@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.4.4.tgz#7556cf03f318bd2719fe4c922d2d808be5571e16"
+  integrity sha512-oMh5DUO1V63nZcu/ZVLQFqiihBGo4OpxJxR1otF50GMeCLiRx5nUdtokd+u9SuVJrvvuIh9OosRFPP4pIPnwmw==
  dependencies:
-    "@babel/helper-call-delegate" "^7.1.0"
+    "@babel/helper-call-delegate" "^7.4.4"
    "@babel/helper-get-function-arity" "^7.0.0"
    "@babel/helper-plugin-utils" "^7.0.0"

-"@babel/plugin-transform-regenerator@^7.3.4":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.3.4.tgz#1601655c362f5b38eead6a52631f5106b29fa46a"
-  integrity sha512-hvJg8EReQvXT6G9H2MvNPXkv9zK36Vxa1+csAVTpE1J3j0zlHplw76uudEbJxgvqZzAq9Yh45FLD4pk5mKRFQA==
+"@babel/plugin-transform-property-literals@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.2.0.tgz#03e33f653f5b25c4eb572c98b9485055b389e905"
+  integrity sha512-9q7Dbk4RhgcLp8ebduOpCbtjh7C0itoLYHXd9ueASKAG/is5PQtMR5VJGka9NKqGhYEGn5ITahd4h9QeBMylWQ==
  dependencies:
-    regenerator-transform "^0.13.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-transform-regenerator@^7.4.5":
+  version "7.4.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.4.5.tgz#629dc82512c55cee01341fb27bdfcb210354680f"
+  integrity sha512-gBKRh5qAaCWntnd09S8QC7r3auLCqq5DI6O0DlfoyDjslSBVqBibrMdsqO+Uhmx3+BlOmE/Kw1HFxmGbv0N9dA==
+  dependencies:
+    regenerator-transform "^0.14.0"
+
+"@babel/plugin-transform-reserved-words@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.2.0.tgz#4792af87c998a49367597d07fedf02636d2e1634"
+  integrity sha512-fz43fqW8E1tAB3DKF19/vxbpib1fuyCwSPE418ge5ZxILnBhWyhtPgz8eh1RCGGJlwvksHkyxMxh0eenFi+kFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"

 "@babel/plugin-transform-shorthand-properties@^7.2.0":
  version "7.2.0"
@@ -503,10 +594,10 @@
    "@babel/helper-plugin-utils" "^7.0.0"
    "@babel/helper-regex" "^7.0.0"

-"@babel/plugin-transform-template-literals@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.2.0.tgz#d87ed01b8eaac7a92473f608c97c089de2ba1e5b"
-  integrity sha512-FkPix00J9A/XWXv4VoKJBMeSkyY9x/TqIh76wzcdfl57RJJcf8CehQ08uwfhCDNtRQYtHQKBTwKZDEyjE13Lwg==
+"@babel/plugin-transform-template-literals@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.4.4.tgz#9d28fea7bbce637fb7612a0750989d8321d4bcb0"
+  integrity sha512-mQrEC4TWkhLN0z8ygIvEL9ZEToPhG5K7KDW3pzGqOfIGZ28Jb0POUkeWcoz8HnHvhFy6dwAT1j8OzqN8s804+g==
  dependencies:
    "@babel/helper-annotate-as-pure" "^7.0.0"
    "@babel/helper-plugin-utils" "^7.0.0"
@@ -518,65 +609,72 @@
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"

-"@babel/plugin-transform-unicode-regex@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.2.0.tgz#4eb8db16f972f8abb5062c161b8b115546ade08b"
-  integrity sha512-m48Y0lMhrbXEJnVUaYly29jRXbQ3ksxPrS1Tg8t+MHqzXhtBYAvI51euOBaoAlZLPHsieY9XPVMf80a5x0cPcA==
+"@babel/plugin-transform-unicode-regex@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.4.4.tgz#ab4634bb4f14d36728bf5978322b35587787970f"
+  integrity sha512-il+/XdNw01i93+M9J9u4T7/e/Ue/vWfNZE4IRUQjplu2Mqb/AFTDimkw2tdEdSH50wuQXZAbXSql0UphQke+vA==
  dependencies:
    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-regex" "^7.0.0"
-    regexpu-core "^4.1.3"
+    "@babel/helper-regex" "^7.4.4"
+    regexpu-core "^4.5.4"

-"@babel/preset-env@^7.3.4":
-  version "7.3.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.4.tgz#887cf38b6d23c82f19b5135298bdb160062e33e1"
-  integrity sha512-2mwqfYMK8weA0g0uBKOt4FE3iEodiHy9/CW0b+nWXcbL+pGzLx8ESYc+j9IIxr6LTDHWKgPm71i9smo02bw+gA==
+"@babel/preset-env@^7.5.0":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.5.4.tgz#64bc15041a3cbb0798930319917e70fcca57713d"
+  integrity sha512-hFnFnouyRNiH1rL8YkX1ANCNAUVC8Djwdqfev8i1415tnAG+7hlA5zhZ0Q/3Q5gkop4HioIPbCEWAalqcbxRoQ==
  dependencies:
    "@babel/helper-module-imports" "^7.0.0"
    "@babel/helper-plugin-utils" "^7.0.0"
    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
+    "@babel/plugin-proposal-dynamic-import" "^7.5.0"
    "@babel/plugin-proposal-json-strings" "^7.2.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.3.4"
+    "@babel/plugin-proposal-object-rest-spread" "^7.5.4"
    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.2.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
    "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
    "@babel/plugin-syntax-json-strings" "^7.2.0"
    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
    "@babel/plugin-transform-arrow-functions" "^7.2.0"
-    "@babel/plugin-transform-async-to-generator" "^7.3.4"
+    "@babel/plugin-transform-async-to-generator" "^7.5.0"
    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
-    "@babel/plugin-transform-block-scoping" "^7.3.4"
-    "@babel/plugin-transform-classes" "^7.3.4"
+    "@babel/plugin-transform-block-scoping" "^7.4.4"
+    "@babel/plugin-transform-classes" "^7.4.4"
    "@babel/plugin-transform-computed-properties" "^7.2.0"
-    "@babel/plugin-transform-destructuring" "^7.2.0"
-    "@babel/plugin-transform-dotall-regex" "^7.2.0"
-    "@babel/plugin-transform-duplicate-keys" "^7.2.0"
+    "@babel/plugin-transform-destructuring" "^7.5.0"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
-    "@babel/plugin-transform-for-of" "^7.2.0"
-    "@babel/plugin-transform-function-name" "^7.2.0"
+    "@babel/plugin-transform-for-of" "^7.4.4"
+    "@babel/plugin-transform-function-name" "^7.4.4"
    "@babel/plugin-transform-literals" "^7.2.0"
-    "@babel/plugin-transform-modules-amd" "^7.2.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.2.0"
-    "@babel/plugin-transform-modules-systemjs" "^7.3.4"
+    "@babel/plugin-transform-member-expression-literals" "^7.2.0"
+    "@babel/plugin-transform-modules-amd" "^7.5.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.5.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.5.0"
    "@babel/plugin-transform-modules-umd" "^7.2.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.3.0"
-    "@babel/plugin-transform-new-target" "^7.0.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.4.5"
+    "@babel/plugin-transform-new-target" "^7.4.4"
    "@babel/plugin-transform-object-super" "^7.2.0"
-    "@babel/plugin-transform-parameters" "^7.2.0"
-    "@babel/plugin-transform-regenerator" "^7.3.4"
+    "@babel/plugin-transform-parameters" "^7.4.4"
+    "@babel/plugin-transform-property-literals" "^7.2.0"
+    "@babel/plugin-transform-regenerator" "^7.4.5"
+    "@babel/plugin-transform-reserved-words" "^7.2.0"
    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
    "@babel/plugin-transform-spread" "^7.2.0"
    "@babel/plugin-transform-sticky-regex" "^7.2.0"
-    "@babel/plugin-transform-template-literals" "^7.2.0"
+    "@babel/plugin-transform-template-literals" "^7.4.4"
    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
-    "@babel/plugin-transform-unicode-regex" "^7.2.0"
-    browserslist "^4.3.4"
+    "@babel/plugin-transform-unicode-regex" "^7.4.4"
+    "@babel/types" "^7.5.0"
+    browserslist "^4.6.0"
+    core-js-compat "^3.1.1"
    invariant "^2.2.2"
    js-levenshtein "^1.1.3"
-    semver "^5.3.0"
+    semver "^5.5.0"

-"@babel/template@^7.1.0", "@babel/template@^7.1.2", "@babel/template@^7.2.2":
+"@babel/template@^7.1.0", "@babel/template@^7.2.2":
  version "7.2.2"
  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
  integrity sha512-zRL0IMM02AUDwghf5LMSSDEz7sBCO2YnNmpg3uWTZj/v1rcG2BmQUvaGU8GhU8BvfMh1k2KIAYZ7Ji9KXPUg7g==
@@ -585,7 +683,16 @@
    "@babel/parser" "^7.2.2"
    "@babel/types" "^7.2.2"

-"@babel/traverse@^7.1.0", "@babel/traverse@^7.1.5", "@babel/traverse@^7.3.4":
+"@babel/template@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
+  integrity sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.4.4"
+    "@babel/types" "^7.4.4"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.3.4":
  version "7.3.4"
  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.3.4.tgz#1330aab72234f8dea091b08c4f8b9d05c7119e06"
  integrity sha512-TvTHKp6471OYEcE/91uWmhR6PrrYywQntCHSaZ8CM8Vmp+pjAusal4nGB2WCCQd0rvI7nOMKn9GnbcvTUz3/ZQ==
@@ -600,7 +707,22 @@
    globals "^11.1.0"
    lodash "^4.17.11"

-"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.2.2", "@babel/types@^7.3.0", "@babel/types@^7.3.4":
+"@babel/traverse@^7.4.4", "@babel/traverse@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.0.tgz#4216d6586854ef5c3c4592dab56ec7eb78485485"
+  integrity sha512-SnA9aLbyOCcnnbQEGwdfBggnc142h/rbqqsXcaATj2hZcegCl903pUD/lfpsNBlBSuWow/YDfRyJuWi2EPR5cg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.5.0"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+    "@babel/parser" "^7.5.0"
+    "@babel/types" "^7.5.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.11"
+
+"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.2.2", "@babel/types@^7.3.4":
  version "7.3.4"
  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.3.4.tgz#bf482eaeaffb367a28abbf9357a94963235d90ed"
  integrity sha512-WEkp8MsLftM7O/ty580wAmZzN1nDmCACc5+jFzUt+GUFNNIi3LdRlueYz0YIlmJhlZx1QYDMZL5vdWCL0fNjFQ==
@@ -609,6 +731,15 @@
    lodash "^4.17.11"
    to-fast-properties "^2.0.0"

+"@babel/types@^7.4.4", "@babel/types@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.0.tgz#e47d43840c2e7f9105bc4d3a2c371b4d0c7832ab"
+  integrity sha512-UFpDVqRABKsW01bvw7/wSUe56uy6RXM5+VJibVVAybDGxEW25jdwiFJEf7ASvSaC7sN7rbE/l3cLp2izav+CtQ==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.11"
+    to-fast-properties "^2.0.0"
+
 abbrev@1:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -687,6 +818,13 @@ atob@^2.1.1:
  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==

+babel-plugin-dynamic-import-node@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
+  integrity sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==
+  dependencies:
+    object.assign "^4.1.0"
+
 balanced-match@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -734,14 +872,14 @@ braces@^2.3.1, braces@^2.3.2:
    split-string "^3.0.2"
    to-regex "^3.0.1"

-browserslist@^4.3.4:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.4.2.tgz#6ea8a74d6464bb0bd549105f659b41197d8f0ba2"
-  integrity sha512-ISS/AIAiHERJ3d45Fz0AVYKkgcy+F/eJHzKEvv1j0wwKGKD9T3BrwKr/5g45L+Y4XIK5PlTqefHciRFcfE1Jxg==
+browserslist@^4.6.0, browserslist@^4.6.2:
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.6.4.tgz#fd0638b3f8867fec2c604ed0ed9300379f8ec7c2"
+  integrity sha512-ErJT8qGfRt/VWHSr1HeqZzz50DvxHtr1fVL1m5wf20aGrG8e1ce8fpZ2EjZEfs09DDZYSvtRaDlMpWslBf8Low==
  dependencies:
-    caniuse-lite "^1.0.30000939"
-    electron-to-chromium "^1.3.113"
-    node-releases "^1.1.8"
+    caniuse-lite "^1.0.30000981"
+    electron-to-chromium "^1.3.188"
+    node-releases "^1.1.25"

 cache-base@^1.0.1:
  version "1.0.1"
@@ -758,10 +896,10 @@ cache-base@^1.0.1:
    union-value "^1.0.0"
    unset-value "^1.0.0"

-caniuse-lite@^1.0.30000939:
-  version "1.0.30000946"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000946.tgz#ac50a3331bb805b483478bbc26a0ab71bb6d0509"
-  integrity sha512-ZVXtMoZ3Mfq69Ikv587Av+5lwGVJsG98QKUucVmtFBf0tl1kOCfLQ5o6Z2zBNis4Mx3iuH77WxEUpdP6t7f2CQ==
+caniuse-lite@^1.0.30000981:
+  version "1.0.30000984"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000984.tgz#dc96c3c469e9bcfc6ad5bdd24c77ec918ea76fe0"
+  integrity sha512-n5tKOjMaZ1fksIpQbjERuqCyfgec/m9pferkFQbLmWtqLUdmt12hNhjSwsmPdqeiG2NkITOQhr1VYIwWSAceiA==

 chalk@^2.0.0:
  version "2.4.2"
@@ -772,10 +910,10 @@ chalk@^2.0.0:
    escape-string-regexp "^1.0.5"
    supports-color "^5.3.0"

-chokidar@^2.0.3:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.2.tgz#9c23ea40b01638439e0513864d362aeacc5ad058"
-  integrity sha512-IwXUx0FXc5ibYmPC2XeEj5mpXoV66sR+t3jqu2NS2GYwCktt3KF1/Qqjws/NkegajBA4RbZ5+DDwlOiJsxDHEg==
+chokidar@^2.0.4:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.6.tgz#b6cad653a929e244ce8a834244164d241fa954c5"
+  integrity sha512-V2jUo67OKkc6ySiRpJrjlpJKl9kDuG+Xb8VgsGzb+aEouhgS1D0weyPU4lEzdAcsCAvrih2J2BqyXqHWvVLw5g==
  dependencies:
    anymatch "^2.0.0"
    async-each "^1.0.1"
@@ -787,7 +925,7 @@ chokidar@^2.0.3:
    normalize-path "^3.0.0"
    path-is-absolute "^1.0.0"
    readdirp "^2.2.1"
-    upath "^1.1.0"
+    upath "^1.1.1"
  optionalDependencies:
    fsevents "^1.2.7"

@@ -863,6 +1001,20 @@ copy-descriptor@^0.1.0:
  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=

+core-js-compat@^3.1.1:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.1.4.tgz#e4d0c40fbd01e65b1d457980fe4112d4358a7408"
+  integrity sha512-Z5zbO9f1d0YrJdoaQhphVAnKPimX92D6z8lCGphH89MNRxlL1prI9ExJPqVwP0/kgkQCv8c4GJGT8X16yUncOg==
+  dependencies:
+    browserslist "^4.6.2"
+    core-js-pure "3.1.4"
+    semver "^6.1.1"
+
+core-js-pure@3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.1.4.tgz#5fa17dc77002a169a3566cc48dc774d2e13e3769"
+  integrity sha512-uJ4Z7iPNwiu1foygbcZYJsJs1jiXrTTCvxfLDXNhI/I+NHbSIEyr548y4fcsCEyWY0XgfAG/qqaunJ1SThHenA==
+
 core-util-is@~1.0.0:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -892,6 +1044,13 @@ deep-extend@^0.6.0:
  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
  integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==

+define-properties@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
+  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  dependencies:
+    object-keys "^1.0.12"
+
 define-property@^0.2.5:
  version "0.2.5"
  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
@@ -924,10 +1083,10 @@ detect-libc@^1.0.2:
  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
  integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=

-electron-to-chromium@^1.3.113:
-  version "1.3.115"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.115.tgz#fdaa56c19b9f7386dbf29abc1cc632ff5468ff3b"
-  integrity sha512-mN2qeapQWdi2B9uddxTZ4nl80y46hbyKY5Wt9Yjih+QZFQLdaujEDK4qJky35WhyxMzHF3ZY41Lgjd2BPDuBhg==
+electron-to-chromium@^1.3.188:
+  version "1.3.191"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.191.tgz#c451b422cd8b2eab84dedabab5abcae1eaefb6f0"
+  integrity sha512-jasjtY5RUy/TOyiUYM2fb4BDaPZfm6CXRFeJDMfFsXYADGxUN49RBqtgB7EL2RmJXeIRUk9lM1U6A5yk2YJMPQ==

 escape-string-regexp@^1.0.5:
  version "1.0.5"
@@ -1028,6 +1187,11 @@ fsevents@^1.2.7:
    nan "^2.9.2"
    node-pre-gyp "^0.10.0"

+function-bind@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+
 gauge@~2.7.3:
  version "2.7.4"
  resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -1082,6 +1246,11 @@ has-flag@^3.0.0:
  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=

+has-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
+  integrity sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=
+
 has-unicode@^2.0.0:
  version "2.0.1"
  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -1497,10 +1666,10 @@ node-pre-gyp@^0.10.0:
    semver "^5.3.0"
    tar "^4"

-node-releases@^1.1.8:
-  version "1.1.10"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.10.tgz#5dbeb6bc7f4e9c85b899e2e7adcc0635c9b2adf7"
-  integrity sha512-KbUPCpfoBvb3oBkej9+nrU0/7xPlVhmhhUJ1PZqwIP5/1dJkRWKWD3OONjo6M2J7tSCBtDCumLwwqeI+DWWaLQ==
+node-releases@^1.1.25:
+  version "1.1.25"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.25.tgz#0c2d7dbc7fed30fbe02a9ee3007b8c90bf0133d3"
+  integrity sha512-fI5BXuk83lKEoZDdH3gRhtsNgh05/wZacuXkgbiYkceE7+QIMXOg98n9ZV7mz27B+kFHnqHcUpscZZlGRSmTpQ==
  dependencies:
    semver "^5.3.0"

@@ -1566,6 +1735,11 @@ object-copy@^0.1.0:
    define-property "^0.2.5"
    kind-of "^3.0.3"

+object-keys@^1.0.11, object-keys@^1.0.12:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
 object-visit@^1.0.0:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@@ -1573,6 +1747,16 @@ object-visit@^1.0.0:
  dependencies:
    isobject "^3.0.0"

+object.assign@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
+  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
+  dependencies:
+    define-properties "^1.1.2"
+    function-bind "^1.1.1"
+    has-symbols "^1.0.0"
+    object-keys "^1.0.11"
+
 object.pick@^1.3.0:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
@@ -1693,10 +1877,10 @@ regenerate@^1.4.0:
  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
  integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==

-regenerator-transform@^0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.4.tgz#18f6763cf1382c69c36df76c6ce122cc694284fb"
-  integrity sha512-T0QMBjK3J0MtxjPmdIMXm72Wvj2Abb0Bd4HADdfijwMdoIsyQZ6fWC7kDFhk2YinBBEMZDL7Y7wh0J1sGx3S4A==
+regenerator-transform@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.0.tgz#2ca9aaf7a2c239dd32e4761218425b8c7a86ecaf"
+  integrity sha512-rtOelq4Cawlbmq9xuMR5gdFmv7ku/sFoB7sRiywx7aq53bc52b4j6zvH7Te1Vt/X2YveDKnCGUbioieU7FEL3w==
  dependencies:
    private "^0.1.6"

@@ -1708,12 +1892,12 @@ regex-not@^1.0.0, regex-not@^1.0.2:
    extend-shallow "^3.0.2"
    safe-regex "^1.1.0"

-regexp-tree@^0.1.0:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.5.tgz#7cd71fca17198d04b4176efd79713f2998009397"
-  integrity sha512-nUmxvfJyAODw+0B13hj8CFVAxhe7fDEAgJgaotBu3nnR+IgGgZq59YedJP5VYTlkEfqjuK6TuRpnymKdatLZfQ==
+regexp-tree@^0.1.6:
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.11.tgz#c9c7f00fcf722e0a56c7390983a7a63dd6c272f3"
+  integrity sha512-7/l/DgapVVDzZobwMCCgMlqiqyLFJ0cduo/j+3BcDJIB+yJdsYCfKuI3l/04NV+H/rfNRdPIDbXNZHM9XvQatg==

-regexpu-core@^4.1.3, regexpu-core@^4.2.0:
+regexpu-core@^4.5.4:
  version "4.5.4"
  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.5.4.tgz#080d9d02289aa87fe1667a4f5136bc98a6aebaae"
  integrity sha512-BtizvGtFQKGPUcTy56o3nk1bGRp4SZOTYrDtGNlqCQufptV5IkkLN6Emw+yunAJjzf+C9FQFtvq7IoA3+oMYHQ==
@@ -1803,6 +1987,16 @@ semver@^5.3.0, semver@^5.4.1:
  resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
  integrity sha512-RS9R6R35NYgQn++fkDWaOmqGoj4Ek9gGs+DPxNUZKuwE183xjJroKvyo1IzVFeXvUrvmALy6FWD5xrdJT25gMg==

+semver@^5.5.0:
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"
+  integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==
+
+semver@^6.1.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.2.0.tgz#4d813d9590aaf8a9192693d6c85b9344de5901db"
+  integrity sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==
+
 set-blocking@~2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
@@ -2043,7 +2237,7 @@ unset-value@^1.0.0:
    has-value "^0.3.1"
    isobject "^3.0.0"

-upath@^1.1.0:
+upath@^1.1.1:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.2.tgz#3db658600edaeeccbe6db5e684d67ee8c2acd068"
  integrity sha512-kXpym8nmDmlCBr7nKdIx8P2jNBa+pBpIUFRnKJ4dr8htyYGJFokkr2ZvERRtUN+9SY+JqXouNgUPtv6JQva/2Q==
Author	SHA1	Message	Date
Alex Fox	374a0933d0	Merge pull request #58 from alexfoxy/dev Fixed issue #52	2019-09-20 08:32:11 +01:00
alexfoxy	21f8ab2ca5	fixed anchor on presets	2019-07-13 09:54:52 +01:00
alexfoxy	b4d0cfc30d	Merge branch 'master' into dev	2019-07-13 09:48:25 +01:00
alexfoxy	30109c0d9f	Updated @babel to fix lodash vulnerability	2019-07-13 08:36:54 +01:00
Alex Fox	3c37dc966e	Merge pull request #43 from madnificent/master Add EmberJS reference to README.md	2019-04-10 10:50:03 +01:00
Aad Versteden	ee8c120e9b	Add EmberJS reference to README.md The ember-lax library makes using lax super simple in EmberJS. Adding a reference to the relevant section.	2019-04-09 23:26:32 +02:00
Alex Fox	5d9adbfc9f	Update README.md	2019-04-06 10:48:51 +01:00
Alex Fox	98fa5f9a63	updated docs	2019-04-04 22:30:02 +01:00
Alex Fox	47d3e8caa1	added rotateX and rotateY transforms	2019-04-04 22:28:03 +01:00
Alex Fox	7a8473be34	Merge branch 'master' of https://github.com/alexfoxy/laxx	2019-04-04 18:05:32 +01:00
Alex Fox	4cd6de77d9	fixed version number in src/lax.js	2019-04-04 18:05:17 +01:00
Alex Fox	9f9ac92b9d	Update README.md	2019-04-03 20:30:38 +01:00
Alex Fox	2383abd408	fixed demo	2019-04-03 19:31:02 +01:00
Alex Fox	1b98233010	built 1.2.2	2019-04-03 17:48:43 +01:00
Alex Fox	e3ace92004	Merge branch 'master' of https://github.com/alexfoxy/laxx	2019-04-03 17:48:12 +01:00
Alex Fox	2c54a68027	fixed issue with lax.addelement	2019-04-03 17:48:06 +01:00
Alex Fox	1a2205bfdf	Merge pull request #35 from okydk/patch-1 Added CDN info	2019-04-03 15:12:07 +01:00
Stefan	5c70d40a35	Added CDN info	2019-04-03 15:36:53 +02:00
Alex Fox	8a98a9781c	Merge pull request #29 from arthurdenner/docs/add-use-lax-to-readme docs: Add use-lax to the README.md	2019-04-03 07:17:58 +01:00
Alex Fox	e630079794	fix merge	2019-04-03 07:16:56 +01:00
Alex Fox	f68690aca8	fixed issue with resizing window	2019-04-03 07:16:26 +01:00
Alex Fox	33757cf7fa	Update index.html	2019-04-02 08:24:08 +01:00
Alex Fox	e44b8c7ddb	Update index.html	2019-04-02 08:23:49 +01:00
Alex Fox	57d6726326	Update index.html	2019-04-02 08:22:46 +01:00
Alex Fox	6437b229f9	Merge branch 'master' of https://github.com/alexfoxy/laxx	2019-04-02 07:09:53 +01:00
Alex Fox	359d19e8af	minor code clean up	2019-04-02 07:09:25 +01:00
Alex Fox	e6a322bbac	Update README.md	2019-03-26 17:28:23 +00:00
Alex Fox	b670d2fd12	removed changelog file	2019-03-26 09:02:33 +00:00
Alex Fox	21aced1fab	Merge branch 'master' into dev	2019-03-26 09:00:37 +00:00
Alex Fox	e1ed428663	Update README.md	2019-03-26 08:59:58 +00:00
Alex Fox	877bb3ec1a	Update README.md	2019-03-26 08:51:01 +00:00
Alex Fox	b7d32ace26	Update README.md	2019-03-26 08:49:30 +00:00
Alex Fox	3813e8d486	Merge pull request #30 from alexfoxy/dev Merge 1.2 dev to master	2019-03-26 08:48:40 +00:00
Alex Fox	b4cfc8d6b4	tweaked backface visibility	2019-03-26 08:47:24 +00:00
Alex Fox	f2d3dc0977	readme tweak	2019-03-26 08:40:51 +00:00
Alex Fox	a9a5d6a216	Merge branch 'dev' of https://github.com/alexfoxy/laxx into dev	2019-03-26 08:39:39 +00:00
Alex Fox	f035230a56	tweak readme	2019-03-26 08:39:37 +00:00
Alex Fox	fddfeaabeb	Update README.md	2019-03-26 08:38:37 +00:00
Alex Fox	51dac49553	rc for 1.2	2019-03-26 08:17:49 +00:00
Alex Fox	eb0a1b4230	Merge branch 'spriteanimation' into responsive	2019-03-26 08:16:39 +00:00
Alex Fox	7965234d87	sprite sheet and other changes	2019-03-26 08:16:21 +00:00
Arthur Denner	ea813af50b	docs: Add use-lax to the README.md	2019-03-25 14:12:18 -03:00
Alex Fox	278168414b	x	2019-03-23 16:34:46 +00:00
Alex Fox	25ac2b5497	added sprite sheet animation	2019-03-23 16:31:25 +00:00
Alex Fox	9c9038a3ea	merged master	2019-03-23 13:24:02 +00:00
Alex Fox	bb6133ea2b	Merge pull request #24 from alexfoxy/revert-23-feature-this-bugs Revert "fix "this" bugs"	2019-03-23 13:10:58 +00:00
Alex Fox	0d36e901d7	Revert "fix "this" bugs"	2019-03-23 13:10:36 +00:00
Alex Fox	49c45d8e4f	changed breakpoint seperator and fixed demo	2019-03-23 10:28:43 +00:00
Alex Fox	1247463303	Merge branch 'responsive' of https://github.com/alexfoxy/laxx into responsive	2019-03-23 10:09:15 +00:00
Alex Fox	a587813c1e	x	2019-03-23 10:09:12 +00:00
Alex Fox	08dd1ceb6e	Merge pull request #23 from flycsqaq/feature-this-bugs fix "this" bugs	2019-03-23 10:07:44 +00:00
Alex Fox	f9074ee5e6	Merge pull request #17 from afanjul/responsive Using a class for identify lax elements, and using mobile-first breakpoints	2019-03-23 10:06:42 +00:00
zhoufeiyu	8684fb8ee3	fix this bugs	2019-03-23 13:51:48 +08:00
Alejandro Fanjul	9589627ed7	Using "--" as default separator for breakpoints, but the user could change it for "." or "_", etc. Fixed some coding regarding finding "presets" to avoid looping multiple times. Now we just discover the presets attribute and traverse in another loop. -In the original loop (through attributes), if a preset add another attributes (ie. data-lax-translate-x) the added attributes get traverse in the loop... (as part of the elements attributes).	2019-03-22 17:57:11 +01:00
Alejandro Fanjul	692ff93731	Fixed possible namespace problems using ':' for breakpoints, better to stick to '#' it seems safe to use	2019-03-22 14:04:58 +01:00
Alejandro Fanjul	cf77d95f0e	Merge remote-tracking branch 'upstream/responsive' into responsive Conflicts: src/lax.js	2019-03-22 13:59:27 +01:00
Alejandro Fanjul	1dd3bebbdd	Using a class for identify lax elements, by default ".lax", but the user could define custom one in options Using breakpoints with "mobile-first" approach as latest css frameworks does (ie. bootstrap 4, semantic-ui, etc.)	2019-03-22 13:48:41 +01:00
Alex Fox	33bd72d825	tweak to lax update functio	2019-03-22 12:48:06 +00:00
Alex Fox	b461e7b1cf	fixes and added support for responsive presets	2019-03-22 12:37:43 +00:00
Alex Fox	fee90b3a82	added error for no default setting	2019-03-22 08:38:23 +00:00
Alex Fox	7431ff3840	added support for screen size breakpoints	2019-03-22 08:27:13 +00:00
Alex Fox	07899d3443	Merge branch 'master' into dev	2019-03-20 17:37:45 +00:00
Alex Fox	b99389f388	Update index.html	2019-03-20 10:36:10 +00:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 155.56 54.07"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="17.69" y1="36.08" x2="165.43" y2="35.97" gradientTransform="translate(-20.45 21.43) rotate(-18.21)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c135d4"/><stop offset="1" stop-color="#6c56e3"/></linearGradient></defs><title>leaf1</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M155.56,27c-17.91,16.44-46.08,27-77.77,27S17.91,43.47,0,27C17.91,10.59,46.09,0,77.79,0S137.65,10.59,155.56,27Z"/></g></g></svg>