@apatheticwes/scrollify - npm Package Compare versions

Comparing version 1.0.3-alpha to 1.0.4-alpha

dist/scrollify.cjs.js

@@ -8,2 +8,2 @@ /*!
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=function(t,n,e){return(n-t)*e+t},n=function(t,n){return window.getComputedStyle(n)[t]||0},e=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.max.apply(Math,t)},r=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.min.apply(Math,t)},o=function(t){return"function"==typeof t},a=function(t){return 1===t.nodeType?t:document.querySelector(t)},i=function(t){var n=t.getBoundingClientRect();return{left:n.left+window.pageXOffset,right:n.right+window.pageXOffset,top:n.top+window.pageYOffset,bottom:n.bottom+window.pageYOffset,height:n.height,width:n.width}},s=function(n){var e=n.transforms,r=n.options;return function(n){e.position[0]=t.apply(void 0,r.concat([n]))}},u=function(n){var e=n.transforms,r=n.options;return function(n){e.position[1]=t.apply(void 0,r.concat([n]))}},c=u,f=function(n){var e=n.transforms,r=n.options;return function(n){e.rotation[0]=t.apply(void 0,r.concat([n]))}},l=function(n){var e=n.transforms,r=n.options;return function(n){e.rotation[1]=t.apply(void 0,r.concat([n]))}},p=function(n){var e=n.transforms,r=n.options;return function(n){e.rotation[2]=t.apply(void 0,r.concat([n]))}},h=p,d=function(n){var e=n.transforms,r=n.options;return function(n){e.scale[0]=t.apply(void 0,r.concat([n]))}},v=function(n){var e=n.transforms,r=n.options;return void 0===r&&(r=[e.scale[1],1]),function(n){e.scale[1]=t.apply(void 0,r.concat([n]))}},M=function(n){var e=n.transforms,r=n.options;return function(n){e.scale[0]=e.scale[1]=t.apply(void 0,r.concat([n]))}},w=function(n){var e=n.transforms,r=n.options;return function(n){e.skew[0]=t.apply(void 0,r.concat([n]))}},m=function(n){var e=n.transforms,r=n.options;return function(n){e.skew[1]=t.apply(void 0,r.concat([n]))}},y=function(n){var e=n.transforms,r=n.options;return function(n){e.skew[0]=e.skew[1]=t.apply(void 0,r.concat([n]))}};[s,u,f,l,p,M,d,v,y,w,m].forEach((function(t){Object.defineProperty(t,"useMatrix",{value:!0})}));var g=Object.freeze({__proto__:null,translateX:s,translateY:u,parallax:c,rotateX:f,rotateY:l,rotateZ:p,rotate:h,scaleX:d,scaleY:v,scale:M,skewX:w,skewY:m,skew:y,fade:function(n){var e=n.element,r=n.options;return function(n){e.style.opacity=t.apply(void 0,r.concat([n]))}},blur:function(n){var e=n.element,r=n.options;return function(n){e.style.filter="blur("+t.apply(void 0,r.concat([n]))+"px)"}},toggle:function(t){var n=t.element,e=t.options,r=Object.keys(e);return function(t){r.forEach((function(r){var o=e[r];n.classList.toggle(o,t>+r)}))}},stick:function(t){var n=t.element;function e(t){var e=n.__currentState;if(e!==t){if("sticky"==t){var r=n.getBoundingClientRect();n.style.top=r.top+"px",n.style.left=r.left+"px",n.style.width=r.width+"px"}else n.style.top="",n.style.left="",n.style.width="";n.classList.remove(e),n.classList.add(t),n.__currentState=t}}return function(t){e(t<=0?"normal":t>=1?"bottom":"sticky")}}});var O=Object.freeze({__proto__:null,oscillate:function(t,n,e,r){return t/=r,t=4*Math.PI*t,t=Math.sin(t)*e,(t=Math.abs(t))+n},easeInQuad:function(t,n,e,r){return e*(t/=r)*t+n},easeOutQuad:function(t,n,e,r){return-e*(t/=r)*(t-2)+n},easeInOutQuad:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t+n:-e/2*(--t*(t-2)-1)+n},easeInCubic:function(t,n,e,r){return e*(t/=r)*t*t+n},easeOutCubic:function(t,n,e,r){return e*((t=t/r-1)*t*t+1)+n},easeInOutCubic:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t+n:e/2*((t-=2)*t*t+2)+n},easeInQuart:function(t,n,e,r){return e*(t/=r)*t*t*t+n},easeOutQuart:function(t,n,e,r){return-e*((t=t/r-1)*t*t*t-1)+n},easeInOutQuart:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t+n:-e/2*((t-=2)*t*t*t-2)+n},easeInQuint:function(t,n,e,r){return e*(t/=r)*t*t*t*t+n},easeOutQuint:function(t,n,e,r){return e*((t=t/r-1)*t*t*t*t+1)+n},easeInOutQuint:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t*t+n:e/2*((t-=2)*t*t*t*t+2)+n},easeInSine:function(t,n,e,r){return-e*Math.cos(t/r*(Math.PI/2))+e+n},easeOutSine:function(t,n,e,r){return e*Math.sin(t/r*(Math.PI/2))+n},easeInOutSine:function(t,n,e,r){return-e/2*(Math.cos(Math.PI*t/r)-1)+n},easeInExpo:function(t,n,e,r){return 0==t?n:e*Math.pow(2,10*(t/r-1))+n},easeOutExpo:function(t,n,e,r){return t==r?n+e:e*(1-Math.pow(2,-10*t/r))+n},easeInOutExpo:function(t,n,e,r){return 0==t?n:t==r?n+e:(t/=r/2)<1?e/2*Math.pow(2,10*(t-1))+n:e/2*(2-Math.pow(2,-10*--t))+n},easeInCirc:function(t,n,e,r){return-e*(Math.sqrt(1-(t/=r)*t)-1)+n},easeOutCirc:function(t,n,e,r){return e*Math.sqrt(1-(t=t/r-1)*t)+n},easeInOutCirc:function(t,n,e,r){return(t/=r/2)<1?-e/2*(Math.sqrt(1-t*t)-1)+n:e/2*(Math.sqrt(1-(t-=2)*t)+1)+n},easeInElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(a||(a=.3*r),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return-i*Math.pow(2,10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)+n},easeOutElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(a||(a=.3*r),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return i*Math.pow(2,-10*t)*Math.sin((t*r-o)*(2*Math.PI)/a)+e+n},easeInOutElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(2==(t/=r/2))return n+e;if(a||(a=r*(.3*1.5)),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return t<1?i*Math.pow(2,10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)*-.5+n:i*Math.pow(2,-10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)*.5+e+n},easeInBack:function(t,n,e,r,o){return null==o&&(o=1.70158),e*(t/=r)*t*((o+1)*t-o)+n},easeOutBack:function(t,n,e,r,o){return null==o&&(o=1.70158),e*((t=t/r-1)*t*((o+1)*t+o)+1)+n},easeInOutBack:function(t,n,e,r,o){return null==o&&(o=1.70158),(t/=r/2)<1?e/2*(t*t*((1+(o*=1.525))*t-o))+n:e/2*((t-=2)*t*((1+(o*=1.525))*t+o)+2)+n},easeOutBounce:function(t,n,e,r){return(t/=r<1/2.75)?e*(7.5625*t*t)+n:t<2/2.75?e*(7.5625*(t-=1.5/2.75)*t+.75)+n:t<2.5/2.75?e*(7.5625*(t-=2.25/2.75)*t+.9375)+n:e*(7.5625*(t-=2.625/2.75)*t+.984375)+n}});function I(t,n,e){return e[0]=t[0]*n[0]+t[1]*n[4]+t[2]*n[8]+t[3]*n[12],e[1]=t[0]*n[1]+t[1]*n[5]+t[2]*n[9]+t[3]*n[13],e[2]=t[0]*n[2]+t[1]*n[6]+t[2]*n[10]+t[3]*n[14],e[3]=t[0]*n[3]+t[1]*n[7]+t[2]*n[11]+t[3]*n[15],e[4]=t[4]*n[0]+t[5]*n[4]+t[6]*n[8]+t[7]*n[12],e[5]=t[4]*n[1]+t[5]*n[5]+t[6]*n[9]+t[7]*n[13],e[6]=t[4]*n[2]+t[5]*n[6]+t[6]*n[10]+t[7]*n[14],e[7]=t[4]*n[3]+t[5]*n[7]+t[6]*n[11]+t[7]*n[15],e[8]=t[8]*n[0]+t[9]*n[4]+t[10]*n[8]+t[11]*n[12],e[9]=t[8]*n[1]+t[9]*n[5]+t[10]*n[9]+t[11]*n[13],e[10]=t[8]*n[2]+t[9]*n[6]+t[10]*n[10]+t[11]*n[14],e[11]=t[8]*n[3]+t[9]*n[7]+t[10]*n[11]+t[11]*n[15],e[12]=t[12]*n[0]+t[13]*n[4]+t[14]*n[8]+t[15]*n[12],e[13]=t[12]*n[1]+t[13]*n[5]+t[14]*n[9]+t[15]*n[13],e[14]=t[12]*n[2]+t[13]*n[6]+t[14]*n[10]+t[15]*n[14],e[15]=t[12]*n[3]+t[13]*n[7]+t[14]*n[11]+t[15]*n[15],e}function x(t){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}function b(t,n){n[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=t[3],n[4]=t[4],n[5]=t[5],n[6]=t[6],n[7]=t[7],n[8]=t[8],n[9]=t[9],n[10]=t[10],n[11]=t[11],n[12]=t[12],n[13]=t[13],n[14]=t[14],n[15]=t[15]}function k(){var t=new Float32Array(16),n=new Float32Array(16),e=new Float32Array(16);return x(t),{data:t,asCSS:function(){for(var n="matrix3d(",e=0;e<15;++e)Math.abs(t[e])<1e-4?n+="0,":n+=t[e].toFixed(10)+",";return Math.abs(t[15])<1e-4?n+="0)":n+=t[15].toFixed(10)+")",n},clear:function(){x(t)},translate:function(r,o,a){return b(t,n),function(t,n,e,r){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=n,t[13]=e,t[14]=r,t[15]=1}(e,r,o,a),I(n,e,t),this},rotateX:function(r){var o,a;return b(t,n),a=r,(o=e)[0]=1,o[1]=0,o[2]=0,o[3]=0,o[4]=0,o[5]=Math.cos(a),o[6]=-Math.sin(a),o[7]=0,o[8]=0,o[9]=Math.sin(a),o[10]=Math.cos(a),o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,I(n,e,t),this},rotateY:function(r){var o,a;return b(t,n),a=r,(o=e)[0]=Math.cos(a),o[1]=0,o[2]=Math.sin(a),o[3]=0,o[4]=0,o[5]=1,o[6]=0,o[7]=0,o[8]=-Math.sin(a),o[9]=0,o[10]=Math.cos(a),o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,I(n,e,t),this},rotateZ:function(r){var o,a;return b(t,n),a=r,(o=e)[0]=Math.cos(a),o[1]=-Math.sin(a),o[2]=0,o[3]=0,o[4]=Math.sin(a),o[5]=Math.cos(a),o[6]=0,o[7]=0,o[8]=0,o[9]=0,o[10]=1,o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,I(n,e,t),this},scale:function(r,o){return b(t,n),function(t,n,e){t[0]=n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=e,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(e,r,o),I(n,e,t),this},skew:function(r,o){return b(t,n),function(t,n,e){t[0]=1,t[1]=Math.tan(n),t[2]=0,t[3]=0,t[4]=Math.tan(e),t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(e,r,o),I(n,e,t),this}}}var S=1,E=2,_=3;function P(t,o,a){if(void 0===o&&(o=[]),"number"==typeof t)return t;var i=window.innerWidth,s=window.innerHeight;return new Function("refs","el","css","min","max","'use strict';return ("+t.replace(/(\d*)vw/g,(function(t,n){return.01*n*i})).replace(/(\d*)vh/g,(function(t,n){return.01*n*s})).replace(/px/g,"")+");")(o,a,n,e,r)}var C=function t(n){var e=this;(n=a(n))?(n.dataset.scrollify,this.scenes=[],this.element=n,this.ticking=!1,this.active=!0,this.matrix=k(),this.transforms={scale:[1,1],rotation:[0,0,0],position:[0,0,0]},window.addEventListener("scroll",(function(){return e.onScroll()}),{passive:!0}),window.addEventListener("resize",(function(){return e.onResize()}),{passive:!0})):document.querySelectorAll("[data-scrollify]").forEach((function(n){return new t(n)}))};C.prototype.parseDataAttribute=function(t){var n;return n=t.dataset.scrollify,Function("'use strict';return ("+n+")")()},C.prototype.addScene=function(t){var n=this,e=this.element,r=this.transforms,s=t.start;void 0===s&&(s="0, el.top - 100vh");var u=t.end;void 0===u&&(u="el.bottom");var c=t.easing,f=t.refs;void 0===f&&(f=[]);var l=t.effects;void 0===l&&(l={});var p=!1,h=function(t,n){return Object.keys(l).reduce((function(a,i){var s,u,c,f=l[i];return o(f)?s=f:(s=g[i],c=f,u=Array.isArray(c)?f.map((function(e){return P(e,t,n)})):f),p=p||s.useMatrix,a.push(s({element:e,transforms:r,options:u})),a}),[])},d={start:0,duration:0,state:"",easing:o(c)?c:O[c],effects:[],reset:function(){var t=window.scrollY,r=i(e),o=function(t){return t.map(a).map(i)}(f),c=P(s,o,r),l=P(u,o,r),v=h(o,r);d.effects=v,d.start=c,d.duration=l-c,d.state=t>c?t>l?E:_:S,d.useMatrix=p,n.update(d)}};return d.reset(),p&&(e.style.willChange="transform"),t.debug&&console.log("Scrollify scene: ",d),this.scenes.push(d),this},C.prototype.onScroll=function(){var t=this;this.active&&window.requestAnimationFrame((function(){t.scenes.forEach((function(n){return t.update(n)}),t)}))},C.prototype.onResize=function(){this.scenes.forEach((function(t){return t.reset()}))},C.prototype.update=function(t){var n,e=t.start,r=t.duration,o=t.easing,a=t.effects,i=window.scrollY;if(i-e>r){if(t.state===E)return;t.state=E,n=1}else if(i-e<0){if(t.state===S)return;t.state=S,n=0}else t.state=_,n=o?o(i-e,0,1,r):(i-e)/r;a.forEach((function(t){return t(n)})),t.useMatrix&&(this.element.style.transform=this.updateMatrix().asCSS())},C.prototype.updateMatrix=function(){var t=this.matrix,n=this.transforms;return t.clear(),n.transformOrigin&&t.translate(-n.transformOrigin[0],-n.transformOrigin[1],-n.transformOrigin[2]),n.scale&&t.scale(n.scale[0],n.scale[1]),n.skew&&t.skew(n.skew[0],n.skew[1]),n.rotation&&(t.rotateX(n.rotation[0]),t.rotateY(n.rotation[1]),t.rotateZ(n.rotation[2])),n.position&&t.translate(n.position[0],n.position[1],n.position[2]),n.transformOrigin&&t.translate(n.transformOrigin[0],n.transformOrigin[1],n.transformOrigin[2]),t},C.prototype.disable=function(){this.active=!1},exports.Scrollify=C,exports.default=C,exports.easings=O,exports.fx=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=function(t,n,e){return(n-t)*e+t},n=function(t,n){return window.getComputedStyle(n)[t]||0},e=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.max.apply(Math,t)},r=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.min.apply(Math,t)},a=function(t){return"function"==typeof t},i=function(t){return 1===t.nodeType?t:document.querySelector(t)},o=function(t){var n=t.getBoundingClientRect();return{left:n.left+window.pageXOffset,right:n.right+window.pageXOffset,top:n.top+window.pageYOffset,bottom:n.bottom+window.pageYOffset,height:n.height,width:n.width}};function u(t,a,i){if(void 0===a&&(a=[]),"number"==typeof t)return t;var o=window.innerWidth,u=window.innerHeight;return new Function("refs","el","css","min","max","'use strict';return ("+t.replace(/(\d*)vw/g,(function(t,n){return.01*n*o})).replace(/(\d*)vh/g,(function(t,n){return.01*n*u})).replace(/px/g,"")+");")(a,i,n,e,r)}function s(n,e,r){var i,o=Object.keys(n),s=Object.values(n);return i=n,Array.isArray(i)?(n=n.map((function(t){return u(t,e,r)})),function(e){return t.apply(void 0,n.concat([e]))}):a(s[0])?function(t){var n=0;return o.forEach((function(e){return e<t&&n++})),n?s[n-1]():""}:(s=s.map((function(t){return u(t,e,r)})),function(n){return function(n,e,r){var a=0;if(n.forEach((function(t){return t<r&&a++})),0===a)return e[0];if(a>=n.length)return e[n.length-1];var i,o,u=a-1,s=(i=n[u],o=n[a],(r-i)/(o-i));return t(e[u],e[a],s)}(o,s,n)})}var c=function(t){var n=t.transforms;return function(t){return n.position[0]=t}},f=function(t){var n=t.transforms;return function(t){return n.position[1]=t}},l=function(t){var n=t.transforms;return function(t){return n.position[2]=t}},h=c,p=f,v=l,d=f,w=function(t){var n=t.transforms;return function(t){return n.rotation[2]=t}},M=w,m=function(t){var n=t.transforms;return function(t){return n.skew[0]=t}},g=m,y=Object.freeze({__proto__:null,x:c,y:f,z:l,translateX:h,translateY:p,translateZ:v,parallax:d,rotateX:function(t){var n=t.transforms;return function(t){return n.rotation[0]=t}},rotateY:function(t){var n=t.transforms;return function(t){return n.rotation[1]=t}},rotateZ:w,rotate:M,scaleX:function(t){var n=t.transforms;return function(t){return n.scale[0]=t}},scaleY:function(t){var n=t.transforms;return function(t){return n.scale[1]=t}},scale:function(t){var n=t.transforms;return function(t){return n.scale[0]=n.scale[1]=t}},skewX:m,skewY:function(t){var n=t.transforms;return function(t){return n.skew[1]=t}},skew:g,fade:function(t){var n=t.element;return function(t){n.style.opacity=t}},blur:function(t){var n=t.element;return function(t){n.style.filter="blur("+t+"px)"}},toggle:function(t){var n=t.element;return function(t){n.className=t}},stick:function(t){var n=t.element;function e(t){var e=n.__currentState;if(e!==t){if("sticky"==t){var r=n.getBoundingClientRect();n.style.top=r.top+"px",n.style.left=r.left+"px",n.style.width=r.width+"px"}else n.style.top="",n.style.left="",n.style.width="";n.classList.remove(e),n.classList.add(t),n.__currentState=t}}return function(t){e(t<=0?"normal":t>=1?"bottom":"sticky")}}});var O=Object.freeze({__proto__:null,oscillate:function(t,n,e,r){return t/=r,t=4*Math.PI*t,t=Math.sin(t)*e,(t=Math.abs(t))+n},easeInQuad:function(t,n,e,r){return e*(t/=r)*t+n},easeOutQuad:function(t,n,e,r){return-e*(t/=r)*(t-2)+n},easeInOutQuad:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t+n:-e/2*(--t*(t-2)-1)+n},easeInCubic:function(t,n,e,r){return e*(t/=r)*t*t+n},easeOutCubic:function(t,n,e,r){return e*((t=t/r-1)*t*t+1)+n},easeInOutCubic:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t+n:e/2*((t-=2)*t*t+2)+n},easeInQuart:function(t,n,e,r){return e*(t/=r)*t*t*t+n},easeOutQuart:function(t,n,e,r){return-e*((t=t/r-1)*t*t*t-1)+n},easeInOutQuart:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t+n:-e/2*((t-=2)*t*t*t-2)+n},easeInQuint:function(t,n,e,r){return e*(t/=r)*t*t*t*t+n},easeOutQuint:function(t,n,e,r){return e*((t=t/r-1)*t*t*t*t+1)+n},easeInOutQuint:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t*t+n:e/2*((t-=2)*t*t*t*t+2)+n},easeInSine:function(t,n,e,r){return-e*Math.cos(t/r*(Math.PI/2))+e+n},easeOutSine:function(t,n,e,r){return e*Math.sin(t/r*(Math.PI/2))+n},easeInOutSine:function(t,n,e,r){return-e/2*(Math.cos(Math.PI*t/r)-1)+n},easeInExpo:function(t,n,e,r){return 0==t?n:e*Math.pow(2,10*(t/r-1))+n},easeOutExpo:function(t,n,e,r){return t==r?n+e:e*(1-Math.pow(2,-10*t/r))+n},easeInOutExpo:function(t,n,e,r){return 0==t?n:t==r?n+e:(t/=r/2)<1?e/2*Math.pow(2,10*(t-1))+n:e/2*(2-Math.pow(2,-10*--t))+n},easeInCirc:function(t,n,e,r){return-e*(Math.sqrt(1-(t/=r)*t)-1)+n},easeOutCirc:function(t,n,e,r){return e*Math.sqrt(1-(t=t/r-1)*t)+n},easeInOutCirc:function(t,n,e,r){return(t/=r/2)<1?-e/2*(Math.sqrt(1-t*t)-1)+n:e/2*(Math.sqrt(1-(t-=2)*t)+1)+n},easeInElastic:function(t,n,e,r){var a=1.70158,i=0,o=e;if(0==t)return n;if(1==(t/=r))return n+e;if(i||(i=.3*r),o<Math.abs(e)){o=e;a=i/4}else a=i/(2*Math.PI)*Math.asin(e/o);return-o*Math.pow(2,10*(t-=1))*Math.sin((t*r-a)*(2*Math.PI)/i)+n},easeOutElastic:function(t,n,e,r){var a=1.70158,i=0,o=e;if(0==t)return n;if(1==(t/=r))return n+e;if(i||(i=.3*r),o<Math.abs(e)){o=e;a=i/4}else a=i/(2*Math.PI)*Math.asin(e/o);return o*Math.pow(2,-10*t)*Math.sin((t*r-a)*(2*Math.PI)/i)+e+n},easeInOutElastic:function(t,n,e,r){var a=1.70158,i=0,o=e;if(0==t)return n;if(2==(t/=r/2))return n+e;if(i||(i=r*(.3*1.5)),o<Math.abs(e)){o=e;a=i/4}else a=i/(2*Math.PI)*Math.asin(e/o);return t<1?o*Math.pow(2,10*(t-=1))*Math.sin((t*r-a)*(2*Math.PI)/i)*-.5+n:o*Math.pow(2,-10*(t-=1))*Math.sin((t*r-a)*(2*Math.PI)/i)*.5+e+n},easeInBack:function(t,n,e,r,a){return null==a&&(a=1.70158),e*(t/=r)*t*((a+1)*t-a)+n},easeOutBack:function(t,n,e,r,a){return null==a&&(a=1.70158),e*((t=t/r-1)*t*((a+1)*t+a)+1)+n},easeInOutBack:function(t,n,e,r,a){return null==a&&(a=1.70158),(t/=r/2)<1?e/2*(t*t*((1+(a*=1.525))*t-a))+n:e/2*((t-=2)*t*((1+(a*=1.525))*t+a)+2)+n},easeOutBounce:function(t,n,e,r){return(t/=r<1/2.75)?e*(7.5625*t*t)+n:t<2/2.75?e*(7.5625*(t-=1.5/2.75)*t+.75)+n:t<2.5/2.75?e*(7.5625*(t-=2.25/2.75)*t+.9375)+n:e*(7.5625*(t-=2.625/2.75)*t+.984375)+n}});function x(t,n,e){return e[0]=t[0]*n[0]+t[1]*n[4]+t[2]*n[8]+t[3]*n[12],e[1]=t[0]*n[1]+t[1]*n[5]+t[2]*n[9]+t[3]*n[13],e[2]=t[0]*n[2]+t[1]*n[6]+t[2]*n[10]+t[3]*n[14],e[3]=t[0]*n[3]+t[1]*n[7]+t[2]*n[11]+t[3]*n[15],e[4]=t[4]*n[0]+t[5]*n[4]+t[6]*n[8]+t[7]*n[12],e[5]=t[4]*n[1]+t[5]*n[5]+t[6]*n[9]+t[7]*n[13],e[6]=t[4]*n[2]+t[5]*n[6]+t[6]*n[10]+t[7]*n[14],e[7]=t[4]*n[3]+t[5]*n[7]+t[6]*n[11]+t[7]*n[15],e[8]=t[8]*n[0]+t[9]*n[4]+t[10]*n[8]+t[11]*n[12],e[9]=t[8]*n[1]+t[9]*n[5]+t[10]*n[9]+t[11]*n[13],e[10]=t[8]*n[2]+t[9]*n[6]+t[10]*n[10]+t[11]*n[14],e[11]=t[8]*n[3]+t[9]*n[7]+t[10]*n[11]+t[11]*n[15],e[12]=t[12]*n[0]+t[13]*n[4]+t[14]*n[8]+t[15]*n[12],e[13]=t[12]*n[1]+t[13]*n[5]+t[14]*n[9]+t[15]*n[13],e[14]=t[12]*n[2]+t[13]*n[6]+t[14]*n[10]+t[15]*n[14],e[15]=t[12]*n[3]+t[13]*n[7]+t[14]*n[11]+t[15]*n[15],e}function I(t){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}function b(t,n){n[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=t[3],n[4]=t[4],n[5]=t[5],n[6]=t[6],n[7]=t[7],n[8]=t[8],n[9]=t[9],n[10]=t[10],n[11]=t[11],n[12]=t[12],n[13]=t[13],n[14]=t[14],n[15]=t[15]}function k(){var t=new Float32Array(16),n=new Float32Array(16),e=new Float32Array(16);return I(t),{data:t,asCSS:function(){return"matrix3d("+t.toString()+")"},clear:function(){I(t)},translate:function(r,a,i){return b(t,n),function(t,n,e,r){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=n,t[13]=e,t[14]=r,t[15]=1}(e,r,a,i),x(n,e,t),this},rotateX:function(r){var a,i;return b(t,n),i=r,(a=e)[0]=1,a[1]=0,a[2]=0,a[3]=0,a[4]=0,a[5]=Math.cos(i),a[6]=-Math.sin(i),a[7]=0,a[8]=0,a[9]=Math.sin(i),a[10]=Math.cos(i),a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,x(n,e,t),this},rotateY:function(r){var a,i;return b(t,n),i=r,(a=e)[0]=Math.cos(i),a[1]=0,a[2]=Math.sin(i),a[3]=0,a[4]=0,a[5]=1,a[6]=0,a[7]=0,a[8]=-Math.sin(i),a[9]=0,a[10]=Math.cos(i),a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,x(n,e,t),this},rotateZ:function(r){var a,i;return b(t,n),i=r,(a=e)[0]=Math.cos(i),a[1]=-Math.sin(i),a[2]=0,a[3]=0,a[4]=Math.sin(i),a[5]=Math.cos(i),a[6]=0,a[7]=0,a[8]=0,a[9]=0,a[10]=1,a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,x(n,e,t),this},scale:function(r,a){return b(t,n),function(t,n,e){t[0]=n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=e,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(e,r,a),x(n,e,t),this},skew:function(r,a){return b(t,n),function(t,n,e){t[0]=1,t[1]=Math.tan(n),t[2]=0,t[3]=0,t[4]=Math.tan(e),t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(e,r,a),x(n,e,t),this}}}var S="before",E="after",_="active",Y=[],A={scrollX:0,scrollY:0,windowWidth:0,windowHeight:0},C=!1,P=function t(n){var e,r=this;if(!n)return document.querySelectorAll("[data-scrollify]").forEach((function(n){return new t(n)}));if(n=i(n),C||(C=!0,window.addEventListener("scroll",(function(){return r.onScroll()}),{passive:!0}),window.addEventListener("resize",(function(){return r.onResize()}),{passive:!0})),this.element=n,this.active=!0,n.dataset.scrollify){var a=(e=n.dataset.scrollify,new Function("'use strict';return ("+e+")")());this.addScene(a)}};P.prototype.onScroll=function(){this.active&&(A.scrollY=window.scrollY||window.pageYOffset,A.scrollX=window.scrollX||window.pageXOffset,Y.forEach(this.update,this))},P.prototype.onResize=function(){Y.forEach((function(t){return t.reset()}))},P.prototype.update=function(t){var n,e=this,r=t.start,a=t.duration,i=t.easing,o=t.effects,u=A.scrollY;if(u-r>a){if(t.state===E)return;t.state=E,n=1}else if(u-r<0){if(t.state===S)return;t.state=S,n=0}else t.state=_,n=i?i(u-r,0,1,a):(u-r)/a;window.requestAnimationFrame((function(){o.forEach((function(t){return t(n)})),t._useMatrix&&(t.element.style.transform=e.updateMatrix(t).asCSS())}))},P.prototype.addScene=function(t){var n,e=this,r=t.start;void 0===r&&(r="el.top - 100vh");var s=t.end;void 0===s&&(s="el.bottom");var c=t.easing,f=t.refs;void 0===f&&(f=[]);var l=t.effects;void 0===l&&(l={});var h=this.element,p={element:h,matrix:k(),transforms:(n={},n.scale=[1,1],n.rotation=[0,0,0],n.position=[0,0,0],n.skew=[0,0],n),start:0,duration:0,state:"",easing:a(c)?c:O[c],effects:[],reset:function(){var t=window.scrollY,n=o(h),a=function(t){return t.map(i).map(o)}(f),c=u(r,a,n),v=u(s,a,n);p.effects=e.calculateEffects.call(p,l,a,n),p.start=c,p.duration=v-c,p.state=t>c?t>v?E:_:S,e.update(p)}};p.reset(),Y.push(p),p._useMatrix&&(h.style.willChange="transform"),t.debug&&console.log("Scrollify scene: ",p)},P.prototype.calculateEffects=function(t,n,e){var r=this,i=this.element,o=this.transforms;return Object.keys(t).reduce((function(u,c){var f,l,h=t[c];if(a(h))l=h({element:i,transforms:o}),f=function(t){return t};else{l=y[c]({element:i,transforms:o}),f=s(h,n,e);var p=new RegExp("(?<scale>scale)|(?<position>x|y|z)|(?<rotation>rotate)|(?<skew>skew)/i").exec(c),v=p&&Object.keys(p.groups).filter((function(t){return p.groups[t]})).toString();l&&v&&(o[v].isActive=r._useMatrix=!0)}return u.push((function(t){return l(f(t))})),u}),[])},P.prototype.updateMatrix=function(t){var n=t.matrix,e=t.transforms;return n.clear(),e.transformOrigin&&n.translate(-e.transformOrigin[0],-e.transformOrigin[1],-e.transformOrigin[2]),e.scale.isActive&&n.scale(e.scale[0],e.scale[1]),e.skew.isActive&&n.skew(e.skew[0],e.skew[1]),e.rotation.isActive&&(n.rotateX(e.rotation[0]),n.rotateY(e.rotation[1]),n.rotateZ(e.rotation[2])),e.position.isActive&&n.translate(e.position[0],e.position[1],e.position[2]),e.transformOrigin&&n.translate(e.transformOrigin[0],e.transformOrigin[1],e.transformOrigin[2]),n},P.prototype.disable=function(){this.active=!1},exports.Scrollify=P,exports.default=P,exports.easings=O,exports.fx=y;

dist/scrollify.es6.js

@@ -8,2 +8,2 @@ /*!
  */
