vue-kinesis/dist/vue-kinesis.min.js

Easily create complexe interactive animations with Vue.js

var VueKinesis=function(t){"use strict";function e(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function n(t){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?e(Object(r),!0).forEach((function(e){i(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):e(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function i(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function r(t,e){return{x:t,y:e}}function a(t){var e,i=t.target,a=t.event,o=a.clientX,s=a.clientY,c=o-i.left,u=s-i.top,h=r((e=i)?e.width/2:0,e?e.height/2:0);return n(n({},r(c/h.x,u/h.y)),{},{target:i})}function o(t){var e=t.target;return n(n({},r((e.left-window.innerWidth)/(e.width+window.innerWidth),(e.top-window.innerHeight)/(e.height+window.innerHeight))),{},{target:e})}function s(t){var e=t.event,i=t.target;return n(n({},r(e.gamma/45,e.beta/90)),{},{target:i})}function c(t){return t.bottom>=0&&t.right>=0&&t.top<=(window.innerHeight||document.documentElement.clientHeight)&&t.left<=(window.innerWidth||document.documentElement.clientWidth)}function u(){try{return/Mobi|Android/i.test(navigator.userAgent)}catch(t){return!0}}function h(t,e,n){var i,r;return function(){var a,o=this;a="scroll"===n||o.duration>1e3?e:o.duration/10;var s=+new Date,c=arguments;i&&s<i+a?(clearTimeout(r),r=setTimeout((function(){requestAnimationFrame((function(){i=s,t.apply(o,c)}))}),a)):requestAnimationFrame((function(){i=s,t.apply(o,c)}))}}function l(t,e,n,i,r,a,o,s,c,u){"boolean"!=typeof o&&(c=s,s=o,o=!1);const h="function"==typeof n?n.options:n;let l;if(t&&t.render&&(h.render=t.render,h.staticRenderFns=t.staticRenderFns,h._compiled=!0,r&&(h.functional=!0)),i&&(h._scopeId=i),a?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,c(t)),t&&t._registeredComponents&&t._registeredComponents.add(a)},h._ssrRegister=l):e&&(l=o?function(t){e.call(this,u(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,s(t))}),l)if(h.functional){const t=h.render;h.render=function(e,n){return l.call(n),t(e,n)}}else{const t=h.beforeCreate;h.beforeCreate=t?[].concat(t,l):[l]}return n}var d=l({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(t.tag,{tag:"component",style:t.style,on:{mousemove:t.handleMovement,mouseenter:t.handleMovementStart,mouseleave:t.handleMovementStop}},[t._t("default"),t._v(" "),t.audio?n("audio",{ref:"audio",attrs:{type:"audio/mpeg"},on:{ended:t.stop}},[n("source",{attrs:{src:t.audio}})]):t._e()],2)},staticRenderFns:[]},void 0,{name:"KinesisContainer",mixins:[{props:{audio:{type:String,required:!1},playAudio:{type:Boolean,default:!1}},data:function(){return{analyser:null,audioArray:null,audioData:null,audioRef:null,wasPlayed:!1,isPlaying:!1}},watch:{audio:function(){this.wasPlayed=!1,this.isPlaying=!1},playAudio:function(t){t?this.play():this.stop()}},methods:{play:function(){this.active&&(this.wasPlayed||(this.handleAudio(),this.wasPlayed=!0),this.isPlaying=!0,this.audioRef.play(),this.getSongData())},stop:function(){this.isPlaying=!1,this.audioRef.pause()},handleAudio:function(){var t=this.$refs.audio;this.audioRef=t;var e=new AudioContext,n=e.createMediaElementSource(t),i=e.createAnalyser();n.connect(i),i.connect(e.destination),i.fftSize=256;var r=i.frequencyBinCount,a=new Uint8Array(r);this.audioArray=a,this.analyser=i},getSongData:function(){this.isPlaying&&(this.analyser.getByteFrequencyData(this.audioArray),this.audioData=new Array(this.audioArray),requestAnimationFrame(this.getSongData))}}}],props:{tag:{type:String,default:"div"},event:{type:String,default:"move"},active:{type:Boolean,default:!0},duration:{type:Number,default:1e3},easing:{type:String,default:"cubic-bezier(0.23, 1, 0.32, 1)"},perspective:{type:Number,default:1e3}},provide:function(){var t=this,e={};return["audioData","duration","easing","event","eventData","isMoving","movement","shape"].forEach((function(n){return Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[n]}})})),{context:e}},data:function(){var t;return{shape:null===(t=this.$el)||void 0===t?void 0:t.getBoundingClientRect(),isMoving:!1,leftOnce:!1,movement:{x:0,y:0},eventMap:{orientation:"deviceorientation",scroll:"scroll",move:u()?"deviceorientation":null}}},computed:{eventActions:function(){var t;return{move:{action:a,condition:this.isMoving&&!u(),type:u()?"deviceorientation":null},scroll:{action:o,condition:!(null===(t=this.shape)||void 0===t||!t.height),type:"scroll"},orientation:{action:s,condition:"move"===this.event&&u(),type:"deviceorientation"}}},style:function(){return{perspective:"".concat(this.perspective,"px")}}},mounted:function(){this.addEvents()},beforeDestroy:function(){this.removeEvents()},methods:{handleMovementStart:function(){this.active&&(this.isMoving=!0)},handleMovementStop:function(){this.active&&(this.leftOnce=!0,this.isMoving=!1)},handleMovement:h((function(t){if(this.active){this.isMoving||this.leftOnce||this.handleMovementStart(),this.shape=this.$el.getBoundingClientRect();var e=c(this.shape),n=this.eventActions[this.event].condition,i=this.eventActions[this.event].action;e&&n&&(this.movement=i({target:this.shape,event:t}),this.eventData=r(t.clientX,t.clientY))}}),100),addEvents:function(){this.eventMap[this.event]&&window.addEventListener(this.eventMap[this.event],this.handleMovement,!0)},removeEvents:function(){this.eventMap[this.event]&&window.removeEventListener(this.eventMap[this.event],this.handleMovement,!0)}}},void 0,!1,void 0,!1,void 0,void 0,void 0);function f(t,e,n){return n&&t>n?n:e&&t<e?e:t}var m={methods:{transformSwitch:function(t,e,n,i){var r;switch(t="scaleX"===t||"scaleY"===t?"scale":t){case"translate":r=this.translateMovement(e,n);break;case"rotate":r=this.rotateMovement(e,n);break;case"depth":r=this.depthMovement(e,n,i);break;case"depth_inv":r=this.depthMovement(-e,-n,i);break;case"scale":r=this.scaleMovement(e,n)}return r},translateMovement:function(t,e){return"translate3d(".concat(-t,"px, ").concat(-e,"px, 0)")},rotateMovement:function(t,e){var n;return this.axis?"x"===this.axis?n=2*t:"y"===this.axis&&(n=2*e):n=t+e,"rotate3d(0,0,1,".concat(n,"deg)")},depthMovement:function(t,e,n){return"rotateX(".concat(-e,"deg) rotateY(").concat(t,"deg) translate3d(0,0,").concat(2*n,"px)")},scaleMovement:function(t,e){var n=this.type,i=Math.sign(this.strength)*(Math.abs(t)+Math.abs(e))/10+1;return"scale3d(".concat("scaleX"===n||"scale"===n?i:1,",\n            ").concat("scaleY"===n||"scale"===n?i:1,",\n            1)")}}};var v=l({},void 0,{name:"KinesisElement",mixins:[m],props:{tag:{type:String,default:"div"},type:{type:String,default:"translate"},transformOrigin:{type:String,default:"center"},originX:{type:Number,default:50},originY:{type:Number,default:50},strength:{type:Number,default:10},axis:{type:String,default:null},maxX:{type:Number,default:null},maxY:{type:Number,default:null},minX:{type:Number,default:null},minY:{type:Number,default:null},cycle:{type:Number,default:0}},inject:["context"],computed:{transform:function(){return this.transformCalculation()},transformParameters:function(){return{transitionProperty:"transform",transitionDuration:this.transitionDuration,transformOrigin:this.transformOrigin,transitionTimingFunction:this.transitionTimingFunction}},transitionDuration:function(){var t=this.context.duration;return"".concat(t,"ms")},transitionTimingFunction:function(){return this.context.easing}},methods:{transformCalculation:function(){var t,e,i=this.context;if(!i.shape||!i.isMoving&&"move"===i.event)return{};var a,o,s,c,u,h,l,d,m,v,p=this.cycle<1?function(t){var e=t.y,i=t.x,a=t.target,o=t.originX,s=void 0===o?50:o,c=t.strength,u=void 0===c?10:c,h=t.event,l=void 0===h?null:h,d=t.minX,m=t.minY,v=t.maxX,p=t.maxY,g=t.originY,y=void 0===g?50:g;return"scroll"===l&&(y=-y/2),n(n({},r(f((i-s/50)*u,d,v),f((e-y/50)*u,m,p))),{},{target:a})}(n(n({},i.movement),{},{originX:this.originX,originY:this.originY,strength:this.strengthManager(),event:i.event,minX:this.minX,minY:this.minY,maxX:this.maxX,maxY:this.maxY})):(a={referencePosition:"scroll"===i.event?{x:0,y:0}:i.eventData,shape:i.shape,event:i.event,cycles:this.cycle,strength:this.strengthManager()},o=a.referencePosition,s=a.shape,c=a.event,u=a.cycles,h=a.strength,l="scroll"===c?window.innerWidth:s.width,d="scroll"===c?window.innerHeight:s.height,m=(o.x-s.left)*(2*Math.PI)/l,v=(o.y-s.top)*(2*Math.PI)/d,r(l*Math.sin(m*u)*h/(l/2),d*Math.sin(v*u)*h/(d/2))),g=p.x,y=p.y;return"scroll"!==i.event?(t="y"===this.axis?0:g,e="x"===this.axis?0:y):"scroll"===i.event?(t="x"===this.axis?y:0,e="y"!==this.axis&&this.axis?0:y):this.cycle>0&&(t="x"===this.axis?g:0,e="y"===this.axis?y:0),{transform:this.transformSwitch(this.type,t,e,this.strength)}},strengthManager:function(){return"depth"===this.type||"depth_inv"===this.type?Math.abs(this.strength):this.strength}},render:function(t){return t(this.tag,{style:n(n({},this.transform),this.transformParameters)},this.$slots.default)}},void 0,void 0,void 0,!1,void 0,void 0,void 0),p={props:{type:{type:String,default:"translate"},transformOrigin:{type:String,default:"center"},originX:{type:Number,default:50},originY:{type:Number,default:50},strength:{type:Number,default:10},audioIndex:{type:Number,default:50},axis:{type:String,default:null},maxX:{type:Number,default:null},maxY:{type:Number,default:null},minX:{type:Number,default:null},minY:{type:Number,default:null},cycle:{type:Number,default:0}},methods:{strengthManager:function(){return"depth"===this.type||"depth_inv"===this.type?Math.abs(this.strength):this.strength}}},g=l({render:function(){var t=this.$createElement;return(this._self._c||t)(this.tag,{tag:"component",style:Object.assign({},this.transform,this.transformParameters)},[this._t("default")],2)},staticRenderFns:[]},void 0,{name:"KinesisAudio",inject:["context"],mixins:[p],props:{tag:{type:String,default:"div"},audioIndex:{type:Number,default:50}},computed:{transform:function(){return this.transformAudio()},transformParameters:function(){return{transitionProperty:"transform",transitionDuration:this.transitionDuration,transformOrigin:this.transformOrigin,transitionTimingFunction:this.transitionTimingFunction}},transitionDuration:function(){var t=this.context.duration;return"".concat(t,"ms")},transitionTimingFunction:function(){return this.context.easing}},methods:{transformAudio:function(){var t=this.context.audioData;if(t){var e,n,i=this.type,r=this.strength;switch(i){case"translate":e=t?t[0][this.audioIndex]:0,n="translate3d(".concat(e*r,"px, 0, 0)");break;case"rotate":e=t?t[0][this.audioIndex]:0,n="rotate3d(0,0,1,".concat(e*r/10,"deg)");break;case"scale":e=t?t[0][this.audioIndex]/r<1?1:t[0][this.audioIndex]/(2*r):1,n="scale(".concat(e,")")}return{transform:n}}}}},void 0,!1,void 0,!1,void 0,void 0,void 0),y=l({render:function(){var t=this.$createElement;return(this._self._c||t)(this.tag,{tag:"component",style:Object.assign({},this.transform,this.transformParameters)},[this._t("default")],2)},staticRenderFns:[]},void 0,{name:"KinesisScroll",mixins:[{props:{active:{type:Boolean,default:!0},duration:{type:Number,default:1e3},easing:{type:String,default:"cubic-bezier(0.23, 1, 0.32, 1)"},tag:{type:String,default:"div"}}},{props:{perspective:{type:Number,default:1e3}},computed:{style:function(){return{perspective:"".concat(this.perspective,"px")}}}},p,m],data:function(){return{transform:{}}},computed:{transformParameters:function(){return{transitionProperty:"transform",transitionDuration:this.transitionDuration,transformOrigin:this.transformOrigin,transitionTimingFunction:this.easing}},transitionDuration:function(){return"".concat(this.duration,"ms")}},mounted:function(){window.addEventListener("scroll",this.handleScroll,{passive:!0})},beforeDestroy:function(){window.removeEventListener("scroll",this.handleScroll,{passive:!0})},methods:{getCycleMovement:function(t,e,n,i,r){var a=(t-r.left)*(2*Math.PI)/n,o=(e-r.top)*(2*Math.PI)/i;this.cycleMovement={x:a,y:o,width:n,height:i}},handleScroll:h((function(){if(this.active){var t=this.$el.getBoundingClientRect();c(t)&&t.height&&this.transformBehavior(t)}}),19,"scroll"),transformBehavior:function(t){var e,n,i=(t.top-window.innerHeight)/(t.height+window.innerHeight);if(this.cycle<=0){var r=i*this.strength;e="x"===this.axis?r:0,n="y"!==this.axis&&this.axis?0:r,this.maxX&&(e=Math.min(e,this.maxX)),this.minX&&(e=Math.max(e,this.minX)),this.maxY&&(n=Math.min(n,this.maxY)),this.minY&&(n=Math.max(n,this.minY))}else if(this.cycle>0){var a=this.getCycleMovement(0,0,window.innerWidth,window.innerHeight,t),o=a.x,s=a.y,c=a.width,u=a.height,h=c*Math.sin(o*this.cycle),l=u*Math.sin(s*this.cycle);e="x"===this.axis?h/(c/2)*this.strength:0,n="y"!==this.axis&&this.axis?0:l/(u/2)*this.strength}var d=this.type;d="scaleX"===d||"scaleY"===d?"scale":d;var f=this.transformSwitch(d,e,n,this.strength);this.transform={transform:f}}}},void 0,!1,void 0,!1,void 0,void 0,void 0),b=l({render:function(){var t=this.$createElement;return(this._self._c||t)(this.tag,{tag:"component",style:Object.assign({},this.transform,this.transformParameters)},[this._t("default")],2)},staticRenderFns:[]},void 0,{name:"KinesisDistance",props:{tag:{type:String,default:"div"},type:{type:String,default:"translate"},transformOrigin:{type:String,default:"center"},originX:{type:Number,default:50},originY:{type:Number,default:50},strength:{type:Number,default:10},axis:{type:String,default:null},maxX:{type:Number,default:null},maxY:{type:Number,default:null},minX:{type:Number,default:null},minY:{type:Number,default:null},distance:{type:Number,default:100},cycle:{type:Number,default:0},active:{type:Boolean,default:!0},duration:{type:Number,default:1001},easing:{type:String,default:"cubic-bezier(0.23, 1, 0.32, 1)"},perspective:{type:Number,default:1e3}},data:function(){return{pointer:{x:0,y:0},transform:{},component:"kidistance",throttle:500}},computed:{style:function(){return{perspective:"".concat(this.perspective,"px")}},transformParameters:function(){return{position:"relative",transitionProperty:"transform",transitionDuration:this.transitionDuration,transformOrigin:this.transformOrigin,transitionTimingFunction:this.easing}},transitionDuration:function(){return"".concat(this.duration,"ms")}},mounted:function(){window.addEventListener("scroll",this.handleMovement)},beforeDestroy:function(){window.removeEventListener("scroll",this.handleMovement)},methods:{getCoordinates:function(t,e){var n=this.$el.getBoundingClientRect();return{x:t+n.left,y:e+n.top}},getDistance:function(t,e,n,i){return Math.floor(Math.hypot(e-t,i-n))},handleMovement:h((function(t){window.addEventListener("mousemove",this.handleMovement);var e=this.pointer;e.x=t.clientX,e.y=t.clientY,this.transformBehavior()}),50),transformBehavior:function(){var t=this.$el.getBoundingClientRect(),e=this.getCoordinates(t.width/2,t.height/2),n=this.getDistance(this.pointer.x,e.x,this.pointer.y,e.y);if(n>this.distance)return this.transform={},void(this.throttle=500);this.throttle=50;var i="scale(".concat(n/this.distance,")");this.transform={transform:i}},scaleMovement:function(t,e){var n=this.type,i=Math.sign(this.strength)*(Math.abs(t)+Math.abs(e))/10+1;return"scale3d(".concat("scaleX"===n||"scale"===n?i:1,",\n      ").concat("scaleY"===n||"scale"===n?i:1,",\n      1)")}}},void 0,!1,void 0,!1,void 0,void 0,void 0),x={install:function(t){t.component(g.name,g),t.component(d.name,d),t.component(b.name,b),t.component(v.name,v),t.component(y.name,y)}},w=null;"undefined"!=typeof window?w=window.vue:"undefined"!=typeof global&&(w=global.vue),w&&w.use(x);var M=Object.freeze({__proto__:null,default:x,KinesisAudio:g,KinesisContainer:d,KinesisDistance:b,KinesisElement:v,KinesisScroll:y}),S={install:function t(e){if(!t.installed){for(var n in t.installed=!0,M)e.use(M[n]);e.component("kinesis-container",d),e.component("kinesis-element",v),e.component("kinesis-audio",g),e.component("kinesis-scroll",y),e.component("kinesis-distance",b)}}},O=null;return"undefined"!=typeof window?O=window.vue:"undefined"!=typeof global&&(O=global.vue),O&&O.use(S),t.KinesisAudio=g,t.KinesisContainer=d,t.KinesisDistance=b,t.KinesisElement=v,t.KinesisScroll=y,t.default=S,Object.defineProperty(t,"__esModule",{value:!0}),t}({});