!function($){"use strict";const e="liquidInteractiveSwap";let t={dispImage:null,image1:null,image2:null,imagesRatio:1,intensity1:1,intensity2:1,commonAngle:Math.PI/4,angle1:Math.PI/4,angle2:Math.PI/4,speedIn:1.6,speedOut:1.2,userHover:!0,easing:"expo.out",video:!1};class i{constructor(i,n){this._defaults=t,this._name=e,this.options={...t,...n},this.DOM={},this.DOM.element=i,this.DOM.$element=$(i),this.DOM.firstImage=this.DOM.element.querySelector("img"),this.init()}init(){var e="\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n }\n ",t="\n varying vec2 vUv;\n\n uniform float dispFactor;\n uniform float dpr;\n uniform sampler2D disp;\n\n uniform sampler2D texture1;\n uniform sampler2D texture2;\n uniform float angle1;\n uniform float angle2;\n uniform float intensity1;\n uniform float intensity2;\n uniform vec4 res;\n uniform vec2 parent;\n\n mat2 getRotM(float angle) {\n float s = sin(angle);\n float c = cos(angle);\n return mat2(c, -s, s, c);\n }\n\n void main() {\n vec4 disp = texture2D(disp, vUv);\n vec2 dispVec = vec2(disp.r, disp.g);\n\n vec2 uv = 0.5 * gl_FragCoord.xy / (res.xy) ;\n vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);\n\n\n vec2 distortedPosition1 = myUV + getRotM(angle1) * dispVec * intensity1 * dispFactor;\n vec2 distortedPosition2 = myUV + getRotM(angle2) * dispVec * intensity2 * (1.0 - dispFactor);\n vec4 _texture1 = texture2D(texture1, distortedPosition1);\n vec4 _texture2 = texture2D(texture2, distortedPosition2);\n gl_FragColor = mix(_texture1, _texture2, dispFactor);\n }\n ";if(!(this.options.image1&&this.options.image2&&this.options.dispImage))return void console.warn("One or more images are missing");var i=new THREE.Scene,n=new THREE.OrthographicCamera(this.DOM.element.offsetWidth/-2,this.DOM.element.offsetWidth/2,this.DOM.element.offsetHeight/2,this.DOM.element.offsetHeight/-2,1,1e3);n.position.z=1;var s=new THREE.WebGLRenderer({canvas:this.DOM.element.querySelector("canvas"),antialias:!1,alpha:!0});s.setPixelRatio(2),s.setClearColor(16777215,0),s.setSize(this.DOM.element.offsetWidth,this.DOM.element.offsetHeight),s.domElement.classList.add("lqd-overlay"),this.DOM.firstImage?this.DOM.firstImage.parentNode.insertBefore(s.domElement,this.DOM.firstImage.nextSibling):this.DOM.element.appendChild(s.domElement);var o=function(){s.render(i,n)},a=new THREE.TextureLoader;a.crossOrigin="";var r=a.load(this.options.dispImage,o);if(r.magFilter=r.minFilter=THREE.LinearFilter,this.options.video){var l=function(){requestAnimationFrame(l),s.render(i,n)};l();var d=document.createElement("video");d.autoplay=!0,d.loop=!0,d.src=this.options.image1,d.load();var m=document.createElement("video");m.autoplay=!0,m.loop=!0,m.src=this.options.image2,m.load();var u=new THREE.VideoTexture(d),p=new THREE.VideoTexture(m);u.magFilter=p.magFilter=THREE.LinearFilter,u.minFilter=p.minFilter=THREE.LinearFilter,m.addEventListener("loadeddata",(function(){m.play(),(p=new THREE.VideoTexture(m)).magFilter=THREE.LinearFilter,p.minFilter=THREE.LinearFilter,v.uniforms.texture2.value=p}),!1),d.addEventListener("loadeddata",(function(){d.play(),(u=new THREE.VideoTexture(d)).magFilter=THREE.LinearFilter,u.minFilter=THREE.LinearFilter,v.uniforms.texture1.value=u}),!1)}else{var u=a.load(this.options.image1,o),p=a.load(this.options.image2,o);u.magFilter=p.magFilter=THREE.LinearFilter,u.minFilter=p.minFilter=THREE.LinearFilter}const h=1,f=1;var v=new THREE.ShaderMaterial({uniforms:{intensity1:{type:"f",value:this.options.intensity1},intensity2:{type:"f",value:this.options.intensity2},dispFactor:{type:"f",value:0},angle1:{type:"f",value:this.options.angle1},angle2:{type:"f",value:this.options.angle2},texture1:{type:"t",value:u},texture2:{type:"t",value:p},disp:{type:"t",value:r},res:{type:"vec4",value:new THREE.Vector4(this.DOM.element.offsetWidth,this.DOM.element.offsetHeight,1,1)},dpr:{type:"f",value:window.devicePixelRatio}},vertexShader:e,fragmentShader:t,transparent:!0,opacity:1}),c=new THREE.PlaneBufferGeometry(this.DOM.element.offsetWidth,this.DOM.element.offsetHeight,1),g=new THREE.Mesh(c,v);i.add(g);const E=()=>{gsap.to(v.uniforms.dispFactor,{value:1,duration:this.options.speedIn,ease:this.options.easing,onUpdate:o,onComplete:o})},y=()=>{gsap.to(v.uniforms.dispFactor,{value:0,duration:this.options.speedOut,ease:this.options.easing,onUpdate:o,onComplete:o})};this.options.userHover&&(this.DOM.element.addEventListener("mouseenter",E),this.DOM.element.addEventListener("touchstart",E),this.DOM.element.addEventListener("mouseleave",y),this.DOM.element.addEventListener("touchend",y)),window.addEventListener("resize",(()=>{g.material.uniforms.res.value=new THREE.Vector4(this.DOM.element.offsetWidth,this.DOM.element.offsetHeight,1,1),s.setSize(this.DOM.element.offsetWidth,this.DOM.element.offsetHeight),o()})),this.next=E,this.previous=y}}$.fn[e]=function(t){return this.each((function(){const n={...$(this).data("swap-options"),...t};$.data(this,"plugin_"+e)||$.data(this,"plugin_"+e,new i(this,n))}))}}(jQuery),jQuery(document).ready((function($){console.log("%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect . Modified by Liquid Themes","color: #bada55; font-size: 0.8rem"),$("[data-lqd-interactive-swap]").liquidInteractiveSwap()}));