-var t=function(t,n,e){return(n-t)*e+t},n=function(t,n){return window.getComputedStyle(n)[t]||0},e=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.max.apply(Math,t)},r=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.min.apply(Math,t)},a=function(t){return"function"==typeof t},o=function(t){return 1===t.nodeType?t:document.querySelector(t)},i=function(t){var n=t.getBoundingClientRect();return{left:n.left+window.pageXOffset,right:n.right+window.pageXOffset,top:n.top+window.pageYOffset,bottom:n.bottom+window.pageYOffset,height:n.height,width:n.width}},s=function(n){var e=n.transforms,r=n.options;return function(n){e.position[0]=t.apply(void 0,r.concat([n]))}},u=function(n){var e=n.transforms,r=n.options;return function(n){e.position[1]=t.apply(void 0,r.concat([n]))}},c=u,f=function(n){var e=n.transforms,r=n.options;return function(n){e.rotation[0]=t.apply(void 0,r.concat([n]))}},l=function(n){var e=n.transforms,r=n.options;return function(n){e.rotation[1]=t.apply(void 0,r.concat([n]))}},p=function(n){var e=n.transforms,r=n.options;return function(n){e.rotation[2]=t.apply(void 0,r.concat([n]))}},h=p,d=function(n){var e=n.transforms,r=n.options;return function(n){e.scale[0]=t.apply(void 0,r.concat([n]))}},v=function(n){var e=n.transforms,r=n.options;return void 0===r&&(r=[e.scale[1],1]),function(n){e.scale[1]=t.apply(void 0,r.concat([n]))}},M=function(n){var e=n.transforms,r=n.options;return function(n){e.scale[0]=e.scale[1]=t.apply(void 0,r.concat([n]))}},w=function(n){var e=n.transforms,r=n.options;return function(n){e.skew[0]=t.apply(void 0,r.concat([n]))}},m=function(n){var e=n.transforms,r=n.options;return function(n){e.skew[1]=t.apply(void 0,r.concat([n]))}},y=function(n){var e=n.transforms,r=n.options;return function(n){e.skew[0]=e.skew[1]=t.apply(void 0,r.concat([n]))}};[s,u,f,l,p,M,d,v,y,w,m].forEach((function(t){Object.defineProperty(t,"useMatrix",{value:!0})}));var g=Object.freeze({__proto__:null,translateX:s,translateY:u,parallax:c,rotateX:f,rotateY:l,rotateZ:p,rotate:h,scaleX:d,scaleY:v,scale:M,skewX:w,skewY:m,skew:y,fade:function(n){var e=n.element,r=n.options;return function(n){e.style.opacity=t.apply(void 0,r.concat([n]))}},blur:function(n){var e=n.element,r=n.options;return function(n){e.style.filter="blur("+t.apply(void 0,r.concat([n]))+"px)"}},toggle:function(t){var n=t.element,e=t.options,r=Object.keys(e);return function(t){r.forEach((function(r){var a=e[r];n.classList.toggle(a,t>+r)}))}},stick:function(t){var n=t.element;function e(t){var e=n.__currentState;if(e!==t){if("sticky"==t){var r=n.getBoundingClientRect();n.style.top=r.top+"px",n.style.left=r.left+"px",n.style.width=r.width+"px"}else n.style.top="",n.style.left="",n.style.width="";n.classList.remove(e),n.classList.add(t),n.__currentState=t}}return function(t){e(t<=0?"normal":t>=1?"bottom":"sticky")}}});var O=Object.freeze({__proto__:null,oscillate:function(t,n,e,r){return t/=r,t=4*Math.PI*t,t=Math.sin(t)*e,(t=Math.abs(t))+n},easeInQuad:function(t,n,e,r){return e*(t/=r)*t+n},easeOutQuad:function(t,n,e,r){return-e*(t/=r)*(t-2)+n},easeInOutQuad:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t+n:-e/2*(--t*(t-2)-1)+n},easeInCubic:function(t,n,e,r){return e*(t/=r)*t*t+n},easeOutCubic:function(t,n,e,r){return e*((t=t/r-1)*t*t+1)+n},easeInOutCubic:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t+n:e/2*((t-=2)*t*t+2)+n},easeInQuart:function(t,n,e,r){return e*(t/=r)*t*t*t+n},easeOutQuart:function(t,n,e,r){return-e*((t=t/r-1)*t*t*t-1)+n},easeInOutQuart:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t+n:-e/2*((t-=2)*t*t*t-2)+n},easeInQuint:function(t,n,e,r){return e*(t/=r)*t*t*t*t+n},easeOutQuint:function(t,n,e,r){return e*((t=t/r-1)*t*t*t*t+1)+n},easeInOutQuint:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t*t+n:e/2*((t-=2)*t*t*t*t+2)+n},easeInSine:function(t,n,e,r){return-e*Math.cos(t/r*(Math.PI/2))+e+n},easeOutSine:function(t,n,e,r){return e*Math.sin(t/r*(Math.PI/2))+n},easeInOutSine:function(t,n,e,r){return-e/2*(Math.cos(Math.PI*t/r)-1)+n},easeInExpo:function(t,n,e,r){return 0==t?n:e*Math.pow(2,10*(t/r-1))+n},easeOutExpo:function(t,n,e,r){return t==r?n+e:e*(1-Math.pow(2,-10*t/r))+n},easeInOutExpo:function(t,n,e,r){return 0==t?n:t==r?n+e:(t/=r/2)<1?e/2*Math.pow(2,10*(t-1))+n:e/2*(2-Math.pow(2,-10*--t))+n},easeInCirc:function(t,n,e,r){return-e*(Math.sqrt(1-(t/=r)*t)-1)+n},easeOutCirc:function(t,n,e,r){return e*Math.sqrt(1-(t=t/r-1)*t)+n},easeInOutCirc:function(t,n,e,r){return(t/=r/2)<1?-e/2*(Math.sqrt(1-t*t)-1)+n:e/2*(Math.sqrt(1-(t-=2)*t)+1)+n},easeInElastic:function(t,n,e,r){var a=1.70158,o=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(o||(o=.3*r),i<Math.abs(e)){i=e;a=o/4}else a=o/(2*Math.PI)*Math.asin(e/i);return-i*Math.pow(2,10*(t-=1))*Math.sin((t*r-a)*(2*Math.PI)/o)+n},easeOutElastic:function(t,n,e,r){var a=1.70158,o=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(o||(o=.3*r),i<Math.abs(e)){i=e;a=o/4}else a=o/(2*Math.PI)*Math.asin(e/i);return i*Math.pow(2,-10*t)*Math.sin((t*r-a)*(2*Math.PI)/o)+e+n},easeInOutElastic:function(t,n,e,r){var a=1.70158,o=0,i=e;if(0==t)return n;if(2==(t/=r/2))return n+e;if(o||(o=r*(.3*1.5)),i<Math.abs(e)){i=e;a=o/4}else a=o/(2*Math.PI)*Math.asin(e/i);return t<1?i*Math.pow(2,10*(t-=1))*Math.sin((t*r-a)*(2*Math.PI)/o)*-.5+n:i*Math.pow(2,-10*(t-=1))*Math.sin((t*r-a)*(2*Math.PI)/o)*.5+e+n},easeInBack:function(t,n,e,r,a){return null==a&&(a=1.70158),e*(t/=r)*t*((a+1)*t-a)+n},easeOutBack:function(t,n,e,r,a){return null==a&&(a=1.70158),e*((t=t/r-1)*t*((a+1)*t+a)+1)+n},easeInOutBack:function(t,n,e,r,a){return null==a&&(a=1.70158),(t/=r/2)<1?e/2*(t*t*((1+(a*=1.525))*t-a))+n:e/2*((t-=2)*t*((1+(a*=1.525))*t+a)+2)+n},easeOutBounce:function(t,n,e,r){return(t/=r<1/2.75)?e*(7.5625*t*t)+n:t<2/2.75?e*(7.5625*(t-=1.5/2.75)*t+.75)+n:t<2.5/2.75?e*(7.5625*(t-=2.25/2.75)*t+.9375)+n:e*(7.5625*(t-=2.625/2.75)*t+.984375)+n}});function I(t,n,e){return e[0]=t[0]*n[0]+t[1]*n[4]+t[2]*n[8]+t[3]*n[12],e[1]=t[0]*n[1]+t[1]*n[5]+t[2]*n[9]+t[3]*n[13],e[2]=t[0]*n[2]+t[1]*n[6]+t[2]*n[10]+t[3]*n[14],e[3]=t[0]*n[3]+t[1]*n[7]+t[2]*n[11]+t[3]*n[15],e[4]=t[4]*n[0]+t[5]*n[4]+t[6]*n[8]+t[7]*n[12],e[5]=t[4]*n[1]+t[5]*n[5]+t[6]*n[9]+t[7]*n[13],e[6]=t[4]*n[2]+t[5]*n[6]+t[6]*n[10]+t[7]*n[14],e[7]=t[4]*n[3]+t[5]*n[7]+t[6]*n[11]+t[7]*n[15],e[8]=t[8]*n[0]+t[9]*n[4]+t[10]*n[8]+t[11]*n[12],e[9]=t[8]*n[1]+t[9]*n[5]+t[10]*n[9]+t[11]*n[13],e[10]=t[8]*n[2]+t[9]*n[6]+t[10]*n[10]+t[11]*n[14],e[11]=t[8]*n[3]+t[9]*n[7]+t[10]*n[11]+t[11]*n[15],e[12]=t[12]*n[0]+t[13]*n[4]+t[14]*n[8]+t[15]*n[12],e[13]=t[12]*n[1]+t[13]*n[5]+t[14]*n[9]+t[15]*n[13],e[14]=t[12]*n[2]+t[13]*n[6]+t[14]*n[10]+t[15]*n[14],e[15]=t[12]*n[3]+t[13]*n[7]+t[14]*n[11]+t[15]*n[15],e}function x(t){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}function b(t,n){n[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=t[3],n[4]=t[4],n[5]=t[5],n[6]=t[6],n[7]=t[7],n[8]=t[8],n[9]=t[9],n[10]=t[10],n[11]=t[11],n[12]=t[12],n[13]=t[13],n[14]=t[14],n[15]=t[15]}function k(){var t=new Float32Array(16),n=new Float32Array(16),e=new Float32Array(16);return x(t),{data:t,asCSS:function(){for(var n="matrix3d(",e=0;e<15;++e)Math.abs(t[e])<1e-4?n+="0,":n+=t[e].toFixed(10)+",";return Math.abs(t[15])<1e-4?n+="0)":n+=t[15].toFixed(10)+")",n},clear:function(){x(t)},translate:function(r,a,o){return b(t,n),function(t,n,e,r){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=n,t[13]=e,t[14]=r,t[15]=1}(e,r,a,o),I(n,e,t),this},rotateX:function(r){var a,o;return b(t,n),o=r,(a=e)[0]=1,a[1]=0,a[2]=0,a[3]=0,a[4]=0,a[5]=Math.cos(o),a[6]=-Math.sin(o),a[7]=0,a[8]=0,a[9]=Math.sin(o),a[10]=Math.cos(o),a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,I(n,e,t),this},rotateY:function(r){var a,o;return b(t,n),o=r,(a=e)[0]=Math.cos(o),a[1]=0,a[2]=Math.sin(o),a[3]=0,a[4]=0,a[5]=1,a[6]=0,a[7]=0,a[8]=-Math.sin(o),a[9]=0,a[10]=Math.cos(o),a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,I(n,e,t),this},rotateZ:function(r){var a,o;return b(t,n),o=r,(a=e)[0]=Math.cos(o),a[1]=-Math.sin(o),a[2]=0,a[3]=0,a[4]=Math.sin(o),a[5]=Math.cos(o),a[6]=0,a[7]=0,a[8]=0,a[9]=0,a[10]=1,a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,I(n,e,t),this},scale:function(r,a){return b(t,n),function(t,n,e){t[0]=n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=e,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(e,r,a),I(n,e,t),this},skew:function(r,a){return b(t,n),function(t,n,e){t[0]=1,t[1]=Math.tan(n),t[2]=0,t[3]=0,t[4]=Math.tan(e),t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(e,r,a),I(n,e,t),this}}}var S=1,E=2,C=3;function P(t,a,o){if(void 0===a&&(a=[]),"number"==typeof t)return t;var i=window.innerWidth,s=window.innerHeight;return new Function("refs","el","css","min","max","'use strict';return ("+t.replace(/(\d*)vw/g,(function(t,n){return.01*n*i})).replace(/(\d*)vh/g,(function(t,n){return.01*n*s})).replace(/px/g,"")+");")(a,o,n,e,r)}var _=function t(n){var e=this;(n=o(n))?(n.dataset.scrollify,this.scenes=[],this.element=n,this.ticking=!1,this.active=!0,this.matrix=k(),this.transforms={scale:[1,1],rotation:[0,0,0],position:[0,0,0]},window.addEventListener("scroll",(function(){return e.onScroll()}),{passive:!0}),window.addEventListener("resize",(function(){return e.onResize()}),{passive:!0})):document.querySelectorAll("[data-scrollify]").forEach((function(n){return new t(n)}))};_.prototype.parseDataAttribute=function(t){var n;return n=t.dataset.scrollify,Function("'use strict';return ("+n+")")()},_.prototype.addScene=function(t){var n=this,e=this.element,r=this.transforms,s=t.start;void 0===s&&(s="0, el.top - 100vh");var u=t.end;void 0===u&&(u="el.bottom");var c=t.easing,f=t.refs;void 0===f&&(f=[]);var l=t.effects;void 0===l&&(l={});var p=!1,h=function(t,n){return Object.keys(l).reduce((function(o,i){var s,u,c,f=l[i];return a(f)?s=f:(s=g[i],c=f,u=Array.isArray(c)?f.map((function(e){return P(e,t,n)})):f),p=p||s.useMatrix,o.push(s({element:e,transforms:r,options:u})),o}),[])},d={start:0,duration:0,state:"",easing:a(c)?c:O[c],effects:[],reset:function(){var t=window.scrollY,r=i(e),a=function(t){return t.map(o).map(i)}(f),c=P(s,a,r),l=P(u,a,r),v=h(a,r);d.effects=v,d.start=c,d.duration=l-c,d.state=t>c?t>l?E:C:S,d.useMatrix=p,n.update(d)}};return d.reset(),p&&(e.style.willChange="transform"),t.debug&&console.log("Scrollify scene: ",d),this.scenes.push(d),this},_.prototype.onScroll=function(){var t=this;this.active&&window.requestAnimationFrame((function(){t.scenes.forEach((function(n){return t.update(n)}),t)}))},_.prototype.onResize=function(){this.scenes.forEach((function(t){return t.reset()}))},_.prototype.update=function(t){var n,e=t.start,r=t.duration,a=t.easing,o=t.effects,i=window.scrollY;if(i-e>r){if(t.state===E)return;t.state=E,n=1}else if(i-e<0){if(t.state===S)return;t.state=S,n=0}else t.state=C,n=a?a(i-e,0,1,r):(i-e)/r;o.forEach((function(t){return t(n)})),t.useMatrix&&(this.element.style.transform=this.updateMatrix().asCSS())},_.prototype.updateMatrix=function(){var t=this.matrix,n=this.transforms;return t.clear(),n.transformOrigin&&t.translate(-n.transformOrigin[0],-n.transformOrigin[1],-n.transformOrigin[2]),n.scale&&t.scale(n.scale[0],n.scale[1]),n.skew&&t.skew(n.skew[0],n.skew[1]),n.rotation&&(t.rotateX(n.rotation[0]),t.rotateY(n.rotation[1]),t.rotateZ(n.rotation[2])),n.position&&t.translate(n.position[0],n.position[1],n.position[2]),n.transformOrigin&&t.translate(n.transformOrigin[0],n.transformOrigin[1],n.transformOrigin[2]),t},_.prototype.disable=function(){this.active=!1};export default _;export{_ as Scrollify,O as easings,g as fx};
+var t=function(t,n,r){return(n-t)*r+t},n=function(t,n){return window.getComputedStyle(n)[t]||0},r=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.max.apply(Math,t)},e=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.min.apply(Math,t)},a=function(t){return"function"==typeof t},i=function(t){return 1===t.nodeType?t:document.querySelector(t)},o=function(t){var n=t.getBoundingClientRect();return{left:n.left+window.pageXOffset,right:n.right+window.pageXOffset,top:n.top+window.pageYOffset,bottom:n.bottom+window.pageYOffset,height:n.height,width:n.width}};function u(t,a,i){if(void 0===a&&(a=[]),"number"==typeof t)return t;var o=window.innerWidth,u=window.innerHeight;return new Function("refs","el","css","min","max","'use strict';return ("+t.replace(/(\d*)vw/g,(function(t,n){return.01*n*o})).replace(/(\d*)vh/g,(function(t,n){return.01*n*u})).replace(/px/g,"")+");")(a,i,n,r,e)}function s(n,r,e){var i,o=Object.keys(n),s=Object.values(n);return i=n,Array.isArray(i)?(n=n.map((function(t){return u(t,r,e)})),function(r){return t.apply(void 0,n.concat([r]))}):a(s[0])?function(t){var n=0;return o.forEach((function(r){return r<t&&n++})),n?s[n-1]():""}:(s=s.map((function(t){return u(t,r,e)})),function(n){return function(n,r,e){var a=0;if(n.forEach((function(t){return t<e&&a++})),0===a)return r[0];if(a>=n.length)return r[n.length-1];var i,o,u=a-1,s=(i=n[u],o=n[a],(e-i)/(o-i));return t(r[u],r[a],s)}(o,s,n)})}var c=function(t){var n=t.transforms;return function(t){return n.position[0]=t}},f=function(t){var n=t.transforms;return function(t){return n.position[1]=t}},l=function(t){var n=t.transforms;return function(t){return n.position[2]=t}},h=c,p=f,v=l,d=f,w=function(t){var n=t.transforms;return function(t){return n.rotation[2]=t}},m=w,M=function(t){var n=t.transforms;return function(t){return n.skew[0]=t}},g=M,y=Object.freeze({__proto__:null,x:c,y:f,z:l,translateX:h,translateY:p,translateZ:v,parallax:d,rotateX:function(t){var n=t.transforms;return function(t){return n.rotation[0]=t}},rotateY:function(t){var n=t.transforms;return function(t){return n.rotation[1]=t}},rotateZ:w,rotate:m,scaleX:function(t){var n=t.transforms;return function(t){return n.scale[0]=t}},scaleY:function(t){var n=t.transforms;return function(t){return n.scale[1]=t}},scale:function(t){var n=t.transforms;return function(t){return n.scale[0]=n.scale[1]=t}},skewX:M,skewY:function(t){var n=t.transforms;return function(t){return n.skew[1]=t}},skew:g,fade:function(t){var n=t.element;return function(t){n.style.opacity=t}},blur:function(t){var n=t.element;return function(t){n.style.filter="blur("+t+"px)"}},toggle:function(t){var n=t.element;return function(t){n.className=t}},stick:function(t){var n=t.element;function r(t){var r=n.__currentState;if(r!==t){if("sticky"==t){var e=n.getBoundingClientRect();n.style.top=e.top+"px",n.style.left=e.left+"px",n.style.width=e.width+"px"}else n.style.top="",n.style.left="",n.style.width="";n.classList.remove(r),n.classList.add(t),n.__currentState=t}}return function(t){r(t<=0?"normal":t>=1?"bottom":"sticky")}}});var O=Object.freeze({__proto__:null,oscillate:function(t,n,r,e){return t/=e,t=4*Math.PI*t,t=Math.sin(t)*r,(t=Math.abs(t))+n},easeInQuad:function(t,n,r,e){return r*(t/=e)*t+n},easeOutQuad:function(t,n,r,e){return-r*(t/=e)*(t-2)+n},easeInOutQuad:function(t,n,r,e){return(t/=e/2)<1?r/2*t*t+n:-r/2*(--t*(t-2)-1)+n},easeInCubic:function(t,n,r,e){return r*(t/=e)*t*t+n},easeOutCubic:function(t,n,r,e){return r*((t=t/e-1)*t*t+1)+n},easeInOutCubic:function(t,n,r,e){return(t/=e/2)<1?r/2*t*t*t+n:r/2*((t-=2)*t*t+2)+n},easeInQuart:function(t,n,r,e){return r*(t/=e)*t*t*t+n},easeOutQuart:function(t,n,r,e){return-r*((t=t/e-1)*t*t*t-1)+n},easeInOutQuart:function(t,n,r,e){return(t/=e/2)<1?r/2*t*t*t*t+n:-r/2*((t-=2)*t*t*t-2)+n},easeInQuint:function(t,n,r,e){return r*(t/=e)*t*t*t*t+n},easeOutQuint:function(t,n,r,e){return r*((t=t/e-1)*t*t*t*t+1)+n},easeInOutQuint:function(t,n,r,e){return(t/=e/2)<1?r/2*t*t*t*t*t+n:r/2*((t-=2)*t*t*t*t+2)+n},easeInSine:function(t,n,r,e){return-r*Math.cos(t/e*(Math.PI/2))+r+n},easeOutSine:function(t,n,r,e){return r*Math.sin(t/e*(Math.PI/2))+n},easeInOutSine:function(t,n,r,e){return-r/2*(Math.cos(Math.PI*t/e)-1)+n},easeInExpo:function(t,n,r,e){return 0==t?n:r*Math.pow(2,10*(t/e-1))+n},easeOutExpo:function(t,n,r,e){return t==e?n+r:r*(1-Math.pow(2,-10*t/e))+n},easeInOutExpo:function(t,n,r,e){return 0==t?n:t==e?n+r:(t/=e/2)<1?r/2*Math.pow(2,10*(t-1))+n:r/2*(2-Math.pow(2,-10*--t))+n},easeInCirc:function(t,n,r,e){return-r*(Math.sqrt(1-(t/=e)*t)-1)+n},easeOutCirc:function(t,n,r,e){return r*Math.sqrt(1-(t=t/e-1)*t)+n},easeInOutCirc:function(t,n,r,e){return(t/=e/2)<1?-r/2*(Math.sqrt(1-t*t)-1)+n:r/2*(Math.sqrt(1-(t-=2)*t)+1)+n},easeInElastic:function(t,n,r,e){var a=1.70158,i=0,o=r;if(0==t)return n;if(1==(t/=e))return n+r;if(i||(i=.3*e),o<Math.abs(r)){o=r;a=i/4}else a=i/(2*Math.PI)*Math.asin(r/o);return-o*Math.pow(2,10*(t-=1))*Math.sin((t*e-a)*(2*Math.PI)/i)+n},easeOutElastic:function(t,n,r,e){var a=1.70158,i=0,o=r;if(0==t)return n;if(1==(t/=e))return n+r;if(i||(i=.3*e),o<Math.abs(r)){o=r;a=i/4}else a=i/(2*Math.PI)*Math.asin(r/o);return o*Math.pow(2,-10*t)*Math.sin((t*e-a)*(2*Math.PI)/i)+r+n},easeInOutElastic:function(t,n,r,e){var a=1.70158,i=0,o=r;if(0==t)return n;if(2==(t/=e/2))return n+r;if(i||(i=e*(.3*1.5)),o<Math.abs(r)){o=r;a=i/4}else a=i/(2*Math.PI)*Math.asin(r/o);return t<1?o*Math.pow(2,10*(t-=1))*Math.sin((t*e-a)*(2*Math.PI)/i)*-.5+n:o*Math.pow(2,-10*(t-=1))*Math.sin((t*e-a)*(2*Math.PI)/i)*.5+r+n},easeInBack:function(t,n,r,e,a){return null==a&&(a=1.70158),r*(t/=e)*t*((a+1)*t-a)+n},easeOutBack:function(t,n,r,e,a){return null==a&&(a=1.70158),r*((t=t/e-1)*t*((a+1)*t+a)+1)+n},easeInOutBack:function(t,n,r,e,a){return null==a&&(a=1.70158),(t/=e/2)<1?r/2*(t*t*((1+(a*=1.525))*t-a))+n:r/2*((t-=2)*t*((1+(a*=1.525))*t+a)+2)+n},easeOutBounce:function(t,n,r,e){return(t/=e<1/2.75)?r*(7.5625*t*t)+n:t<2/2.75?r*(7.5625*(t-=1.5/2.75)*t+.75)+n:t<2.5/2.75?r*(7.5625*(t-=2.25/2.75)*t+.9375)+n:r*(7.5625*(t-=2.625/2.75)*t+.984375)+n}});function I(t,n,r){return r[0]=t[0]*n[0]+t[1]*n[4]+t[2]*n[8]+t[3]*n[12],r[1]=t[0]*n[1]+t[1]*n[5]+t[2]*n[9]+t[3]*n[13],r[2]=t[0]*n[2]+t[1]*n[6]+t[2]*n[10]+t[3]*n[14],r[3]=t[0]*n[3]+t[1]*n[7]+t[2]*n[11]+t[3]*n[15],r[4]=t[4]*n[0]+t[5]*n[4]+t[6]*n[8]+t[7]*n[12],r[5]=t[4]*n[1]+t[5]*n[5]+t[6]*n[9]+t[7]*n[13],r[6]=t[4]*n[2]+t[5]*n[6]+t[6]*n[10]+t[7]*n[14],r[7]=t[4]*n[3]+t[5]*n[7]+t[6]*n[11]+t[7]*n[15],r[8]=t[8]*n[0]+t[9]*n[4]+t[10]*n[8]+t[11]*n[12],r[9]=t[8]*n[1]+t[9]*n[5]+t[10]*n[9]+t[11]*n[13],r[10]=t[8]*n[2]+t[9]*n[6]+t[10]*n[10]+t[11]*n[14],r[11]=t[8]*n[3]+t[9]*n[7]+t[10]*n[11]+t[11]*n[15],r[12]=t[12]*n[0]+t[13]*n[4]+t[14]*n[8]+t[15]*n[12],r[13]=t[12]*n[1]+t[13]*n[5]+t[14]*n[9]+t[15]*n[13],r[14]=t[12]*n[2]+t[13]*n[6]+t[14]*n[10]+t[15]*n[14],r[15]=t[12]*n[3]+t[13]*n[7]+t[14]*n[11]+t[15]*n[15],r}function x(t){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}function b(t,n){n[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=t[3],n[4]=t[4],n[5]=t[5],n[6]=t[6],n[7]=t[7],n[8]=t[8],n[9]=t[9],n[10]=t[10],n[11]=t[11],n[12]=t[12],n[13]=t[13],n[14]=t[14],n[15]=t[15]}function k(){var t=new Float32Array(16),n=new Float32Array(16),r=new Float32Array(16);return x(t),{data:t,asCSS:function(){return"matrix3d("+t.toString()+")"},clear:function(){x(t)},translate:function(e,a,i){return b(t,n),function(t,n,r,e){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=n,t[13]=r,t[14]=e,t[15]=1}(r,e,a,i),I(n,r,t),this},rotateX:function(e){var a,i;return b(t,n),i=e,(a=r)[0]=1,a[1]=0,a[2]=0,a[3]=0,a[4]=0,a[5]=Math.cos(i),a[6]=-Math.sin(i),a[7]=0,a[8]=0,a[9]=Math.sin(i),a[10]=Math.cos(i),a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,I(n,r,t),this},rotateY:function(e){var a,i;return b(t,n),i=e,(a=r)[0]=Math.cos(i),a[1]=0,a[2]=Math.sin(i),a[3]=0,a[4]=0,a[5]=1,a[6]=0,a[7]=0,a[8]=-Math.sin(i),a[9]=0,a[10]=Math.cos(i),a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,I(n,r,t),this},rotateZ:function(e){var a,i;return b(t,n),i=e,(a=r)[0]=Math.cos(i),a[1]=-Math.sin(i),a[2]=0,a[3]=0,a[4]=Math.sin(i),a[5]=Math.cos(i),a[6]=0,a[7]=0,a[8]=0,a[9]=0,a[10]=1,a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,I(n,r,t),this},scale:function(e,a){return b(t,n),function(t,n,r){t[0]=n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=r,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(r,e,a),I(n,r,t),this},skew:function(e,a){return b(t,n),function(t,n,r){t[0]=1,t[1]=Math.tan(n),t[2]=0,t[3]=0,t[4]=Math.tan(r),t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(r,e,a),I(n,r,t),this}}}var S="before",E="after",_="active",Y=[],A={scrollX:0,scrollY:0,windowWidth:0,windowHeight:0},C=!1,X=function t(n){var r,e=this;if(!n)return document.querySelectorAll("[data-scrollify]").forEach((function(n){return new t(n)}));if(n=i(n),C||(C=!0,window.addEventListener("scroll",(function(){return e.onScroll()}),{passive:!0}),window.addEventListener("resize",(function(){return e.onResize()}),{passive:!0})),this.element=n,this.active=!0,n.dataset.scrollify){var a=(r=n.dataset.scrollify,new Function("'use strict';return ("+r+")")());this.addScene(a)}};X.prototype.onScroll=function(){this.active&&(A.scrollY=window.scrollY||window.pageYOffset,A.scrollX=window.scrollX||window.pageXOffset,Y.forEach(this.update,this))},X.prototype.onResize=function(){Y.forEach((function(t){return t.reset()}))},X.prototype.update=function(t){var n,r=this,e=t.start,a=t.duration,i=t.easing,o=t.effects,u=A.scrollY;if(u-e>a){if(t.state===E)return;t.state=E,n=1}else if(u-e<0){if(t.state===S)return;t.state=S,n=0}else t.state=_,n=i?i(u-e,0,1,a):(u-e)/a;window.requestAnimationFrame((function(){o.forEach((function(t){return t(n)})),t._useMatrix&&(t.element.style.transform=r.updateMatrix(t).asCSS())}))},X.prototype.addScene=function(t){var n,r=this,e=t.start;void 0===e&&(e="el.top - 100vh");var s=t.end;void 0===s&&(s="el.bottom");var c=t.easing,f=t.refs;void 0===f&&(f=[]);var l=t.effects;void 0===l&&(l={});var h=this.element,p={element:h,matrix:k(),transforms:(n={},n.scale=[1,1],n.rotation=[0,0,0],n.position=[0,0,0],n.skew=[0,0],n),start:0,duration:0,state:"",easing:a(c)?c:O[c],effects:[],reset:function(){var t=window.scrollY,n=o(h),a=function(t){return t.map(i).map(o)}(f),c=u(e,a,n),v=u(s,a,n);p.effects=r.calculateEffects.call(p,l,a,n),p.start=c,p.duration=v-c,p.state=t>c?t>v?E:_:S,r.update(p)}};p.reset(),Y.push(p),p._useMatrix&&(h.style.willChange="transform"),t.debug&&console.log("Scrollify scene: ",p)},X.prototype.calculateEffects=function(t,n,r){var e=this,i=this.element,o=this.transforms;return Object.keys(t).reduce((function(u,c){var f,l,h=t[c];if(a(h))l=h({element:i,transforms:o}),f=function(t){return t};else{l=y[c]({element:i,transforms:o}),f=s(h,n,r);var p=new RegExp("(?<scale>scale)|(?<position>x|y|z)|(?<rotation>rotate)|(?<skew>skew)/i").exec(c),v=p&&Object.keys(p.groups).filter((function(t){return p.groups[t]})).toString();l&&v&&(o[v].isActive=e._useMatrix=!0)}return u.push((function(t){return l(f(t))})),u}),[])},X.prototype.updateMatrix=function(t){var n=t.matrix,r=t.transforms;return n.clear(),r.transformOrigin&&n.translate(-r.transformOrigin[0],-r.transformOrigin[1],-r.transformOrigin[2]),r.scale.isActive&&n.scale(r.scale[0],r.scale[1]),r.skew.isActive&&n.skew(r.skew[0],r.skew[1]),r.rotation.isActive&&(n.rotateX(r.rotation[0]),n.rotateY(r.rotation[1]),n.rotateZ(r.rotation[2])),r.position.isActive&&n.translate(r.position[0],r.position[1],r.position[2]),r.transformOrigin&&n.translate(r.transformOrigin[0],r.transformOrigin[1],r.transformOrigin[2]),n},X.prototype.disable=function(){this.active=!1};export default X;export{X as Scrollify,O as easings,y as fx};

dist/scrollify.js

@@ -8,2 +8,2 @@ /*!
  */
-var Scrollify=function(t){"use strict";var n=function(t,n,e){return(n-t)*e+t},e=function(t,n){return window.getComputedStyle(n)[t]||0},r=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.max.apply(Math,t)},o=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.min.apply(Math,t)},a=function(t){return"function"==typeof t},i=function(t){return 1===t.nodeType?t:document.querySelector(t)},s=function(t){var n=t.getBoundingClientRect();return{left:n.left+window.pageXOffset,right:n.right+window.pageXOffset,top:n.top+window.pageYOffset,bottom:n.bottom+window.pageYOffset,height:n.height,width:n.width}},u=function(t){var e=t.transforms,r=t.options;return function(t){e.position[0]=n.apply(void 0,r.concat([t]))}},c=function(t){var e=t.transforms,r=t.options;return function(t){e.position[1]=n.apply(void 0,r.concat([t]))}},f=c,l=function(t){var e=t.transforms,r=t.options;return function(t){e.rotation[0]=n.apply(void 0,r.concat([t]))}},p=function(t){var e=t.transforms,r=t.options;return function(t){e.rotation[1]=n.apply(void 0,r.concat([t]))}},h=function(t){var e=t.transforms,r=t.options;return function(t){e.rotation[2]=n.apply(void 0,r.concat([t]))}},d=h,v=function(t){var e=t.transforms,r=t.options;return function(t){e.scale[0]=n.apply(void 0,r.concat([t]))}},M=function(t){var e=t.transforms,r=t.options;return void 0===r&&(r=[e.scale[1],1]),function(t){e.scale[1]=n.apply(void 0,r.concat([t]))}},w=function(t){var e=t.transforms,r=t.options;return function(t){e.scale[0]=e.scale[1]=n.apply(void 0,r.concat([t]))}},y=function(t){var e=t.transforms,r=t.options;return function(t){e.skew[0]=n.apply(void 0,r.concat([t]))}},m=function(t){var e=t.transforms,r=t.options;return function(t){e.skew[1]=n.apply(void 0,r.concat([t]))}},g=function(t){var e=t.transforms,r=t.options;return function(t){e.skew[0]=e.skew[1]=n.apply(void 0,r.concat([t]))}};[u,c,l,p,h,w,v,M,g,y,m].forEach((function(t){Object.defineProperty(t,"useMatrix",{value:!0})}));var O=Object.freeze({__proto__:null,translateX:u,translateY:c,parallax:f,rotateX:l,rotateY:p,rotateZ:h,rotate:d,scaleX:v,scaleY:M,scale:w,skewX:y,skewY:m,skew:g,fade:function(t){var e=t.element,r=t.options;return function(t){e.style.opacity=n.apply(void 0,r.concat([t]))}},blur:function(t){var e=t.element,r=t.options;return function(t){e.style.filter="blur("+n.apply(void 0,r.concat([t]))+"px)"}},toggle:function(t){var n=t.element,e=t.options,r=Object.keys(e);return function(t){r.forEach((function(r){var o=e[r];n.classList.toggle(o,t>+r)}))}},stick:function(t){var n=t.element;function e(t){var e=n.__currentState;if(e!==t){if("sticky"==t){var r=n.getBoundingClientRect();n.style.top=r.top+"px",n.style.left=r.left+"px",n.style.width=r.width+"px"}else n.style.top="",n.style.left="",n.style.width="";n.classList.remove(e),n.classList.add(t),n.__currentState=t}}return function(t){e(t<=0?"normal":t>=1?"bottom":"sticky")}}});var I=Object.freeze({__proto__:null,oscillate:function(t,n,e,r){return t/=r,t=4*Math.PI*t,t=Math.sin(t)*e,(t=Math.abs(t))+n},easeInQuad:function(t,n,e,r){return e*(t/=r)*t+n},easeOutQuad:function(t,n,e,r){return-e*(t/=r)*(t-2)+n},easeInOutQuad:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t+n:-e/2*(--t*(t-2)-1)+n},easeInCubic:function(t,n,e,r){return e*(t/=r)*t*t+n},easeOutCubic:function(t,n,e,r){return e*((t=t/r-1)*t*t+1)+n},easeInOutCubic:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t+n:e/2*((t-=2)*t*t+2)+n},easeInQuart:function(t,n,e,r){return e*(t/=r)*t*t*t+n},easeOutQuart:function(t,n,e,r){return-e*((t=t/r-1)*t*t*t-1)+n},easeInOutQuart:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t+n:-e/2*((t-=2)*t*t*t-2)+n},easeInQuint:function(t,n,e,r){return e*(t/=r)*t*t*t*t+n},easeOutQuint:function(t,n,e,r){return e*((t=t/r-1)*t*t*t*t+1)+n},easeInOutQuint:function(t,n,e,r){return(t/=r/2)<1?e/2*t*t*t*t*t+n:e/2*((t-=2)*t*t*t*t+2)+n},easeInSine:function(t,n,e,r){return-e*Math.cos(t/r*(Math.PI/2))+e+n},easeOutSine:function(t,n,e,r){return e*Math.sin(t/r*(Math.PI/2))+n},easeInOutSine:function(t,n,e,r){return-e/2*(Math.cos(Math.PI*t/r)-1)+n},easeInExpo:function(t,n,e,r){return 0==t?n:e*Math.pow(2,10*(t/r-1))+n},easeOutExpo:function(t,n,e,r){return t==r?n+e:e*(1-Math.pow(2,-10*t/r))+n},easeInOutExpo:function(t,n,e,r){return 0==t?n:t==r?n+e:(t/=r/2)<1?e/2*Math.pow(2,10*(t-1))+n:e/2*(2-Math.pow(2,-10*--t))+n},easeInCirc:function(t,n,e,r){return-e*(Math.sqrt(1-(t/=r)*t)-1)+n},easeOutCirc:function(t,n,e,r){return e*Math.sqrt(1-(t=t/r-1)*t)+n},easeInOutCirc:function(t,n,e,r){return(t/=r/2)<1?-e/2*(Math.sqrt(1-t*t)-1)+n:e/2*(Math.sqrt(1-(t-=2)*t)+1)+n},easeInElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(a||(a=.3*r),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return-i*Math.pow(2,10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)+n},easeOutElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(1==(t/=r))return n+e;if(a||(a=.3*r),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return i*Math.pow(2,-10*t)*Math.sin((t*r-o)*(2*Math.PI)/a)+e+n},easeInOutElastic:function(t,n,e,r){var o=1.70158,a=0,i=e;if(0==t)return n;if(2==(t/=r/2))return n+e;if(a||(a=r*(.3*1.5)),i<Math.abs(e)){i=e;o=a/4}else o=a/(2*Math.PI)*Math.asin(e/i);return t<1?i*Math.pow(2,10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)*-.5+n:i*Math.pow(2,-10*(t-=1))*Math.sin((t*r-o)*(2*Math.PI)/a)*.5+e+n},easeInBack:function(t,n,e,r,o){return null==o&&(o=1.70158),e*(t/=r)*t*((o+1)*t-o)+n},easeOutBack:function(t,n,e,r,o){return null==o&&(o=1.70158),e*((t=t/r-1)*t*((o+1)*t+o)+1)+n},easeInOutBack:function(t,n,e,r,o){return null==o&&(o=1.70158),(t/=r/2)<1?e/2*(t*t*((1+(o*=1.525))*t-o))+n:e/2*((t-=2)*t*((1+(o*=1.525))*t+o)+2)+n},easeOutBounce:function(t,n,e,r){return(t/=r<1/2.75)?e*(7.5625*t*t)+n:t<2/2.75?e*(7.5625*(t-=1.5/2.75)*t+.75)+n:t<2.5/2.75?e*(7.5625*(t-=2.25/2.75)*t+.9375)+n:e*(7.5625*(t-=2.625/2.75)*t+.984375)+n}});function b(t,n,e){return e[0]=t[0]*n[0]+t[1]*n[4]+t[2]*n[8]+t[3]*n[12],e[1]=t[0]*n[1]+t[1]*n[5]+t[2]*n[9]+t[3]*n[13],e[2]=t[0]*n[2]+t[1]*n[6]+t[2]*n[10]+t[3]*n[14],e[3]=t[0]*n[3]+t[1]*n[7]+t[2]*n[11]+t[3]*n[15],e[4]=t[4]*n[0]+t[5]*n[4]+t[6]*n[8]+t[7]*n[12],e[5]=t[4]*n[1]+t[5]*n[5]+t[6]*n[9]+t[7]*n[13],e[6]=t[4]*n[2]+t[5]*n[6]+t[6]*n[10]+t[7]*n[14],e[7]=t[4]*n[3]+t[5]*n[7]+t[6]*n[11]+t[7]*n[15],e[8]=t[8]*n[0]+t[9]*n[4]+t[10]*n[8]+t[11]*n[12],e[9]=t[8]*n[1]+t[9]*n[5]+t[10]*n[9]+t[11]*n[13],e[10]=t[8]*n[2]+t[9]*n[6]+t[10]*n[10]+t[11]*n[14],e[11]=t[8]*n[3]+t[9]*n[7]+t[10]*n[11]+t[11]*n[15],e[12]=t[12]*n[0]+t[13]*n[4]+t[14]*n[8]+t[15]*n[12],e[13]=t[12]*n[1]+t[13]*n[5]+t[14]*n[9]+t[15]*n[13],e[14]=t[12]*n[2]+t[13]*n[6]+t[14]*n[10]+t[15]*n[14],e[15]=t[12]*n[3]+t[13]*n[7]+t[14]*n[11]+t[15]*n[15],e}function x(t){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}function k(t,n){n[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=t[3],n[4]=t[4],n[5]=t[5],n[6]=t[6],n[7]=t[7],n[8]=t[8],n[9]=t[9],n[10]=t[10],n[11]=t[11],n[12]=t[12],n[13]=t[13],n[14]=t[14],n[15]=t[15]}function S(){var t=new Float32Array(16),n=new Float32Array(16),e=new Float32Array(16);return x(t),{data:t,asCSS:function(){for(var n="matrix3d(",e=0;e<15;++e)Math.abs(t[e])<1e-4?n+="0,":n+=t[e].toFixed(10)+",";return Math.abs(t[15])<1e-4?n+="0)":n+=t[15].toFixed(10)+")",n},clear:function(){x(t)},translate:function(r,o,a){return k(t,n),function(t,n,e,r){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=n,t[13]=e,t[14]=r,t[15]=1}(e,r,o,a),b(n,e,t),this},rotateX:function(r){var o,a;return k(t,n),a=r,(o=e)[0]=1,o[1]=0,o[2]=0,o[3]=0,o[4]=0,o[5]=Math.cos(a),o[6]=-Math.sin(a),o[7]=0,o[8]=0,o[9]=Math.sin(a),o[10]=Math.cos(a),o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,b(n,e,t),this},rotateY:function(r){var o,a;return k(t,n),a=r,(o=e)[0]=Math.cos(a),o[1]=0,o[2]=Math.sin(a),o[3]=0,o[4]=0,o[5]=1,o[6]=0,o[7]=0,o[8]=-Math.sin(a),o[9]=0,o[10]=Math.cos(a),o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,b(n,e,t),this},rotateZ:function(r){var o,a;return k(t,n),a=r,(o=e)[0]=Math.cos(a),o[1]=-Math.sin(a),o[2]=0,o[3]=0,o[4]=Math.sin(a),o[5]=Math.cos(a),o[6]=0,o[7]=0,o[8]=0,o[9]=0,o[10]=1,o[11]=0,o[12]=0,o[13]=0,o[14]=0,o[15]=1,b(n,e,t),this},scale:function(r,o){return k(t,n),function(t,n,e){t[0]=n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=e,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(e,r,o),b(n,e,t),this},skew:function(r,o){return k(t,n),function(t,n,e){t[0]=1,t[1]=Math.tan(n),t[2]=0,t[3]=0,t[4]=Math.tan(e),t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(e,r,o),b(n,e,t),this}}}var E="transform",_=1,P=2,C=3;function Y(t,n,a){if(void 0===n&&(n=[]),"number"==typeof t)return t;var i=window.innerWidth,s=window.innerHeight;return new Function("refs","el","css","min","max","'use strict';return ("+t.replace(/(\d*)vw/g,(function(t,n){return.01*n*i})).replace(/(\d*)vh/g,(function(t,n){return.01*n*s})).replace(/px/g,"")+");")(n,a,e,r,o)}var Q=function t(n){var e=this;(n=i(n))?(n.dataset.scrollify,this.scenes=[],this.element=n,this.ticking=!1,this.active=!0,this.matrix=S(),this.transforms={scale:[1,1],rotation:[0,0,0],position:[0,0,0]},window.addEventListener("scroll",(function(){return e.onScroll()}),{passive:!0}),window.addEventListener("resize",(function(){return e.onResize()}),{passive:!0})):document.querySelectorAll("[data-scrollify]").forEach((function(n){return new t(n)}))};return Q.prototype.parseDataAttribute=function(t){var n;return n=t.dataset.scrollify,Function("'use strict';return ("+n+")")()},Q.prototype.addScene=function(t){var n=this,e=this.element,r=this.transforms,o=t.start;void 0===o&&(o="0, el.top - 100vh");var u=t.end;void 0===u&&(u="el.bottom");var c=t.easing,f=t.refs;void 0===f&&(f=[]);var l=t.effects;void 0===l&&(l={});var p=!1,h=function(t,n){return Object.keys(l).reduce((function(o,i){var s,u,c,f=l[i];return a(f)?s=f:(s=O[i],c=f,u=Array.isArray(c)?f.map((function(e){return Y(e,t,n)})):f),p=p||s.useMatrix,o.push(s({element:e,transforms:r,options:u})),o}),[])},d={start:0,duration:0,state:"",easing:a(c)?c:I[c],effects:[],reset:function(){var t=window.scrollY,r=s(e),a=function(t){return t.map(i).map(s)}(f),c=Y(o,a,r),l=Y(u,a,r),v=h(a,r);d.effects=v,d.start=c,d.duration=l-c,d.state=t>c?t>l?P:C:_,d.useMatrix=p,n.update(d)}};return d.reset(),p&&(e.style.willChange=E),t.debug&&console.log("Scrollify scene: ",d),this.scenes.push(d),this},Q.prototype.onScroll=function(){var t=this;this.active&&window.requestAnimationFrame((function(){t.scenes.forEach((function(n){return t.update(n)}),t)}))},Q.prototype.onResize=function(){this.scenes.forEach((function(t){return t.reset()}))},Q.prototype.update=function(t){var n,e=t.start,r=t.duration,o=t.easing,a=t.effects,i=window.scrollY;if(i-e>r){if(t.state===P)return;t.state=P,n=1}else if(i-e<0){if(t.state===_)return;t.state=_,n=0}else t.state=C,n=o?o(i-e,0,1,r):(i-e)/r;a.forEach((function(t){return t(n)})),t.useMatrix&&(this.element.style.transform=this.updateMatrix().asCSS())},Q.prototype.updateMatrix=function(){var t=this.matrix,n=this.transforms;return t.clear(),n.transformOrigin&&t.translate(-n.transformOrigin[0],-n.transformOrigin[1],-n.transformOrigin[2]),n.scale&&t.scale(n.scale[0],n.scale[1]),n.skew&&t.skew(n.skew[0],n.skew[1]),n.rotation&&(t.rotateX(n.rotation[0]),t.rotateY(n.rotation[1]),t.rotateZ(n.rotation[2])),n.position&&t.translate(n.position[0],n.position[1],n.position[2]),n.transformOrigin&&t.translate(n.transformOrigin[0],n.transformOrigin[1],n.transformOrigin[2]),t},Q.prototype.disable=function(){this.active=!1},t.Scrollify=Q,t.default=Q,t.easings=I,t.fx=O,Object.defineProperty(t,"__esModule",{value:!0}),t}({});
+var Scrollify=function(t){"use strict";var n=function(t,n,r){return(n-t)*r+t},r=function(t,n){return window.getComputedStyle(n)[t]||0},e=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.max.apply(Math,t)},a=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return Math.min.apply(Math,t)},i=function(t){return"function"==typeof t},o=function(t){return 1===t.nodeType?t:document.querySelector(t)},u=function(t){var n=t.getBoundingClientRect();return{left:n.left+window.pageXOffset,right:n.right+window.pageXOffset,top:n.top+window.pageYOffset,bottom:n.bottom+window.pageYOffset,height:n.height,width:n.width}};function s(t,n,i){if(void 0===n&&(n=[]),"number"==typeof t)return t;var o=window.innerWidth,u=window.innerHeight;return new Function("refs","el","css","min","max","'use strict';return ("+t.replace(/(\d*)vw/g,(function(t,n){return.01*n*o})).replace(/(\d*)vh/g,(function(t,n){return.01*n*u})).replace(/px/g,"")+");")(n,i,r,e,a)}function c(t,r,e){var a,o=Object.keys(t),u=Object.values(t);return a=t,Array.isArray(a)?(t=t.map((function(t){return s(t,r,e)})),function(r){return n.apply(void 0,t.concat([r]))}):i(u[0])?function(t){var n=0;return o.forEach((function(r){return r<t&&n++})),n?u[n-1]():""}:(u=u.map((function(t){return s(t,r,e)})),function(t){return function(t,r,e){var a=0;if(t.forEach((function(t){return t<e&&a++})),0===a)return r[0];if(a>=t.length)return r[t.length-1];var i,o,u=a-1,s=(i=t[u],o=t[a],(e-i)/(o-i));return n(r[u],r[a],s)}(o,u,t)})}var f=function(t){var n=t.transforms;return function(t){return n.position[0]=t}},l=function(t){var n=t.transforms;return function(t){return n.position[1]=t}},h=function(t){var n=t.transforms;return function(t){return n.position[2]=t}},p=f,v=l,d=h,w=l,M=function(t){var n=t.transforms;return function(t){return n.rotation[2]=t}},m=M,g=function(t){var n=t.transforms;return function(t){return n.skew[0]=t}},y=g,O=Object.freeze({__proto__:null,x:f,y:l,z:h,translateX:p,translateY:v,translateZ:d,parallax:w,rotateX:function(t){var n=t.transforms;return function(t){return n.rotation[0]=t}},rotateY:function(t){var n=t.transforms;return function(t){return n.rotation[1]=t}},rotateZ:M,rotate:m,scaleX:function(t){var n=t.transforms;return function(t){return n.scale[0]=t}},scaleY:function(t){var n=t.transforms;return function(t){return n.scale[1]=t}},scale:function(t){var n=t.transforms;return function(t){return n.scale[0]=n.scale[1]=t}},skewX:g,skewY:function(t){var n=t.transforms;return function(t){return n.skew[1]=t}},skew:y,fade:function(t){var n=t.element;return function(t){n.style.opacity=t}},blur:function(t){var n=t.element;return function(t){n.style.filter="blur("+t+"px)"}},toggle:function(t){var n=t.element;return function(t){n.className=t}},stick:function(t){var n=t.element;function r(t){var r=n.__currentState;if(r!==t){if("sticky"==t){var e=n.getBoundingClientRect();n.style.top=e.top+"px",n.style.left=e.left+"px",n.style.width=e.width+"px"}else n.style.top="",n.style.left="",n.style.width="";n.classList.remove(r),n.classList.add(t),n.__currentState=t}}return function(t){r(t<=0?"normal":t>=1?"bottom":"sticky")}}});var I=Object.freeze({__proto__:null,oscillate:function(t,n,r,e){return t/=e,t=4*Math.PI*t,t=Math.sin(t)*r,(t=Math.abs(t))+n},easeInQuad:function(t,n,r,e){return r*(t/=e)*t+n},easeOutQuad:function(t,n,r,e){return-r*(t/=e)*(t-2)+n},easeInOutQuad:function(t,n,r,e){return(t/=e/2)<1?r/2*t*t+n:-r/2*(--t*(t-2)-1)+n},easeInCubic:function(t,n,r,e){return r*(t/=e)*t*t+n},easeOutCubic:function(t,n,r,e){return r*((t=t/e-1)*t*t+1)+n},easeInOutCubic:function(t,n,r,e){return(t/=e/2)<1?r/2*t*t*t+n:r/2*((t-=2)*t*t+2)+n},easeInQuart:function(t,n,r,e){return r*(t/=e)*t*t*t+n},easeOutQuart:function(t,n,r,e){return-r*((t=t/e-1)*t*t*t-1)+n},easeInOutQuart:function(t,n,r,e){return(t/=e/2)<1?r/2*t*t*t*t+n:-r/2*((t-=2)*t*t*t-2)+n},easeInQuint:function(t,n,r,e){return r*(t/=e)*t*t*t*t+n},easeOutQuint:function(t,n,r,e){return r*((t=t/e-1)*t*t*t*t+1)+n},easeInOutQuint:function(t,n,r,e){return(t/=e/2)<1?r/2*t*t*t*t*t+n:r/2*((t-=2)*t*t*t*t+2)+n},easeInSine:function(t,n,r,e){return-r*Math.cos(t/e*(Math.PI/2))+r+n},easeOutSine:function(t,n,r,e){return r*Math.sin(t/e*(Math.PI/2))+n},easeInOutSine:function(t,n,r,e){return-r/2*(Math.cos(Math.PI*t/e)-1)+n},easeInExpo:function(t,n,r,e){return 0==t?n:r*Math.pow(2,10*(t/e-1))+n},easeOutExpo:function(t,n,r,e){return t==e?n+r:r*(1-Math.pow(2,-10*t/e))+n},easeInOutExpo:function(t,n,r,e){return 0==t?n:t==e?n+r:(t/=e/2)<1?r/2*Math.pow(2,10*(t-1))+n:r/2*(2-Math.pow(2,-10*--t))+n},easeInCirc:function(t,n,r,e){return-r*(Math.sqrt(1-(t/=e)*t)-1)+n},easeOutCirc:function(t,n,r,e){return r*Math.sqrt(1-(t=t/e-1)*t)+n},easeInOutCirc:function(t,n,r,e){return(t/=e/2)<1?-r/2*(Math.sqrt(1-t*t)-1)+n:r/2*(Math.sqrt(1-(t-=2)*t)+1)+n},easeInElastic:function(t,n,r,e){var a=1.70158,i=0,o=r;if(0==t)return n;if(1==(t/=e))return n+r;if(i||(i=.3*e),o<Math.abs(r)){o=r;a=i/4}else a=i/(2*Math.PI)*Math.asin(r/o);return-o*Math.pow(2,10*(t-=1))*Math.sin((t*e-a)*(2*Math.PI)/i)+n},easeOutElastic:function(t,n,r,e){var a=1.70158,i=0,o=r;if(0==t)return n;if(1==(t/=e))return n+r;if(i||(i=.3*e),o<Math.abs(r)){o=r;a=i/4}else a=i/(2*Math.PI)*Math.asin(r/o);return o*Math.pow(2,-10*t)*Math.sin((t*e-a)*(2*Math.PI)/i)+r+n},easeInOutElastic:function(t,n,r,e){var a=1.70158,i=0,o=r;if(0==t)return n;if(2==(t/=e/2))return n+r;if(i||(i=e*(.3*1.5)),o<Math.abs(r)){o=r;a=i/4}else a=i/(2*Math.PI)*Math.asin(r/o);return t<1?o*Math.pow(2,10*(t-=1))*Math.sin((t*e-a)*(2*Math.PI)/i)*-.5+n:o*Math.pow(2,-10*(t-=1))*Math.sin((t*e-a)*(2*Math.PI)/i)*.5+r+n},easeInBack:function(t,n,r,e,a){return null==a&&(a=1.70158),r*(t/=e)*t*((a+1)*t-a)+n},easeOutBack:function(t,n,r,e,a){return null==a&&(a=1.70158),r*((t=t/e-1)*t*((a+1)*t+a)+1)+n},easeInOutBack:function(t,n,r,e,a){return null==a&&(a=1.70158),(t/=e/2)<1?r/2*(t*t*((1+(a*=1.525))*t-a))+n:r/2*((t-=2)*t*((1+(a*=1.525))*t+a)+2)+n},easeOutBounce:function(t,n,r,e){return(t/=e<1/2.75)?r*(7.5625*t*t)+n:t<2/2.75?r*(7.5625*(t-=1.5/2.75)*t+.75)+n:t<2.5/2.75?r*(7.5625*(t-=2.25/2.75)*t+.9375)+n:r*(7.5625*(t-=2.625/2.75)*t+.984375)+n}});function b(t,n,r){return r[0]=t[0]*n[0]+t[1]*n[4]+t[2]*n[8]+t[3]*n[12],r[1]=t[0]*n[1]+t[1]*n[5]+t[2]*n[9]+t[3]*n[13],r[2]=t[0]*n[2]+t[1]*n[6]+t[2]*n[10]+t[3]*n[14],r[3]=t[0]*n[3]+t[1]*n[7]+t[2]*n[11]+t[3]*n[15],r[4]=t[4]*n[0]+t[5]*n[4]+t[6]*n[8]+t[7]*n[12],r[5]=t[4]*n[1]+t[5]*n[5]+t[6]*n[9]+t[7]*n[13],r[6]=t[4]*n[2]+t[5]*n[6]+t[6]*n[10]+t[7]*n[14],r[7]=t[4]*n[3]+t[5]*n[7]+t[6]*n[11]+t[7]*n[15],r[8]=t[8]*n[0]+t[9]*n[4]+t[10]*n[8]+t[11]*n[12],r[9]=t[8]*n[1]+t[9]*n[5]+t[10]*n[9]+t[11]*n[13],r[10]=t[8]*n[2]+t[9]*n[6]+t[10]*n[10]+t[11]*n[14],r[11]=t[8]*n[3]+t[9]*n[7]+t[10]*n[11]+t[11]*n[15],r[12]=t[12]*n[0]+t[13]*n[4]+t[14]*n[8]+t[15]*n[12],r[13]=t[12]*n[1]+t[13]*n[5]+t[14]*n[9]+t[15]*n[13],r[14]=t[12]*n[2]+t[13]*n[6]+t[14]*n[10]+t[15]*n[14],r[15]=t[12]*n[3]+t[13]*n[7]+t[14]*n[11]+t[15]*n[15],r}function x(t){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}function k(t,n){n[0]=t[0],n[1]=t[1],n[2]=t[2],n[3]=t[3],n[4]=t[4],n[5]=t[5],n[6]=t[6],n[7]=t[7],n[8]=t[8],n[9]=t[9],n[10]=t[10],n[11]=t[11],n[12]=t[12],n[13]=t[13],n[14]=t[14],n[15]=t[15]}function S(){var t=new Float32Array(16),n=new Float32Array(16),r=new Float32Array(16);return x(t),{data:t,asCSS:function(){return"matrix3d("+t.toString()+")"},clear:function(){x(t)},translate:function(e,a,i){return k(t,n),function(t,n,r,e){t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=n,t[13]=r,t[14]=e,t[15]=1}(r,e,a,i),b(n,r,t),this},rotateX:function(e){var a,i;return k(t,n),i=e,(a=r)[0]=1,a[1]=0,a[2]=0,a[3]=0,a[4]=0,a[5]=Math.cos(i),a[6]=-Math.sin(i),a[7]=0,a[8]=0,a[9]=Math.sin(i),a[10]=Math.cos(i),a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,b(n,r,t),this},rotateY:function(e){var a,i;return k(t,n),i=e,(a=r)[0]=Math.cos(i),a[1]=0,a[2]=Math.sin(i),a[3]=0,a[4]=0,a[5]=1,a[6]=0,a[7]=0,a[8]=-Math.sin(i),a[9]=0,a[10]=Math.cos(i),a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,b(n,r,t),this},rotateZ:function(e){var a,i;return k(t,n),i=e,(a=r)[0]=Math.cos(i),a[1]=-Math.sin(i),a[2]=0,a[3]=0,a[4]=Math.sin(i),a[5]=Math.cos(i),a[6]=0,a[7]=0,a[8]=0,a[9]=0,a[10]=1,a[11]=0,a[12]=0,a[13]=0,a[14]=0,a[15]=1,b(n,r,t),this},scale:function(e,a){return k(t,n),function(t,n,r){t[0]=n,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=r,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(r,e,a),b(n,r,t),this},skew:function(e,a){return k(t,n),function(t,n,r){t[0]=1,t[1]=Math.tan(n),t[2]=0,t[3]=0,t[4]=Math.tan(r),t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1}(r,e,a),b(n,r,t),this}}}var E="before",_="after",Y="active",A=[],C={scrollX:0,scrollY:0,windowWidth:0,windowHeight:0},P=!1,X=function t(n){var r,e=this;if(!n)return document.querySelectorAll("[data-scrollify]").forEach((function(n){return new t(n)}));if(n=o(n),P||(P=!0,window.addEventListener("scroll",(function(){return e.onScroll()}),{passive:!0}),window.addEventListener("resize",(function(){return e.onResize()}),{passive:!0})),this.element=n,this.active=!0,n.dataset.scrollify){var a=(r=n.dataset.scrollify,new Function("'use strict';return ("+r+")")());this.addScene(a)}};return X.prototype.onScroll=function(){this.active&&(C.scrollY=window.scrollY||window.pageYOffset,C.scrollX=window.scrollX||window.pageXOffset,A.forEach(this.update,this))},X.prototype.onResize=function(){A.forEach((function(t){return t.reset()}))},X.prototype.update=function(t){var n,r=this,e=t.start,a=t.duration,i=t.easing,o=t.effects,u=C.scrollY;if(u-e>a){if(t.state===_)return;t.state=_,n=1}else if(u-e<0){if(t.state===E)return;t.state=E,n=0}else t.state=Y,n=i?i(u-e,0,1,a):(u-e)/a;window.requestAnimationFrame((function(){o.forEach((function(t){return t(n)})),t._useMatrix&&(t.element.style.transform=r.updateMatrix(t).asCSS())}))},X.prototype.addScene=function(t){var n,r=this,e=t.start;void 0===e&&(e="el.top - 100vh");var a=t.end;void 0===a&&(a="el.bottom");var c=t.easing,f=t.refs;void 0===f&&(f=[]);var l=t.effects;void 0===l&&(l={});var h=this.element,p={element:h,matrix:S(),transforms:(n={},n.scale=[1,1],n.rotation=[0,0,0],n.position=[0,0,0],n.skew=[0,0],n),start:0,duration:0,state:"",easing:i(c)?c:I[c],effects:[],reset:function(){var t=window.scrollY,n=u(h),i=function(t){return t.map(o).map(u)}(f),c=s(e,i,n),v=s(a,i,n);p.effects=r.calculateEffects.call(p,l,i,n),p.start=c,p.duration=v-c,p.state=t>c?t>v?_:Y:E,r.update(p)}};p.reset(),A.push(p),p._useMatrix&&(h.style.willChange="transform"),t.debug&&console.log("Scrollify scene: ",p)},X.prototype.calculateEffects=function(t,n,r){var e=this,a=this.element,o=this.transforms;return Object.keys(t).reduce((function(u,s){var f,l,h=t[s];if(i(h))l=h({element:a,transforms:o}),f=function(t){return t};else{l=O[s]({element:a,transforms:o}),f=c(h,n,r);var p=new RegExp("(?<scale>scale)|(?<position>x|y|z)|(?<rotation>rotate)|(?<skew>skew)/i").exec(s),v=p&&Object.keys(p.groups).filter((function(t){return p.groups[t]})).toString();l&&v&&(o[v].isActive=e._useMatrix=!0)}return u.push((function(t){return l(f(t))})),u}),[])},X.prototype.updateMatrix=function(t){var n=t.matrix,r=t.transforms;return n.clear(),r.transformOrigin&&n.translate(-r.transformOrigin[0],-r.transformOrigin[1],-r.transformOrigin[2]),r.scale.isActive&&n.scale(r.scale[0],r.scale[1]),r.skew.isActive&&n.skew(r.skew[0],r.skew[1]),r.rotation.isActive&&(n.rotateX(r.rotation[0]),n.rotateY(r.rotation[1]),n.rotateZ(r.rotation[2])),r.position.isActive&&n.translate(r.position[0],r.position[1],r.position[2]),r.transformOrigin&&n.translate(r.transformOrigin[0],r.transformOrigin[1],r.transformOrigin[2]),n},X.prototype.disable=function(){this.active=!1},t.Scrollify=X,t.default=X,t.easings=I,t.fx=O,Object.defineProperty(t,"__esModule",{value:!0}),t}({});

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "1.0.3-alpha",
+  "version": "1.0.4-alpha",
   "description": "A simple thing for triggering 'them scroll effects that everybody loves",
@@ -8,0 +8,0 @@ "homepage": "https://github.com/apathetic/scrollify",

src/effects.js

@@ -18,29 +18,26 @@ /**
 
-import { lerp } from './utils';
+// const rad = Math.PI / 180
+// export const transforms = ['x', 'y', 'z', 'scale', 'scaleX', 'scaleY', 'rotate', 'rotateX',
+//                             'rotateY', 'rotateZ', 'skew', 'skewX', 'skewY'];
+// const keywords = ["borderRadius", "bottom", "fontSize", "fontWeight", "height", "left", "lineHeight",
+//                   "marginBottom", "marginLeft", "marginRight", "marginTop", "maxHeight", "maxWidth",
+//                   "opacity", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "right",
+//                   "top", "width", "zIndex", "strokeDashoffset"]
+//   , _ = ["currentTime", "scrollLeft", "scrollTop"]
 
 
-/**
- * Translate an element along the X-axis.
- * @param {object} transforms An object of matrix transforms
- * @param {object} options Options for the effect
- * @param {object} options.from Initial value for the translateX
- * @param {object} options.to Destination value for the translateX
- * @returns {Function} A function that receives a normalized progress value.
- */
-export const translateX = ({ transforms, options }) => (progress) => {
-  transforms.position[0] = lerp(...options, progress);
-};
 
 /**
- * Translate an element vertically.
+ * Translate an element along the X-axis / vertically.
  * @param {object} transforms An object of matrix transforms
- * @param {object} options Options for the effect
- * @param {object} options.from Initial value for the translateY
- * @param {object} options.to Destination value for the translateY
- * @returns {Function} A function that receives a normalized progress value.
+ * @param {number} val The distance, in px, to translate the element.
+ * @returns {Function} A function that receives an keyframe-interpolated value.
  */
-export const translateY = ({ transforms, options }) => (progress) => {
-  transforms.position[1] = lerp(...options, progress);
-};
-export const parallax = translateY;
+export const x = ({ transforms }) => (val) => transforms.position[0] = val;
+export const y = ({ transforms }) => (val) => transforms.position[1] = val;
+export const z = ({ transforms }) => (val) => transforms.position[2] = val;
+export const translateX = x;
+export const translateY = y;
+export const translateZ = z;
+export const parallax = y;
 
@@ -51,17 +48,8 @@
  * @param {object} transforms An object of matrix transforms
- * @param {object} options Options for the effect
- * @param {object} options.rad Rotation in radians. TODO degrees?
- * @returns {Function} A function that receives a normalized progress value.
+ * @param {number} val Rotation in radians. TODO degrees?
+ * @returns {Function} A function that receives a keyframe-interpolated value.
  */
-export const rotateX = ({ transforms, options }) => (progress) => {
-  transforms.rotation[0] = lerp(...options, progress);
-};
-
-export const rotateY = ({ transforms, options }) => (progress) => {
-  transforms.rotation[1] = lerp(...options, progress);
-};
-
-export const rotateZ = ({ transforms, options }) => (progress) => {
-  transforms.rotation[2] = lerp(...options, progress);
-};
+export const rotateX = ({ transforms }) => (val) => transforms.rotation[0] = val;
+export const rotateY = ({ transforms }) => (val) => transforms.rotation[1] = val;
+export const rotateZ = ({ transforms }) => (val) => transforms.rotation[2] = val;
 export const rotate = rotateZ;
@@ -73,45 +61,29 @@
  * @param {object} transforms An object of matrix transforms
- * @param {object} options Options for the effect
- * @param {object} options.from Initial value for the scale
- * @param {object} options.to Destination value for the scale
- * @returns {Function} A function that receives a normalized progress value.
+ * @param {number} val The value for the scale
+ * @returns {Function} A function that receives a keyframe-interpolated value.
  */
-export const scaleX = ({ transforms, options }) => (progress) => {
-  transforms.scale[0] = lerp(...options, progress);
-};
+export const scaleX = ({ transforms }) => (val) => transforms.scale[0] = val;
+export const scaleY = ({ transforms }) => (val) => transforms.scale[1] = val;
+export const scale = ({ transforms }) => (val) => transforms.scale[0] = transforms.scale[1] = val;
 
-// note: these default params won't ever be used....
-export const scaleY = ({ transforms, options = [transforms.scale[1], 1] }) => (progress) => {
-  transforms.scale[1] = lerp(...options, progress);
-};
 
-export const scale = ({ transforms, options }) => (progress) => {
-  transforms.scale[0] = transforms.scale[1] = lerp(...options, progress);
-};
+/**
+ * Skew an element along an axis
+ * @param {object} transforms An object of matrix transforms
+ * @param {number} val The value ...
+ * ....
+ */
+export const skewX = ({ transforms }) => (val) => transforms.skew[0] = val;
+export const skewY = ({ transforms }) => (val) => transforms.skew[1] = val;
+export const skew = skewX;
 
 
-
-export const skewX = ({ transforms, options }) => (t) => {
-  transforms.skew[0] = lerp(...options, t);
-};
-
-export const skewY = ({ transforms, options }) => (t) => {
-  transforms.skew[1] = lerp(...options, t);
-};
-
-export const skew = ({ transforms, options }) => (t) => {
-  transforms.skew[0] = transforms.skew[1] = lerp(...options, t);
-};
-
-
 /**
  * Update an element's opacity.
  * @param {HTMLElement} element The element to fade
- * @param {object} options Options for the effect
- * @param {object} options.from Initial fade value
- * @param {object} options.to Destination fade value
- * @returns {Function} A function that receives a normalized progress value.
+ * @param {number} val The fade value
+ * @returns {Function} A function that receives a keyframe-interpolated value.
  */
-export const fade = ({ element, options }) => (progress) => {
-  element.style.opacity = lerp(...options, progress);
+export const fade = ({ element }) => (val) => {
+  element.style.opacity = val;
 };
@@ -125,8 +97,6 @@
  * @param {object} options Options for the effect
- * @param {object} options.from Initial fade value
- * @param {object} options.to Destination fade value
  * @returns {Function} A function that receives a normalized progress value.
  */
-export const blur = ({ element, options }) => (progress) => {
-  element.style.filter = 'blur(' + lerp(...options, progress) + 'px)';
+export const blur = ({ element }) => (val) => {
+  element.style.filter = 'blur(' + val + 'px)';
 };
@@ -137,15 +107,9 @@
  * Toggles a class on or off.
+ * NOTE: blows away all other classes at present...
  * @param {HTMLElement} element A element to toggle class(es) on
- * @param {object} options Options for the effect
- * @returns {Function} A function that receives a normalized progress value.
+ * @param {string} name The `classname` to be added.
+ * @returns {Function} A function that receives xxxxx from a discrete set of options.
  */
-export const toggle = ({ element, options }) => {
-  const times = Object.keys(options);
-
-  return (progress) => {
-    times.forEach((time) => {
-      const css = options[time];
-      element.classList.toggle(css, progress > +time);
-    });
-  };
+export const toggle = ({ element }) => (name) => {
+  element.className = name;
 };
@@ -192,15 +156,1 @@
 };
-
-
-
-// Effects that do _not_ use matrix transformations.
-// [stick, toggle, blur, fade].forEach((fn) => {
-//   Object.defineProperty(fn, 'skipMatrix', { value: true });
-// });
-
-// Effects that use matrix transformations. At present, only
-// built-in effects benefit from matrix transformations.
-[translateX, translateY, rotateX, rotateY, rotateZ, scale, scaleX, scaleY, skew, skewX, skewY].forEach((fn) => {
-  // Object.defineProperty(fn, '__applyTransform', { value: true });
-  Object.defineProperty(fn, 'useMatrix', { value: true });
-});

src/matrix.js

@@ -25,3 +25,2 @@ /*
 
-'use strict';
 
@@ -91,4 +90,4 @@ function assignedMatrixMultiplication(a, b, res) {
 
-
-var assignRotateY = function(matrix, rad) {
+// const assignRotateY = (matrix, rad) => {
+function assignRotateY(matrix, rad) {
   matrix[0] = Math.cos(rad);
@@ -150,3 +149,2 @@ matrix[1] = 0;
 
-
 function assignScale(matrix, x, y) {
@@ -210,68 +208,56 @@ matrix[0] = x;
 function createMatrix() {
-    var data = new Float32Array(16);
-    var a = new Float32Array(16);
-    var b = new Float32Array(16);
-    assignIdentity(data);
+  var data = new Float32Array(16);
+  var a = new Float32Array(16);
+  var b = new Float32Array(16);
 
-    return {
-      data: data,
+  assignIdentity(data);
 
-      asCSS: function() {
-        var css = 'matrix3d(';
-        for (var i = 0; i < 15; ++i) {
-          if (Math.abs(data[i]) < 0.0001) {
-            css += '0,';
-          } else {
-            css += data[i].toFixed(10) + ',';
-          }
-        }
-        if (Math.abs(data[15]) < 0.0001) {
-          css += '0)';
-        } else {
-          css += data[15].toFixed(10) + ')';
-        }
-        return css;
-      },
+  return {
+    data,
 
-      clear: function() {
-        assignIdentity(data);
-      },
+    asCSS: function() {
+      return `matrix3d(${ data.toString() })`;
+    },
 
-      translate: function(x, y, z) {
-        copyArray(data, a);
-        assignTranslate(b, x, y, z);
-        assignedMatrixMultiplication(a, b, data);
-        return this;
-      },
+    clear() {
+      assignIdentity(data);
+    },
 
-      rotateX: function(radians) {
-        copyArray(data, a);
-        assignRotateX(b, radians);
-        assignedMatrixMultiplication(a, b, data);
-        return this;
-      },
+    translate(x, y, z) {
+      copyArray(data, a);
+      assignTranslate(b, x, y, z);
+      assignedMatrixMultiplication(a, b, data);
+      return this;
+    },
 
-      rotateY: function(radians) {
-        copyArray(data, a);
-        assignRotateY(b, radians);
-        assignedMatrixMultiplication(a, b, data);
-        return this;
-      },
+    rotateX(radians) {
+      copyArray(data, a);
+      assignRotateX(b, radians);
+      assignedMatrixMultiplication(a, b, data);
+      return this;
+    },
 
-      rotateZ: function(radians) {
-        copyArray(data, a);
-        assignRotateZ(b, radians);
-        assignedMatrixMultiplication(a, b, data);
-        return this;
-      },
+    rotateY(radians) {
+      copyArray(data, a);
+      assignRotateY(b, radians);
+      assignedMatrixMultiplication(a, b, data);
+      return this;
+    },
 
-      scale: function(x, y) {
-        copyArray(data, a);
-        assignScale(b, x, y);
-        assignedMatrixMultiplication(a, b, data);
-        return this;
-      },
+    rotateZ(radians) {
+      copyArray(data, a);
+      assignRotateZ(b, radians);
+      assignedMatrixMultiplication(a, b, data);
+      return this;
+    },
 
-    skew: function(ax, ay) {
+    scale(x, y) {
       copyArray(data, a);
+      assignScale(b, x, y);
+      assignedMatrixMultiplication(a, b, data);
+      return this;
+    },
+
+    skew(ax, ay) {
+      copyArray(data, a);
       assignSkew(b, ax, ay);
@@ -285,3 +271,2 @@ assignedMatrixMultiplication(a, b, data);
 
-// module.exports = createMatrix;
 export default createMatrix;

src/scrollify.js

@@ -10,3 +10,3 @@ /*
 
-import { getRef, getPosition, isFunc, isArray, css, min, max } from './utils';
+import { getRef, getPosition, parseValue, parseDataAttribute, debounce, isFunc, createInterpolator } from './utils';
 import * as Effects from './effects';
@@ -16,93 +16,28 @@ import * as Easings from './easings';
 
-const transform = 'transform';
-const scrollifys = [];
-let initialized = false;
-
-// enum states
+// consts
+const SCALE = 'scale';
+const POSITION = 'position';
+const ROTATION = 'rotation';
+const SKEW = 'skew';
 const STATE = {
-  BEFORE: 1,
-  AFTER: 2,
-  ACTIVE: 3
+  BEFORE: 'before',
+  AFTER:  'after',
+  ACTIVE: 'active'
 };
 
-const calculateRefs = (refs) => refs.map(getRef).map(getPosition);
+// global
+const scenes = [];
+const metrics = {
+  scrollX: 0,
+  scrollY: 0,
+  windowWidth: 0,
+  windowHeight: 0,
+};
+let initialized = false;
 
 
-/**
- * Converts a `value` string into its pixel-equivalent using data from the
- * `refs` array and a mix of custom CSS and JS syntax.
- * @param {string} value The string to dynamically interpret.
- * @param {DOMRect[]} refs An array of BCRs from the `refs` option.
- * @param {...} el A reference to the Scrollify'd element
- *
- * CSS units such as `vh` and `vw` are converted, while the following functions
- * are also supported:
- *
- *  max(): returns the maximum value from a list of inputs
- *  css(): fetches the current CSS property value of an element
- *
- * @example "refs[3].bottom"
- * @example "refs[4].top - 100vh"
- * @example "refs[3].bottom - css(padding-top, refs[0]) - css(top, refs[0])",
- * @example "max((100vh / refs[2].height), (100vw / refs[2].width)) + 0.02"
- */
-function parseValue(val, refs = [], el) {
-  if (typeof val === 'number') {
-    return val;
-  }
+const calculateRefs = (refs) => refs.map(getRef).map(getPosition);
 
-  // const pageHeight = document.body.scrollHeight;
-  // const pageWidth = document.body.scrollWidth;
-  const screenWidth = window.innerWidth;
-  const screenHeight = window.innerHeight;
 
-  // helper parsing functions
-  // NOTE: will work for --css-vars, but only if they resolve to a number (ie. no strings, 'rgb(0,0,0)' etc):
-  // const css = (prop, el) => parseFloat(window.getComputedStyle(el).getPropertyValue(prop)) || 0;
-
-  // const css = (prop, el) => parseFloat(window.getComputedStyle(el)[prop]) || 0;
-  // const max = (...args) => Math.max(...args);
-  // const min = (...args) => Math.min(...args);
-
-
-  return new Function('refs', 'el', 'css', 'min', 'max', `'use strict';return (${val
-    .replace(/(\d*)vw/g, (match, v) => .01 * v * screenWidth)
-    .replace(/(\d*)vh/g, (match, v) => .01 * v * screenHeight)
-    .replace(/px/g, '')
-  });`)(refs, el, css, max, min);
-}
-
-
 /**
- * Calculate the start point of each scene.
- * @param  {HTMLElement} trigger ....
- * @return {number} The start position of the Scene, in pixels.
- */
-function calculateStart(trigger, offset = 0) {
-  const c = window.innerHeight - (offset * window.innerHeight);
-  const top = trigger ? trigger.getBoundingClientRect().top + window.pageYOffset : 0;
-
-  return Math.max(0, top - c);
-}
-
-/*
- * @example "0.5"
- * @example "200px"
- * @example "33vh"
- * @example "(el, refs) => refs[3].bottom - css(padding-top, refs[0]) - css(top, refs[0])",
- * @example "(el, refs) => max((100vh / refs[2].height), (100vw / refs[2].width)) + 0.02"
- */
-function calculateDuration(d = 1, el) {
-  return (typeof d === 'function') ?
-    d(el) :
-    mapTo(d, window.innerHeight + el.offsetHeight);
-}
-
-
-
-//
-
-
-
-/**
  * The Scrollify Class
@@ -117,147 +52,25 @@ */
   constructor(element) {
-    element = getRef(element);
 
     if (!element) {
       // throw new Error('Scrollify requires an `element`');
-      document.querySelectorAll('[data-scrollify]').forEach((el) => new Scrollify(el));
-      return;
+      return document.querySelectorAll('[data-scrollify]').forEach((el) => new Scrollify(el));
     }
 
-    if (element.dataset.scrollify) {
-      // ... parseDataAttribute(element)
-      // .. addScene()
-    }
+    element = getRef(element);
 
-
-    this.scenes = []; // scenes = [];
-
-    this.element = element;
-    this.ticking = false;
-    this.active = true;
-    this.matrix = createMatrix();
-    this.transforms = {
-      scale: [1, 1],
-      rotation: [0, 0, 0],
-      position: [0, 0, 0],
-      // skew: [],
-      // transformOrigin: [0,0,0]
-    };
-
-    // scrollifys.push(this);
     if (!initialized) {
       initialized = true;
+      // this.onScroll = this.onScroll.bind(this),
+      // this.onResizedDebounced = debounce(this.onResize.bind(this)),
+      window.addEventListener('scroll', () => this.onScroll(), { passive: true });
+      window.addEventListener('resize', () => this.onResize(), { passive: true });
     }
-    // else {
-    window.addEventListener('scroll', () => this.onScroll(), { passive: true });
-    window.addEventListener('resize', () => this.onResize(), { passive: true });
-    // }
 
+    this.element = element;
+    this.active = true;
 
-
-  }
-
-  parseDataAttribute(el) {
-    const parser = (str) => Function(`'use strict';return (${str})`)();
-
-    return parser(el.dataset.scrollify);
-  }
-
-  /**
-   * Add a new Scene to the Scrollify object. Scene information includes when
-   * to start applying an effect and for how long.
-   * @param  {Object} opts: Various options to apply to the new Scene:
-   *
-   *     start: (required) When to start the effect. It is a 0 - 1 value
-   *            representing the percentage of the viewport (eg. 0.5).
-   *            Any effects in the Scene will begin when the trigger element
-   *            crosses this threshold.
-   *
-   *  duration: The length of the effect, in pixels. Scrollify will
-   *            interpolate that into value into a "progress" variable, bounded
-   *            by 0 - 1. If not supplied, the default value is the height of
-   *            the viewport + element height, meaning the effect will last for
-   *            as long as the element is visible.
-   *
-   *   trigger: If supplied, Scrollify will use this element's position to
-   *            start any Scene effects. If not supplied, the default is to use
-   *            the element itself as a trigger.
-   *
-   *    easing: Ease in/out of any effects in the Scene.
-   *
-   */
-  addScene(data) {
-    let { element, transforms } = this;
-    let {
-      start = '0, el.top - 100vh',
-      end = 'el.bottom',
-      easing,
-      refs = [],
-      effects = {}
-    } = data;
-
-    let useMatrix = false;
-
-    // const calculateEffects = (r, el) => Object.keys(effects).reduce(this.addEffect, []);
-    const calculateEffects = (r, el) => Object.keys(effects).reduce((fx, name) => {
-      let value = effects[name];
-      let fn;
-      let options;
-
-      if (isFunc(value)) {
-        fn = value;
-      } else {
-        fn = Effects[name];
-        options = isArray(value) ? value.map((v) => parseValue(v, r, el)) : value;
-      }
-
-      useMatrix = useMatrix || fn.useMatrix;
-      fx.push(fn({ element, transforms, options }));
-
-      return fx;
-    }, []);
-
-    let scene = {
-      start: 0,
-      duration: 0,
-      state: '',
-      easing: isFunc(easing) ? easing : Easings[easing],
-      effects: [],
-      reset: () => {
-        const scroll = window.scrollY;
-        const el = getPosition(element);
-        const r = calculateRefs(refs);
-        const s = parseValue(start, r, el);
-        const e = parseValue(end, r, el);
-        const fx = calculateEffects(r, el);
-
-        scene.effects = fx;
-        scene.start = s;
-        scene.duration = e - s;
-        scene.state = (scroll > s) ? (scroll > e) ? STATE.AFTER : STATE.ACTIVE : STATE.BEFORE;
-
-        // internal-use only. Whether to use matrix transforms or not.
-        scene.useMatrix = useMatrix; // || data.skipMatrix // force override
-
-        this.update(scene);
-      }
-    };
-
-    scene.reset();
-
-    if (useMatrix) {
-      // scene.useMatrix = true;
-      element.style.willChange = transform;
-    // } else {
-    //   // internal-use only. Whether to use matrix transforms or not.
-    //   scene.useMatrix = false;
+    if (element.dataset.scrollify) {
+      const data = parseDataAttribute(element);
+      this.addScene(data);
     }
-
-
-    if (data.debug) {
-      console.log('Scrollify scene: ', scene);
-    }
-
-    this.scenes.push(scene);
-
-    return this;
   }
@@ -267,28 +80,2 @@
   /**
-   * Adds an effect to a scene.
-   * @param  {array} fx A reference to the `effects` array
-   * @param  {string} name The name of the effect to add
-   * @param  {number} i ignore for now
-   * @param  {object} effects A reference to ... .
-   * /
-  addEffect(fx, name, i, effects) {
-    let value = effects[name];
-    let options;
-    let fn;
-
-    if (typeof value == 'function') {
-      fn = value;
-    } else {
-      fn = Effects[name];
-      // if (!fn) { throw Error(`${name} not recognized`); }
-      options = value.map((val) => parseValue(val, r, el));
-    }
-
-    fx.push(fn({ element, transforms, options }));
-
-    return fx;
-  }
-
-
-  /**
    * onScroll Handler
@@ -299,5 +86,6 @@ */
 
-    window.requestAnimationFrame(() => {
-      this.scenes.forEach((s) => this.update(s), this);
-    });
+    metrics.scrollY = window.scrollY || window.pageYOffset,
+    metrics.scrollX = window.scrollX || window.pageXOffset;
+
+    scenes.forEach(this.update, this);
   }
@@ -307,3 +95,3 @@
   /**
-   * onResize handler
+   * onResize handler. Fire immediately, and then not more than once per every 250ms thereafter.
    * TODO: debounce?
@@ -313,3 +101,3 @@ * @return {void}
   onResize() {
-    this.scenes.forEach((s) => s.reset());
+    scenes.forEach((s) => s.reset());
   }
@@ -329,7 +117,7 @@
     const { start, duration, easing, effects } = scene;
-    const scroll = window.scrollY;
+    const { scrollY } = metrics;
     let progress;
 
     // after end
-    if (scroll - start > duration) {
+    if (scrollY - start > duration) {
       if (scene.state !== STATE.AFTER) {    // do one final iteration
@@ -343,3 +131,3 @@ scene.state = STATE.AFTER;
     // before start
-    } else if (scroll - start < 0) {
+    } else if (scrollY - start < 0) {
       if (scene.state !== STATE.BEFORE) {    // do one final iteration
@@ -356,5 +144,5 @@ scene.state = STATE.BEFORE;
       if (easing) { //            start, from, to, end
-        progress = easing(scroll - start, 0, 1, duration);
+        progress = easing(scrollY - start, 0, 1, duration);
       } else {
-        progress = (scroll - start) / duration;
+        progress = (scrollY - start) / duration;
       }
@@ -364,8 +152,91 @@ }
     // cycle through any registered transformations
-    effects.forEach((effect) => effect(progress));
+    window.requestAnimationFrame(() => { // TODO batch RAfs here.
+      effects.forEach((effect) => effect(progress));
 
-    if (scene.useMatrix) {
-      // transmogrify all applied transformations into a single matrix, and apply
-      this.element.style[transform] = this.updateMatrix().asCSS();
+      if (scene._useMatrix) {
+        // transmogrify all applied transformations into a single matrix, and apply
+        scene.element.style['transform'] = this.updateMatrix(scene).asCSS();
+      }
+    });
+  }
+
+
+
+  /**
+   * Adds a new Scene. Scene information includes information about its
+   * effects, when to start applying them, and for how long.
+   * @param {Object} data Various options to apply to the new Scene:
+   * @param {string} data.start
+   *   When to start the effect. This value is relative to the scroll. By
+   *   default, it will be when the element first becomes visible in the
+   *   viewport, represented by: `el.top - 100vh`. To better understand this,
+   *   if the top edge of an element ("el.top") is 1000px down on the page, the
+   *   user would need to scroll 1000px; the "- 100vh" part, then, subtracts
+   *   the viewport from this.
+   * @param {string} data.end
+   *   When to end the effect. This value is relative to the scroll. By
+   *   default, it is when the element disappears on the top of the viewport.
+   * @param {string} data.easing
+   * @param {string} data.refs
+   * @param {string} data.effects
+   *   The effect(s) to apply to the `element` during the specified timeframe.
+   *
+   *     @example start: '20px'
+   *     @example start: '30vh'
+   *     @example end: 'el.top - 200px'
+   */
+  addScene(data) {
+    let {
+      start = 'el.top - 100vh',
+      end = 'el.bottom',
+      easing,
+      refs = [],
+      effects = {}
+    } = data;
+
+    const { element } = this;
+    // TODO make a class, here.
+    const scene = { // tween = {
+      element,
+      matrix: createMatrix(),
+      transforms: {
+        [SCALE]: [1, 1],
+        [ROTATION]: [0, 0, 0],
+        [POSITION]: [0, 0, 0],
+        [SKEW]: [0, 0],
+        // [ORIGIN]: [0,0,0] // transformOrigin
+      },
+
+      start: 0,
+      duration: 0,
+      state: '',
+      easing: isFunc(easing) ? easing : Easings[easing],
+      effects: [],
+
+      reset: () => {
+        const scroll = window.scrollY;
+        const pos = getPosition(element);
+        const r = calculateRefs(refs);
+        const s = parseValue(start, r, pos);
+        const e = parseValue(end, r, pos);
+
+        scene.effects = this.calculateEffects.call(scene, effects, r, pos);
+        scene.start = s;
+        scene.duration = e - s; // dur ? parseValue(dur) : e - s;
+        scene.state = (scroll > s) ? (scroll > e) ? STATE.AFTER : STATE.ACTIVE : STATE.BEFORE;
+
+        this.update(scene);
+      }
+    };
+
+    scene.reset();
+    scenes.push(scene);
+
+    if (scene._useMatrix) {
+      element.style.willChange = 'transform';
     }
+
+    if (data.debug) {
+      console.log('Scrollify scene: ', scene);
+    }
   }
@@ -375,31 +246,77 @@
   /**
+   * Generates the function for each `effect` in a scene, taking into account
+   * the element's position, the position of any refs, and any interpolation
+   * of the scroll input (ie. using multiple keyframes) that needs to happen.
+   *
+   * Also determines if the effect is a matrix transformation and sets a flag
+   * if so, which enables further performance optimizations.
+   *
+   * @param {Object} effects A reference to `effects` key / value pairs
+   * @param {Object[]} refs An array of `refs` `position` objects.
+   * @param {Object} pos A `position` object for the main `el`.
+   */
+  calculateEffects(effects, refs, pos) {
+    let { element, transforms } = this;
+
+    return Object.keys(effects).reduce((fx, name) => {
+      let value = effects[name];
+      let interpolator;
+      let fn;
+
+      if (isFunc(value)) {
+        fn = value({ element, transforms });
+        interpolator = (v) => v;
+      } else {
+        fn = Effects[name]({ element, transforms });
+        interpolator = createInterpolator(value, refs, pos);
+
+        // Set flags for (built-in) effects that use matrix transformations.
+        const m = new RegExp(`(?<${SCALE}>scale)|(?<${POSITION}>x|y|z)|(?<${ROTATION}>rotate)|(?<${SKEW}>skew)/i`).exec(name); // eslint-disable-line max-len
+        const t = m && Object.keys(m.groups).filter((i) => m.groups[i]).toString();
+        fn && t && (transforms[t].isActive = this._useMatrix = true);
+      }
+
+      fx.push((t) => fn(interpolator(t)));
+
+      return fx;
+    }, []);
+  }
+
+
+  // calculateRefs(refs) {
+  //   refs.map(getRef).map(getPosition);
+  // }
+
+
+  /**
    * Loop through all the element's transformation data and calculates a matrix representing it.
+   * @param {object} scene The Scene.
    * @return {object} Ye olde Matrix
    */
-  updateMatrix() {
-    let { matrix, transforms: t } = this;
+  updateMatrix(scene) {
+    const { matrix: m, transforms: t } = scene;
 
-    matrix.clear();
+    m.clear();
 
     // here we adjust the transformOrigin ...
     if (t.transformOrigin) {
-      matrix.translate(-t.transformOrigin[0], -t.transformOrigin[1], -t.transformOrigin[2]);
+      m.translate(-t.transformOrigin[0], -t.transformOrigin[1], -t.transformOrigin[2]);
     }
 
-    if (t.scale) {
-      matrix.scale(t.scale[0], t.scale[1]);
+    if (t.scale.isActive) {
+      m.scale(t.scale[0], t.scale[1]);
     }
 
-    if (t.skew) {
-      matrix.skew(t.skew[0], t.skew[1]);
+    if (t.skew.isActive) {
+      m.skew(t.skew[0], t.skew[1]);
     }
 
-    if (t.rotation) {
-      matrix.rotateX(t.rotation[0]);
-      matrix.rotateY(t.rotation[1]);
-      matrix.rotateZ(t.rotation[2]);
+    if (t.rotation.isActive) {
+      m.rotateX(t.rotation[0]);
+      m.rotateY(t.rotation[1]);
+      m.rotateZ(t.rotation[2]);
     }
 
-    if (t.position) {
-      matrix.translate(t.position[0], t.position[1], t.position[2]);
+    if (t.position.isActive) {
+      m.translate(t.position[0], t.position[1], t.position[2]);
     }
@@ -409,6 +326,6 @@
     if (t.transformOrigin) {
-      matrix.translate(t.transformOrigin[0], t.transformOrigin[1], t.transformOrigin[2]);
+      m.translate(t.transformOrigin[0], t.transformOrigin[1], t.transformOrigin[2]);
     }
 
-    return matrix;
+    return m;
   }
@@ -418,3 +335,3 @@
   /**
-   * Disable Scrollify-ing. Perhaps for performance reasons / mobile devices.
+   * Disable Scrollify-ing.
    * @return {void}
@@ -421,0 +338,0 @@ */

src/utils.js

@@ -45,4 +45,18 @@
 
+// /*
+//  * @example "0.5"
+//  * @example "200px"
+//  * @example "33vh"
+//  */
+// function calculateDuration(d = 1, el) {
+//   return (typeof d === 'function') ?
+//     d(el) :
+//     mapTo(d, window.innerHeight + el.offsetHeight);
+// }
 
 export const lerp = (start, end, t) => (end - start) * t + start;
+export const invlerp = (a, b, v) => (v - a) / (b - a);
+
+// helper parsing functions
+// NOTE: will work for --css-vars, but only if they resolve to a number (ie. no strings, 'rgb(0,0,0)' etc):
 // export const css = (prop, el) => parseFloat(window.getComputedStyle(el)[prop]) || 0;
@@ -53,6 +67,11 @@ // export const css = (prop, el) => parseFloat(window.getComputedStyle(el).getPropertyValue(prop)) || 0;
 export const min = (...args) => Math.min(...args);
+// deg = (rad) => 180 * rad / Math.PI;
+// rad = (deg) => deg * Math.PI / 180;
+// random = (lo, hi) => Math.random() * (hi - lo) + lo;
+// atan = Math.atan2;
+
 export const isArray = (n) => Array.isArray(n);
 export const isFunc = (n) => typeof n === 'function';
+
 export const getRef = (el) => el.nodeType === 1 ? el : document.querySelector(el);
-
 export const getPosition = (el) => {
@@ -71,1 +90,107 @@ const bcr = el.getBoundingClientRect();
 
+/**
+ * Given an array of keyframe `times`, return a function that
+ * will interpolate a value from `arrB` given an arbitrary time `t`
+ * @param {number[]} times An array of keyframes, bounded by 0 and 1
+ * @param {number[]} arrB An array of values, each corresponding to the
+ *                        keyframe value in the `times` array.
+ */
+export function interpolate(times, values, t) {
+  let index = 0;
+
+  times.forEach((a) => (a < t) && index++);
+
+  // index = Math.min(index, times.length - 1);
+
+  if (index === 0) {
+    return values[0];
+  }
+
+  if (index >= times.length) {
+    return values[times.length - 1];
+  }
+
+  const prev = index - 1;
+  const vector = invlerp(times[prev], times[index], t);
+
+  return lerp(values[prev], values[index], vector);
+};
+
+
+/**
+ *
+ * @param {*} el
+ */
+export function parseDataAttribute(el) {
+  // const parser = (str) => new Function(`'use strict';return (${str})`).call(); // `call` with no `scope`
+  const parser = (str) => new Function(`'use strict';return (${str})`)();
+  return parser(el.dataset.scrollify);
+}
+
+
+/**
+ * Converts a `value` string into its pixel-equivalent using data from the
+ * `refs` array and a mix of custom CSS and JS syntax.
+ * @param {string} value The string to dynamically interpret.
+ * @param {DOMRect[]} refs An array of BCRs from the `refs` option.
+ * @param {...} el A reference to the Scrollify'd element
+ *
+ * CSS units such as `vh` and `vw` are converted, while the following functions
+ * are also supported:
+ *
+ *  max(): returns the maximum value from a list of inputs
+ *  css(): fetches the current CSS property value of an element
+ *
+ * @example "refs[3].bottom"
+ * @example "refs[4].top - 100vh"
+ * @example "refs[3].bottom - css(padding-top, refs[0]) - css(top, refs[0])",
+ * @example "max((100vh / refs[2].height), (100vw / refs[2].width)) + 0.02"
+ */
+export function parseValue(val, refs = [], el) {
+  if (typeof val === 'number') {
+    return val;
+  }
+
+  // const pageHeight = document.body.scrollHeight;
+  // const pageWidth = document.body.scrollWidth;
+  const screenWidth = window.innerWidth;
+  const screenHeight = window.innerHeight;
+
+  return new Function('refs', 'el', 'css', 'min', 'max', `'use strict';return (${val
+    .replace(/(\d*)vw/g, (match, v) => .01 * v * screenWidth)
+    .replace(/(\d*)vh/g, (match, v) => .01 * v * screenHeight)
+    .replace(/px/g, '')
+  });`)(refs, el, css, max, min);
+}
+
+
+/**
+ *
+ * @param {*} value
+ * @param {*} refs
+ * @param {*} pos
+ */
+export function createInterpolator(value, refs, pos) {
+  let times = Object.keys(value);
+  let values = Object.values(value);
+
+  if (isArray(value)) {
+    value = value.map((v) => parseValue(v, refs, pos));
+    return (t) => lerp(...value, t);
+  }
+
+  if (isFunc(values[0])) { // or "isInterpolatable() ?
+    // discreteMode; for strings, classnames, etc
+    // TODO need a better way to trigger "discrete" / non-interpolating mode
+    // currently: it checks if the `value` is a function
+    return (t) => {
+      let index = 0;
+      times.forEach((a) => (a < t) && index++);
+      return index ? values[index - 1]() : '';
+    };
+  }
+
+  values = values.map((v) => parseValue(v, refs, pos));
+  return (t) => interpolate(times, values, t);
+}
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74107

increased by0.67%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

1142

decreased by-0.61%

No dependency changes