@lagrange/animator/dist/animator.umd.js

This library helps making parallax animations on scroll. It is built with performance in mind, as it doesn't need to relayout or paint to operate.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.animator=e()}(this,function(){function t(t){var e=t.getAttribute("data-guid");return e||(e=Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15),t.setAttribute("data-guid",e)),e}var e="sb",n="st",a="sc",r={ELEM_BOTTOM:"eb",ELEM_TOP:"et",ELEM_CENTER:"ec",SCREEN_BOTTOM:e,SCREEN_TOP:n,SCREEN_CENTER:a},i={};function o(){i[n]=0,i[a]=window.innerHeight/2,i[e]=window.innerHeight}function s(t,e,n){if("number"==typeof e)return e;var a=e.match(/([-0-9.]+)(.+)/),r=parseFloat(a[1]);switch(a[2]){case"vh":return r/100*window.innerHeight;case"vw":return r/100*window.innerWidth;case"px":return r;case"%":default:return function(t,e,n){var a=n.getBoundingClientRect();switch(t){case"y":return e/100*a.height;case"x":default:return e/100*a.width}}(t,r,n)}}function u(t){var e=t;return"HTML"===t.tagName&&(e=document.scrollingElement||t),e.scrollTop}function c(t,e){return void 0===e&&(e=0),void 0!==t?function(t,e){return void 0===e&&(e=1e-5),!t||t<e&&t>-e?0:t}(t):e}function l(t){return{tx:c(t.x,0),ty:c(t.y,0),rot:c(t.rotation,0),sx:c(t.scaleX,1),sy:c(t.scaleY,1)}}function f(t){return void 0!==t.rotation||void 0!==t.scaleX||void 0!==t.scaleY||void 0!==t.x||void 0!==t.y||void 0!==t.z}function d(t){if(f){var e=l(t);t.transform="translate("+e.tx+"px, "+e.ty+"px) rotate("+e.rot+"deg) scale("+e.sx+", "+e.sy+")"}return delete t.rotation,delete t.scaleX,delete t.scaleY,delete t.x,delete t.y,delete t.z,t}o();var h=function(t,e,n){var a="string"==typeof t?parseInt(t,10):t;return Math.min(Math.max(a,e),n)},m={easeInQuad:function(t,e,n,a){return n*(t/=a)*t+e},easeOutQuad:function(t,e,n,a){return-n*(t/=a)*(t-2)+e},easeInOutQuad:function(t,e,n,a){return(t/=a/2)<1?n/2*t*t+e:-n/2*(--t*(t-2)-1)+e},easeInCubic:function(t,e,n,a){return n*(t/=a)*t*t+e},easeOutCubic:function(t,e,n,a){return n*((t=t/a-1)*t*t+1)+e},easeInOutCubic:function(t,e,n,a){return(t/=a/2)<1?n/2*t*t*t+e:n/2*((t-=2)*t*t+2)+e},easeInQuart:function(t,e,n,a){return n*(t/=a)*t*t*t+e},easeOutQuart:function(t,e,n,a){return-n*((t=t/a-1)*t*t*t-1)+e},easeInOutQuart:function(t,e,n,a){return(t/=a/2)<1?n/2*t*t*t*t+e:-n/2*((t-=2)*t*t*t-2)+e},easeInQuint:function(t,e,n,a){return n*(t/=a)*t*t*t*t+e},easeOutQuint:function(t,e,n,a){return n*((t=t/a-1)*t*t*t*t+1)+e},easeInOutQuint:function(t,e,n,a){return(t/=a/2)<1?n/2*t*t*t*t*t+e:n/2*((t-=2)*t*t*t*t+2)+e},easeInSine:function(t,e,n,a){return-n*Math.cos(t/a*(Math.PI/2))+n+e},easeOutSine:function(t,e,n,a){return n*Math.sin(t/a*(Math.PI/2))+e},easeInOutSine:function(t,e,n,a){return-n/2*(Math.cos(Math.PI*t/a)-1)+e},easeInExpo:function(t,e,n,a){return 0==t?e:n*Math.pow(2,10*(t/a-1))+e},easeOutExpo:function(t,e,n,a){return t==a?e+n:n*(1-Math.pow(2,-10*t/a))+e},easeInOutExpo:function(t,e,n,a){return 0==t?e:t==a?e+n:(t/=a/2)<1?n/2*Math.pow(2,10*(t-1))+e:n/2*(2-Math.pow(2,-10*--t))+e},easeInCirc:function(t,e,n,a){return-n*(Math.sqrt(1-(t/=a)*t)-1)+e},easeOutCirc:function(t,e,n,a){return n*Math.sqrt(1-(t=t/a-1)*t)+e},easeInOutCirc:function(t,e,n,a){return(t/=a/2)<1?-n/2*(Math.sqrt(1-t*t)-1)+e:n/2*(Math.sqrt(1-(t-=2)*t)+1)+e},easeInElastic:function(t,e,n,a){var r=1.70158,i=0,o=n;return 0==t?e:1==(t/=a)?e+n:(i||(i=.3*a),o<Math.abs(n)?(o=n,r=i/4):r=i/(2*Math.PI)*Math.asin(n/o),-o*Math.pow(2,10*(t-=1))*Math.sin((t*a-r)*(2*Math.PI)/i)+e)},easeOutElastic:function(t,e,n,a){var r=1.70158,i=0,o=n;return 0==t?e:1==(t/=a)?e+n:(i||(i=.3*a),o<Math.abs(n)?(o=n,r=i/4):r=i/(2*Math.PI)*Math.asin(n/o),o*Math.pow(2,-10*t)*Math.sin((t*a-r)*(2*Math.PI)/i)+n+e)},easeInOutElastic:function(t,e,n,a){var r=1.70158,i=0,o=n;return 0==t?e:2==(t/=a/2)?e+n:(i||(i=a*(.3*1.5)),o<Math.abs(n)?(o=n,r=i/4):r=i/(2*Math.PI)*Math.asin(n/o),t<1?o*Math.pow(2,10*(t-=1))*Math.sin((t*a-r)*(2*Math.PI)/i)*-.5+e:o*Math.pow(2,-10*(t-=1))*Math.sin((t*a-r)*(2*Math.PI)/i)*.5+n+e)},easeInBack:function(t,e,n,a,r){return null==r&&(r=1.70158),n*(t/=a)*t*((r+1)*t-r)+e},easeOutBack:function(t,e,n,a,r){return null==r&&(r=1.70158),n*((t=t/a-1)*t*((r+1)*t+r)+1)+e},easeInOutBack:function(t,e,n,a,r){return null==r&&(r=1.70158),(t/=a/2)<1?n/2*(t*t*((1+(r*=1.525))*t-r))+e:n/2*((t-=2)*t*((1+(r*=1.525))*t+r)+2)+e},easeInBounce:function(t,e,n,a){return n-jQuery.easing.easeOutBounce(a-t,0,n,a)+e},easeOutBounce:function(t,e,n,a){return(t/=a)<1/2.75?n*(7.5625*t*t)+e:t<2/2.75?n*(7.5625*(t-=1.5/2.75)*t+.75)+e:t<2.5/2.75?n*(7.5625*(t-=2.25/2.75)*t+.9375)+e:n*(7.5625*(t-=2.625/2.75)*t+.984375)+e},easeInOutBounce:function(t,e,n,a){return t<a/2?.5*jQuery.easing.easeInBounce(2*t,0,n,a)+e:.5*jQuery.easing.easeOutBounce(2*t-a,0,n,a)+.5*n+e}},y=function(t,e,n,a,r){return n===e?r:(t-e)*(r-a)/(n-e)+a};function p(t,e){var n=h(e.st,e.startOffset,e.endOffset),a=y(n,e.startOffset,e.endOffset,0,1);return t[e.key]=e.ease?m[e.ease](a,e.startValue,e.endValue-e.startValue,1):y(n,e.startOffset,e.endOffset,e.startValue,e.endValue),t}function g(t,e){return t.keys.map(function(n){return Object.assign({},{st:e,ease:t.ease,key:n},t.keyframes[n].reduce(function(t,e,n){var a=e[0],r=e[1];switch(n){case 0:t.startOffset=a,t.startValue=r;break;case 1:default:t.endOffset=a,t.endValue=r}return t},{}))}).reduce(p,{})}var M=[1,0,0,1,0,0],v=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1];function x(t,e,n){return[1,0,0,0,0,1,0,0,0,0,1,0,t,e,n,1]}function O(t,e,n){return[t,0,0,0,0,e,0,0,0,0,n,0,0,0,0,1]}function E(t){return[Math.cos(t),-Math.sin(t),0,0,Math.sin(t),Math.cos(t),0,0,0,0,1,0,0,0,0,1]}function b(t){for(var e,n,a,r,i,o,s,u,c,l,f,d,h,m,y,p,g,M,v,x,O,E,b,w=t[0],I=1;I<t.length;I+=1)a=void 0,x=void 0,O=void 0,E=void 0,b=void 0,i=(e=w)[1],o=e[2],s=e[3],c=e[5],l=e[6],f=e[7],h=e[9],m=e[10],y=e[11],g=e[13],M=e[14],v=e[15],(a=[])[0]=(x=(n=t[I])[0])*(r=e[0])+(O=n[1])*(u=e[4])+(E=n[2])*(d=e[8])+(b=n[3])*(p=e[12]),a[1]=x*i+O*c+E*h+b*g,a[2]=x*o+O*l+E*m+b*M,a[3]=x*s+O*f+E*y+b*v,a[4]=(x=n[4])*r+(O=n[5])*u+(E=n[6])*d+(b=n[7])*p,a[5]=x*i+O*c+E*h+b*g,a[6]=x*o+O*l+E*m+b*M,a[7]=x*s+O*f+E*y+b*v,a[8]=(x=n[8])*r+(O=n[9])*u+(E=n[10])*d+(b=n[11])*p,a[9]=x*i+O*c+E*h+b*g,a[10]=x*o+O*l+E*m+b*M,a[11]=x*s+O*f+E*y+b*v,a[12]=(x=n[12])*r+(O=n[13])*u+(E=n[14])*d+(b=n[15])*p,a[13]=x*i+O*c+E*h+b*g,a[14]=x*o+O*l+E*m+b*M,a[15]=x*s+O*f+E*y+b*v,w=a;return w}function w(t,e){void 0===e&&(e=!1);var n=t.style.transform;t.style.transform="";var a=window.getComputedStyle(t).getPropertyValue("transform");if(t.style.transform=n,"none"===a)return null;var r=a.replace(/matrix(?:3d)?\(/i,"").replace(")","").split(",").map(function(t){return parseFloat(t.trim())});return r.length<16&&e?function(t){return 16===t.length?t:b([[].concat(v),x(t[4],t[5],0),E(0),O(t[0],t[3],1)])}(r):r}var I=function e(){var n=this;this.animations=[],this.elements=[],this.contexts=[],this.handlerDictionnary={},this.loopDictionnary={},this.lastValuesDictionnary={},this.animatorTopDictionnary={},this.getKeyframes=function(t,e,a,r,o){void 0===r&&(r=null),void 0===o&&(o=null);var u=n.animations[a];return r?u=r:u&&!Array.isArray(u)&&(u=u.props),u?u.reduce(function(n,a){var r=Object.assign({},a);delete r.when,r=Object.keys(r).map(function(t){return[t,a[t]]});var u=function(t,e){var n,r=a.when.split("_");if(2!==r.length)throw new Error('Missing parameters in animation "when" (expects: ELEM_* | SCREEN_*)');switch(r[0]){default:case"et":n=t.top;break;case"ec":n=t.top+t.height/2;break;case"eb":n=t.top+t.height}return n-i[r[1]]}(e);return r.reduce(function(e,a){var r=a[0],i=a[1];return e[r]=n[r]||[],e[r].push([u,s(r,i,o||t)]),e},n)},{}):{}},this.getRect=function(e,a){var r=a.getAttribute("style");a.setAttribute("style","");var i=a.getBoundingClientRect(),o=i.top,s=i.height,c=u(e),l=t(e);return a.setAttribute("style",r),{top:o-n.animatorTopDictionnary[l]+c,height:s}},this.getContext=function(e){for(var a=null,r=e;r.parentElement&&!a;)((r=r.parentElement).getAttribute("data-scrollbar")||""===r.getAttribute("data-scrollbar"))&&(a=r);if(!n.contexts.find(function(t){return a===t})){var i=t(a);n.animatorTopDictionnary[i]=r.getBoundingClientRect().top+r.scrollTop,n.contexts.push(a)}return a||document.scrollingElement||document.documentElement},this.hasChanged=function(t,e){return!n.lastValuesDictionnary[t]||n.lastValuesDictionnary[t]!==JSON.stringify(e)},this.scroll=function(e){var a=t(e),r=u(e);n.loopDictionnary[a]&&cancelAnimationFrame(n.loopDictionnary[a]),n.loopDictionnary[a]=requestAnimationFrame(function(){n.update(e,r)})},this.virtualScroll=function(t,e){n.update(t,e)},this.update=function(e,a){n.elements.forEach(function(r){if(r.context===e&&0!==Object.keys(r.keyframes).length){var i=null;~r.node.namespaceURI.indexOf("svg")&&"svg"!==r.node.tagName.toLowerCase()?i=d(g(r,a)):r.is3DMatrix||r.initialMatrix&&16===r.initialMatrix.length?(r.initialMatrix||(r.initialMatrix=[].concat(v)),i=function(t,e){return void 0===e.rotation&&void 0===e.scaleX&&void 0===e.scaleY&&void 0===e.x&&void 0===e.y&&void 0===e.z||(e.transform="matrix3d("+b([t,x(c(e.x),c(e.y),c(e.z)),E(c(e.rotation)),O(c(e.scaleX,1),c(e.scaleY,1),c(e.scaleZ,1))]).join(",")+")"),delete e.rotation,delete e.scaleX,delete e.scaleY,delete e.x,delete e.y,delete e.z,e}(r.initialMatrix,g(r,a))):i=function(t,e){var n=g(t,e),a=function(t){if(f){var e=l(t),n=e.tx,a=e.ty,r=e.rot,i=e.sx,o=e.sy;return t.transform="translate("+n+"px, "+a+"px) rotate("+r+"deg) scale("+i+", "+o+")",{tx:n,ty:a,sx:i,sy:o,r:r}}return l({})}(n),r=d(n);if(r.transform&&t.initialMatrix&&!t.initialMatrix.every(function(t,e){return t===M[e]})){var i=t.initialMatrix,o=i[0],s=i[1],u=i[2],c=i[3],h=i[4],m=i[5],y=Math.sign(o)*Math.sqrt(o*o+s*s),p=Math.sign(c)*Math.sqrt(u*u+c*c),v=Math.atan2(-s,o);r.transform=d({scaleX:y*a.sx,scaleY:p*a.sy,rotation:v+a.r,x:h+a.tx,y:m+a.ty}).transform}return r}(r,a);var o=t(r.node);n.hasChanged(o,i)&&(i&&Object.assign(r.node.style,i),n.lastValuesDictionnary[o]=JSON.stringify(i))}})},this.getEase=function(t){return n.animations[t]&&n.animations[t].ease||null},this.is3DMatrix=function(t){return n.animations[t]&&n.animations[t].force3d||!1},this.getChildren=function(t,e,a,r){return Array.isArray(n.animations[r])?[]:(n.animations[r]&&n.animations[r].children||[]).reduce(function(i,o){return Array.from(e.querySelectorAll(o.selector)).forEach(function(s){var u=n.getKeyframes(e,a,null,o.props,s);i.push({node:s,parent:e,context:t,ease:o.ease,is3DMatrix:n.is3DMatrix(r),keyframes:u,keys:Object.keys(u),initialMatrix:w(s,n.is3DMatrix(r))})}),i},[])},this.parseElements=function(e,a){var r=n.getContext(a),i=a.getAttribute("data-animator-id"),o=n.getRect(r,a);t(a);var s=n.getKeyframes(a,o,i),u={node:a,context:r,is3DMatrix:n.is3DMatrix(i),ease:n.getEase(i),keyframes:s,keys:Object.keys(s),initialMatrix:w(a,n.is3DMatrix(i))};return e.push(u),e.concat(n.getChildren(r,a,o,i))},this.updateContext=function(e){var a=t(e),r="HTML"===e.tagName?window:e;n.handlerDictionnary[a]?r.removeEventListener("scroll",n.handlerDictionnary[a]):n.handlerDictionnary[a]=function(){n.scroll(e)},r.addEventListener("scroll",n.handlerDictionnary[a]),n.handlerDictionnary[a](e)},this.updateElements=function(){o(),n.contexts=[];var t=document.querySelectorAll("[data-animator-id]");n.elements=Array.from(t).reduce(n.parseElements,[]),n.contexts.forEach(n.updateContext)},this.setAnimations=function(t){n.animations=t,n.updateElements()},this.debug=function(){console.log("animations",n.animations),console.log("all elements",n.elements),console.log("filtered elements",n.elements.filter(function(t){return t.keys.length>0})),console.log("contexts",n.contexts)},e.instances.push(this)};return I.updateAll=function(){I.instances.forEach(function(t){t.updateElements()})},I.getConstants=function(){return Object.assign({},r)},I.instances=[],window.__Animator=I,I});
//# sourceMappingURL=animator.umd.js.map