├── .DS_Store
├── .github
    └── FUNDING.yml
├── .gitignore
├── LICENSE
├── dist
    ├── .DS_Store
    ├── hover-effect.es.js
    ├── hover-effect.es.js.map
    ├── hover-effect.js
    ├── hover-effect.js.map
    ├── hover-effect.modern.mjs
    ├── hover-effect.modern.mjs.map
    ├── hover-effect.umd.js
    └── hover-effect.umd.js.map
├── example
    ├── .DS_Store
    ├── css
    │   └── base.css
    ├── favicon.ico
    ├── img
    │   ├── Img1.jpg
    │   ├── Img10.jpg
    │   ├── Img11.jpg
    │   ├── Img12.jpg
    │   ├── Img13.jpg
    │   ├── Img14.jpg
    │   ├── Img15.jpg
    │   ├── Img16.jpg
    │   ├── Img17.jpg
    │   ├── Img18.jpg
    │   ├── Img19.jpg
    │   ├── Img2.jpg
    │   ├── Img20.jpg
    │   ├── Img21.jpg
    │   ├── Img22.jpg
    │   ├── Img23.jpg
    │   ├── Img24.jpg
    │   ├── Img25.jpg
    │   ├── Img26.jpg
    │   ├── Img3.jpg
    │   ├── Img4.jpg
    │   ├── Img5.jpg
    │   ├── Img6.jpg
    │   ├── Img7.jpg
    │   ├── Img8.jpg
    │   ├── Img9.jpg
    │   └── displacement
    │   │   ├── 1.jpg
    │   │   ├── 10.jpg
    │   │   ├── 11.jpg
    │   │   ├── 12.jpg
    │   │   ├── 13.jpg
    │   │   ├── 14.jpg
    │   │   ├── 15.jpg
    │   │   ├── 16.jpg
    │   │   ├── 2.jpg
    │   │   ├── 3.jpg
    │   │   ├── 4.png
    │   │   ├── 5.png
    │   │   ├── 6.jpg
    │   │   ├── 7.jpg
    │   │   ├── 8.jpg
    │   │   └── 9.jpg
    ├── index.html
    └── js
    │   ├── .DS_Store
    │   ├── gsap.min.js
    │   ├── imagesloaded.pkgd.min.js
    │   └── three.min.js
├── gifs
    ├── 1.gif
    ├── 2.gif
    └── alex_brown.gif
├── images
    ├── balloon.jpg
    ├── balloon2.jpg
    ├── dot.jpg
    ├── fluid.jpg
    ├── heightMap.png
    ├── hover.jpg
    ├── ice.jpg
    ├── ice2.jpg
    ├── ny-info.jpg
    ├── ny.jpg
    ├── ramen.jpg
    ├── rect.png
    ├── strip.png
    ├── stripe1.png
    ├── stripe1mul.png
    ├── submit.jpg
    └── submit.png
├── index.html
├── package-lock.json
├── package.json
├── readme.md
├── src
    └── hover-effect.js
└── videos
    ├── .DS_Store
    ├── video.mp4
    └── video2.mp4


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/.DS_Store


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | liberapay: robin-dela
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Robin Delaporte, Aarni Koskela
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/dist/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/dist/.DS_Store


--------------------------------------------------------------------------------
/dist/hover-effect.es.js:
--------------------------------------------------------------------------------
1 | import*as e from"three";import t from"gsap";function i(i){function n(){for(var e=0;e<arguments.length;e++)if(void 0!==arguments[e])return arguments[e]}console.log("%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect ","color: #bada55; font-size: 0.8rem");var r=i.parent,o=i.displacementImage,a=i.image1,s=i.image2,l=n(i.imagesRatio,1),d=n(i.intensity1,i.intensity,1),f=n(i.intensity2,i.intensity,1),u=n(i.angle,Math.PI/4),m=n(i.angle1,u),v=n(i.angle2,3*-u),c=n(i.speedIn,i.speed,1.6),p=n(i.speedOut,i.speed,1.2),g=n(i.hover,!0),h=n(i.easing,"expo.out"),y=n(i.video,!1);if(r)if(a&&s&&o){var F=new e.Scene,x=new e.OrthographicCamera(r.offsetWidth/-2,r.offsetWidth/2,r.offsetHeight/2,r.offsetHeight/-2,1,1e3);x.position.z=1;var w=new e.WebGLRenderer({antialias:!1,alpha:!0});w.setPixelRatio(2),w.setClearColor(16777215,0),w.setSize(r.offsetWidth,r.offsetHeight),r.appendChild(w.domElement);var L=function(){w.render(F,x)},H=new e.TextureLoader;H.crossOrigin="";var W,V,E=H.load(o,L);if(E.magFilter=E.minFilter=e.LinearFilter,y){!function e(){requestAnimationFrame(e),w.render(F,x)}(),(y=document.createElement("video")).autoplay=!0,y.loop=!0,y.muted=!0,y.src=a,y.load();var P=document.createElement("video");P.autoplay=!0,P.loop=!0,P.muted=!0,P.src=s,P.load();var U=new e.VideoTexture(y),C=new e.VideoTexture(P);U.magFilter=C.magFilter=e.LinearFilter,U.minFilter=C.minFilter=e.LinearFilter,P.addEventListener("loadeddata",function(){P.play(),(C=new e.VideoTexture(P)).magFilter=e.LinearFilter,C.minFilter=e.LinearFilter,R.uniforms.texture2.value=C},!1),y.addEventListener("loadeddata",function(){y.play(),(U=new e.VideoTexture(y)).magFilter=e.LinearFilter,U.minFilter=e.LinearFilter,R.uniforms.texture1.value=U},!1)}else U=H.load(a,L),C=H.load(s,L),U.magFilter=C.magFilter=e.LinearFilter,U.minFilter=C.minFilter=e.LinearFilter;var M=l;r.offsetHeight/r.offsetWidth<M?(W=1,V=r.offsetHeight/r.offsetWidth/M):(W=r.offsetWidth/r.offsetHeight*M,V=1);var R=new e.ShaderMaterial({uniforms:{intensity1:{type:"f",value:d},intensity2:{type:"f",value:f},dispFactor:{type:"f",value:0},angle1:{type:"f",value:m},angle2:{type:"f",value:v},texture1:{type:"t",value:U},texture2:{type:"t",value:C},disp:{type:"t",value:E},res:{type:"vec4",value:new e.Vector4(r.offsetWidth,r.offsetHeight,W,V)},dpr:{type:"f",value:window.devicePixelRatio}},vertexShader:"\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}\n",fragmentShader:"\nvarying vec2 vUv;\n\nuniform float dispFactor;\nuniform float dpr;\nuniform sampler2D disp;\n\nuniform sampler2D texture1;\nuniform sampler2D texture2;\nuniform float angle1;\nuniform float angle2;\nuniform float intensity1;\nuniform float intensity2;\nuniform vec4 res;\nuniform vec2 parent;\n\nmat2 getRotM(float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c);\n}\n\nvoid 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",transparent:!0,opacity:1}),D=new e.PlaneGeometry(r.offsetWidth,r.offsetHeight,1),_=new e.Mesh(D,R);F.add(_),g&&(r.addEventListener("mouseenter",b),r.addEventListener("touchstart",b),r.addEventListener("mouseleave",z),r.addEventListener("touchend",z)),window.addEventListener("resize",function(t){r.offsetHeight/r.offsetWidth<M?(W=1,V=r.offsetHeight/r.offsetWidth/M):(W=r.offsetWidth/r.offsetHeight*M,V=1),_.material.uniforms.res.value=new e.Vector4(r.offsetWidth,r.offsetHeight,W,V),w.setSize(r.offsetWidth,r.offsetHeight),L()}),this.next=b,this.previous=z}else console.warn("One or more images are missing");else console.warn("Parent missing");function b(){t.to(R.uniforms.dispFactor,{duration:c,value:1,ease:h,onUpdate:L,onComplete:L})}function z(){t.to(R.uniforms.dispFactor,{duration:p,value:0,ease:h,onUpdate:L,onComplete:L})}}export{i as default};
2 | //# sourceMappingURL=hover-effect.es.js.map
3 | 


--------------------------------------------------------------------------------
/dist/hover-effect.es.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"hover-effect.es.js","sources":["../src/hover-effect.js"],"sourcesContent":["import * as THREE from \"three\";\nimport gsap from \"gsap\";\n\nexport default function(opts) {\n  var vertex = `\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}\n`;\n\n  var fragment = `\nvarying vec2 vUv;\n\nuniform float dispFactor;\nuniform float dpr;\nuniform sampler2D disp;\n\nuniform sampler2D texture1;\nuniform sampler2D texture2;\nuniform float angle1;\nuniform float angle2;\nuniform float intensity1;\nuniform float intensity2;\nuniform vec4 res;\nuniform vec2 parent;\n\nmat2 getRotM(float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c);\n}\n\nvoid 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`;\n\n  // please respect authorship and do not remove\n  console.log(\n    \"%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect \",\n    \"color: #bada55; font-size: 0.8rem\"\n  );\n\n  function firstDefined() {\n    for (var i = 0; i < arguments.length; i++) {\n      if (arguments[i] !== undefined) return arguments[i];\n    }\n  }\n\n  var parent = opts.parent;\n  var dispImage = opts.displacementImage;\n  var image1 = opts.image1;\n  var image2 = opts.image2;\n  var imagesRatio = firstDefined(opts.imagesRatio, 1.0);\n  var intensity1 = firstDefined(opts.intensity1, opts.intensity, 1);\n  var intensity2 = firstDefined(opts.intensity2, opts.intensity, 1);\n  var commonAngle = firstDefined(opts.angle, Math.PI / 4); // 45 degrees by default, so grayscale images work correctly\n  var angle1 = firstDefined(opts.angle1, commonAngle);\n  var angle2 = firstDefined(opts.angle2, -commonAngle * 3);\n  var speedIn = firstDefined(opts.speedIn, opts.speed, 1.6);\n  var speedOut = firstDefined(opts.speedOut, opts.speed, 1.2);\n  var userHover = firstDefined(opts.hover, true);\n  var easing = firstDefined(opts.easing, \"expo.out\");\n  var video = firstDefined(opts.video, false);\n\n  if (!parent) {\n    console.warn(\"Parent missing\");\n    return;\n  }\n\n  if (!(image1 && image2 && dispImage)) {\n    console.warn(\"One or more images are missing\");\n    return;\n  }\n\n  var scene = new THREE.Scene();\n  var camera = new THREE.OrthographicCamera(\n    parent.offsetWidth / -2,\n    parent.offsetWidth / 2,\n    parent.offsetHeight / 2,\n    parent.offsetHeight / -2,\n    1,\n    1000\n  );\n\n  camera.position.z = 1;\n\n  var renderer = new THREE.WebGLRenderer({\n    antialias: false,\n    alpha: true\n  });\n\n  renderer.setPixelRatio(2.0);\n  renderer.setClearColor(0xffffff, 0.0);\n  renderer.setSize(parent.offsetWidth, parent.offsetHeight);\n  parent.appendChild(renderer.domElement);\n\n  var render = function() {\n    // This will be called by the TextureLoader as well as Gsap.\n    renderer.render(scene, camera);\n  };\n\n  var loader = new THREE.TextureLoader();\n  loader.crossOrigin = \"\";\n\n  var disp = loader.load(dispImage, render);\n  disp.magFilter = disp.minFilter = THREE.LinearFilter;\n\n  if (video) {\n    var animate = function() {\n      requestAnimationFrame(animate);\n\n      renderer.render(scene, camera);\n    };\n    animate();\n\n    var video = document.createElement(\"video\");\n    video.autoplay = true;\n    video.loop = true;\n    video.muted = true;\n    video.src = image1;\n    video.load();\n\n    var video2 = document.createElement(\"video\");\n    video2.autoplay = true;\n    video2.loop = true;\n    video2.muted = true;\n    video2.src = image2;\n    video2.load();\n\n    var texture1 = new THREE.VideoTexture(video);\n    var texture2 = new THREE.VideoTexture(video2);\n    texture1.magFilter = texture2.magFilter = THREE.LinearFilter;\n    texture1.minFilter = texture2.minFilter = THREE.LinearFilter;\n\n    video2.addEventListener(\n      \"loadeddata\",\n      function() {\n        video2.play();\n\n        texture2 = new THREE.VideoTexture(video2);\n        texture2.magFilter = THREE.LinearFilter;\n        texture2.minFilter = THREE.LinearFilter;\n\n        mat.uniforms.texture2.value = texture2;\n      },\n      false\n    );\n\n    video.addEventListener(\n      \"loadeddata\",\n      function() {\n        video.play();\n\n        texture1 = new THREE.VideoTexture(video);\n\n        texture1.magFilter = THREE.LinearFilter;\n        texture1.minFilter = THREE.LinearFilter;\n\n        mat.uniforms.texture1.value = texture1;\n      },\n      false\n    );\n  } else {\n    var texture1 = loader.load(image1, render);\n    var texture2 = loader.load(image2, render);\n\n    texture1.magFilter = texture2.magFilter = THREE.LinearFilter;\n    texture1.minFilter = texture2.minFilter = THREE.LinearFilter;\n  }\n\n  let a1, a2;\n  var imageAspect = imagesRatio;\n  if (parent.offsetHeight / parent.offsetWidth < imageAspect) {\n    a1 = 1;\n    a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;\n  } else {\n    a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;\n    a2 = 1;\n  }\n\n  var mat = new THREE.ShaderMaterial({\n    uniforms: {\n      intensity1: {\n        type: \"f\",\n        value: intensity1\n      },\n      intensity2: {\n        type: \"f\",\n        value: intensity2\n      },\n      dispFactor: {\n        type: \"f\",\n        value: 0.0\n      },\n      angle1: {\n        type: \"f\",\n        value: angle1\n      },\n      angle2: {\n        type: \"f\",\n        value: angle2\n      },\n      texture1: {\n        type: \"t\",\n        value: texture1\n      },\n      texture2: {\n        type: \"t\",\n        value: texture2\n      },\n      disp: {\n        type: \"t\",\n        value: disp\n      },\n      res: {\n        type: \"vec4\",\n        value: new THREE.Vector4(\n          parent.offsetWidth,\n          parent.offsetHeight,\n          a1,\n          a2\n        )\n      },\n      dpr: {\n        type: \"f\",\n        value: window.devicePixelRatio\n      }\n    },\n\n    vertexShader: vertex,\n    fragmentShader: fragment,\n    transparent: true,\n    opacity: 1.0\n  });\n\n  var geometry = new THREE.PlaneGeometry(\n    parent.offsetWidth,\n    parent.offsetHeight,\n    1\n  );\n  var object = new THREE.Mesh(geometry, mat);\n  scene.add(object);\n\n  function transitionIn() {\n    gsap.to(mat.uniforms.dispFactor, {\n      duration: speedIn,\n      value: 1,\n      ease: easing,\n      onUpdate: render,\n      onComplete: render\n    });\n  }\n\n  function transitionOut() {\n    gsap.to(mat.uniforms.dispFactor, {\n      duration: speedOut,\n      value: 0,\n      ease: easing,\n      onUpdate: render,\n      onComplete: render\n    });\n  }\n\n  if (userHover) {\n    parent.addEventListener(\"mouseenter\", transitionIn);\n    parent.addEventListener(\"touchstart\", transitionIn);\n    parent.addEventListener(\"mouseleave\", transitionOut);\n    parent.addEventListener(\"touchend\", transitionOut);\n  }\n\n  window.addEventListener(\"resize\", function(e) {\n    if (parent.offsetHeight / parent.offsetWidth < imageAspect) {\n      a1 = 1;\n      a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;\n    } else {\n      a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;\n      a2 = 1;\n    }\n    object.material.uniforms.res.value = new THREE.Vector4(\n      parent.offsetWidth,\n      parent.offsetHeight,\n      a1,\n      a2\n    );\n    renderer.setSize(parent.offsetWidth, parent.offsetHeight);\n\n    render();\n  });\n\n  this.next = transitionIn;\n  this.previous = transitionOut;\n}\n"],"names":["hoverEffect","opts","firstDefined","i","arguments","length","undefined","console","log","parent","dispImage","displacementImage","image1","image2","imagesRatio","intensity1","intensity","intensity2","commonAngle","angle","Math","PI","angle1","angle2","speedIn","speed","speedOut","userHover","hover","easing","video","scene","THREE","Scene","camera","OrthographicCamera","offsetWidth","offsetHeight","position","z","renderer","WebGLRenderer","antialias","alpha","setPixelRatio","setClearColor","setSize","appendChild","domElement","render","loader","TextureLoader","crossOrigin","a1","a2","disp","load","magFilter","minFilter","LinearFilter","animate","requestAnimationFrame","document","createElement","autoplay","loop","muted","src","video2","texture1","VideoTexture","texture2","addEventListener","play","mat","uniforms","value","imageAspect","ShaderMaterial","type","dispFactor","res","Vector4","dpr","window","devicePixelRatio","vertexShader","fragmentShader","transparent","opacity","geometry","PlaneGeometry","object","Mesh","add","transitionIn","transitionOut","e","material","this","next","previous","warn","gsap","to","duration","ease","onUpdate","onComplete"],"mappings":"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"}


--------------------------------------------------------------------------------
/dist/hover-effect.js:
--------------------------------------------------------------------------------
1 | var e=require("three"),t=require("gsap");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var r=/*#__PURE__*/i(e),o=/*#__PURE__*/n(t);module.exports=function(e){function t(){for(var e=0;e<arguments.length;e++)if(void 0!==arguments[e])return arguments[e]}console.log("%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect ","color: #bada55; font-size: 0.8rem");var n=e.parent,i=e.displacementImage,a=e.image1,s=e.image2,f=t(e.imagesRatio,1),l=t(e.intensity1,e.intensity,1),d=t(e.intensity2,e.intensity,1),u=t(e.angle,Math.PI/4),v=t(e.angle1,u),c=t(e.angle2,3*-u),m=t(e.speedIn,e.speed,1.6),p=t(e.speedOut,e.speed,1.2),g=t(e.hover,!0),h=t(e.easing,"expo.out"),y=t(e.video,!1);if(n)if(a&&s&&i){var F=new r.Scene,x=new r.OrthographicCamera(n.offsetWidth/-2,n.offsetWidth/2,n.offsetHeight/2,n.offsetHeight/-2,1,1e3);x.position.z=1;var w=new r.WebGLRenderer({antialias:!1,alpha:!0});w.setPixelRatio(2),w.setClearColor(16777215,0),w.setSize(n.offsetWidth,n.offsetHeight),n.appendChild(w.domElement);var L=function(){w.render(F,x)},H=new r.TextureLoader;H.crossOrigin="";var W,V,b=H.load(i,L);if(b.magFilter=b.minFilter=r.LinearFilter,y){!function e(){requestAnimationFrame(e),w.render(F,x)}(),(y=document.createElement("video")).autoplay=!0,y.loop=!0,y.muted=!0,y.src=a,y.load();var P=document.createElement("video");P.autoplay=!0,P.loop=!0,P.muted=!0,P.src=s,P.load();var E=new r.VideoTexture(y),M=new r.VideoTexture(P);E.magFilter=M.magFilter=r.LinearFilter,E.minFilter=M.minFilter=r.LinearFilter,P.addEventListener("loadeddata",function(){P.play(),(M=new r.VideoTexture(P)).magFilter=r.LinearFilter,M.minFilter=r.LinearFilter,U.uniforms.texture2.value=M},!1),y.addEventListener("loadeddata",function(){y.play(),(E=new r.VideoTexture(y)).magFilter=r.LinearFilter,E.minFilter=r.LinearFilter,U.uniforms.texture1.value=E},!1)}else E=H.load(a,L),M=H.load(s,L),E.magFilter=M.magFilter=r.LinearFilter,E.minFilter=M.minFilter=r.LinearFilter;var O=f;n.offsetHeight/n.offsetWidth<O?(W=1,V=n.offsetHeight/n.offsetWidth/O):(W=n.offsetWidth/n.offsetHeight*O,V=1);var U=new r.ShaderMaterial({uniforms:{intensity1:{type:"f",value:l},intensity2:{type:"f",value:d},dispFactor:{type:"f",value:0},angle1:{type:"f",value:v},angle2:{type:"f",value:c},texture1:{type:"t",value:E},texture2:{type:"t",value:M},disp:{type:"t",value:b},res:{type:"vec4",value:new r.Vector4(n.offsetWidth,n.offsetHeight,W,V)},dpr:{type:"f",value:window.devicePixelRatio}},vertexShader:"\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}\n",fragmentShader:"\nvarying vec2 vUv;\n\nuniform float dispFactor;\nuniform float dpr;\nuniform sampler2D disp;\n\nuniform sampler2D texture1;\nuniform sampler2D texture2;\nuniform float angle1;\nuniform float angle2;\nuniform float intensity1;\nuniform float intensity2;\nuniform vec4 res;\nuniform vec2 parent;\n\nmat2 getRotM(float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c);\n}\n\nvoid 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",transparent:!0,opacity:1}),_=new r.PlaneGeometry(n.offsetWidth,n.offsetHeight,1),C=new r.Mesh(_,U);F.add(C),g&&(n.addEventListener("mouseenter",D),n.addEventListener("touchstart",D),n.addEventListener("mouseleave",R),n.addEventListener("touchend",R)),window.addEventListener("resize",function(e){n.offsetHeight/n.offsetWidth<O?(W=1,V=n.offsetHeight/n.offsetWidth/O):(W=n.offsetWidth/n.offsetHeight*O,V=1),C.material.uniforms.res.value=new r.Vector4(n.offsetWidth,n.offsetHeight,W,V),w.setSize(n.offsetWidth,n.offsetHeight),L()}),this.next=D,this.previous=R}else console.warn("One or more images are missing");else console.warn("Parent missing");function D(){o.default.to(U.uniforms.dispFactor,{duration:m,value:1,ease:h,onUpdate:L,onComplete:L})}function R(){o.default.to(U.uniforms.dispFactor,{duration:p,value:0,ease:h,onUpdate:L,onComplete:L})}};
2 | //# sourceMappingURL=hover-effect.js.map
3 | 


--------------------------------------------------------------------------------
/dist/hover-effect.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"hover-effect.js","sources":["../src/hover-effect.js"],"sourcesContent":["import * as THREE from \"three\";\nimport gsap from \"gsap\";\n\nexport default function(opts) {\n  var vertex = `\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}\n`;\n\n  var fragment = `\nvarying vec2 vUv;\n\nuniform float dispFactor;\nuniform float dpr;\nuniform sampler2D disp;\n\nuniform sampler2D texture1;\nuniform sampler2D texture2;\nuniform float angle1;\nuniform float angle2;\nuniform float intensity1;\nuniform float intensity2;\nuniform vec4 res;\nuniform vec2 parent;\n\nmat2 getRotM(float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c);\n}\n\nvoid 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`;\n\n  // please respect authorship and do not remove\n  console.log(\n    \"%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect \",\n    \"color: #bada55; font-size: 0.8rem\"\n  );\n\n  function firstDefined() {\n    for (var i = 0; i < arguments.length; i++) {\n      if (arguments[i] !== undefined) return arguments[i];\n    }\n  }\n\n  var parent = opts.parent;\n  var dispImage = opts.displacementImage;\n  var image1 = opts.image1;\n  var image2 = opts.image2;\n  var imagesRatio = firstDefined(opts.imagesRatio, 1.0);\n  var intensity1 = firstDefined(opts.intensity1, opts.intensity, 1);\n  var intensity2 = firstDefined(opts.intensity2, opts.intensity, 1);\n  var commonAngle = firstDefined(opts.angle, Math.PI / 4); // 45 degrees by default, so grayscale images work correctly\n  var angle1 = firstDefined(opts.angle1, commonAngle);\n  var angle2 = firstDefined(opts.angle2, -commonAngle * 3);\n  var speedIn = firstDefined(opts.speedIn, opts.speed, 1.6);\n  var speedOut = firstDefined(opts.speedOut, opts.speed, 1.2);\n  var userHover = firstDefined(opts.hover, true);\n  var easing = firstDefined(opts.easing, \"expo.out\");\n  var video = firstDefined(opts.video, false);\n\n  if (!parent) {\n    console.warn(\"Parent missing\");\n    return;\n  }\n\n  if (!(image1 && image2 && dispImage)) {\n    console.warn(\"One or more images are missing\");\n    return;\n  }\n\n  var scene = new THREE.Scene();\n  var camera = new THREE.OrthographicCamera(\n    parent.offsetWidth / -2,\n    parent.offsetWidth / 2,\n    parent.offsetHeight / 2,\n    parent.offsetHeight / -2,\n    1,\n    1000\n  );\n\n  camera.position.z = 1;\n\n  var renderer = new THREE.WebGLRenderer({\n    antialias: false,\n    alpha: true\n  });\n\n  renderer.setPixelRatio(2.0);\n  renderer.setClearColor(0xffffff, 0.0);\n  renderer.setSize(parent.offsetWidth, parent.offsetHeight);\n  parent.appendChild(renderer.domElement);\n\n  var render = function() {\n    // This will be called by the TextureLoader as well as Gsap.\n    renderer.render(scene, camera);\n  };\n\n  var loader = new THREE.TextureLoader();\n  loader.crossOrigin = \"\";\n\n  var disp = loader.load(dispImage, render);\n  disp.magFilter = disp.minFilter = THREE.LinearFilter;\n\n  if (video) {\n    var animate = function() {\n      requestAnimationFrame(animate);\n\n      renderer.render(scene, camera);\n    };\n    animate();\n\n    var video = document.createElement(\"video\");\n    video.autoplay = true;\n    video.loop = true;\n    video.muted = true;\n    video.src = image1;\n    video.load();\n\n    var video2 = document.createElement(\"video\");\n    video2.autoplay = true;\n    video2.loop = true;\n    video2.muted = true;\n    video2.src = image2;\n    video2.load();\n\n    var texture1 = new THREE.VideoTexture(video);\n    var texture2 = new THREE.VideoTexture(video2);\n    texture1.magFilter = texture2.magFilter = THREE.LinearFilter;\n    texture1.minFilter = texture2.minFilter = THREE.LinearFilter;\n\n    video2.addEventListener(\n      \"loadeddata\",\n      function() {\n        video2.play();\n\n        texture2 = new THREE.VideoTexture(video2);\n        texture2.magFilter = THREE.LinearFilter;\n        texture2.minFilter = THREE.LinearFilter;\n\n        mat.uniforms.texture2.value = texture2;\n      },\n      false\n    );\n\n    video.addEventListener(\n      \"loadeddata\",\n      function() {\n        video.play();\n\n        texture1 = new THREE.VideoTexture(video);\n\n        texture1.magFilter = THREE.LinearFilter;\n        texture1.minFilter = THREE.LinearFilter;\n\n        mat.uniforms.texture1.value = texture1;\n      },\n      false\n    );\n  } else {\n    var texture1 = loader.load(image1, render);\n    var texture2 = loader.load(image2, render);\n\n    texture1.magFilter = texture2.magFilter = THREE.LinearFilter;\n    texture1.minFilter = texture2.minFilter = THREE.LinearFilter;\n  }\n\n  let a1, a2;\n  var imageAspect = imagesRatio;\n  if (parent.offsetHeight / parent.offsetWidth < imageAspect) {\n    a1 = 1;\n    a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;\n  } else {\n    a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;\n    a2 = 1;\n  }\n\n  var mat = new THREE.ShaderMaterial({\n    uniforms: {\n      intensity1: {\n        type: \"f\",\n        value: intensity1\n      },\n      intensity2: {\n        type: \"f\",\n        value: intensity2\n      },\n      dispFactor: {\n        type: \"f\",\n        value: 0.0\n      },\n      angle1: {\n        type: \"f\",\n        value: angle1\n      },\n      angle2: {\n        type: \"f\",\n        value: angle2\n      },\n      texture1: {\n        type: \"t\",\n        value: texture1\n      },\n      texture2: {\n        type: \"t\",\n        value: texture2\n      },\n      disp: {\n        type: \"t\",\n        value: disp\n      },\n      res: {\n        type: \"vec4\",\n        value: new THREE.Vector4(\n          parent.offsetWidth,\n          parent.offsetHeight,\n          a1,\n          a2\n        )\n      },\n      dpr: {\n        type: \"f\",\n        value: window.devicePixelRatio\n      }\n    },\n\n    vertexShader: vertex,\n    fragmentShader: fragment,\n    transparent: true,\n    opacity: 1.0\n  });\n\n  var geometry = new THREE.PlaneGeometry(\n    parent.offsetWidth,\n    parent.offsetHeight,\n    1\n  );\n  var object = new THREE.Mesh(geometry, mat);\n  scene.add(object);\n\n  function transitionIn() {\n    gsap.to(mat.uniforms.dispFactor, {\n      duration: speedIn,\n      value: 1,\n      ease: easing,\n      onUpdate: render,\n      onComplete: render\n    });\n  }\n\n  function transitionOut() {\n    gsap.to(mat.uniforms.dispFactor, {\n      duration: speedOut,\n      value: 0,\n      ease: easing,\n      onUpdate: render,\n      onComplete: render\n    });\n  }\n\n  if (userHover) {\n    parent.addEventListener(\"mouseenter\", transitionIn);\n    parent.addEventListener(\"touchstart\", transitionIn);\n    parent.addEventListener(\"mouseleave\", transitionOut);\n    parent.addEventListener(\"touchend\", transitionOut);\n  }\n\n  window.addEventListener(\"resize\", function(e) {\n    if (parent.offsetHeight / parent.offsetWidth < imageAspect) {\n      a1 = 1;\n      a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;\n    } else {\n      a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;\n      a2 = 1;\n    }\n    object.material.uniforms.res.value = new THREE.Vector4(\n      parent.offsetWidth,\n      parent.offsetHeight,\n      a1,\n      a2\n    );\n    renderer.setSize(parent.offsetWidth, parent.offsetHeight);\n\n    render();\n  });\n\n  this.next = transitionIn;\n  this.previous = transitionOut;\n}\n"],"names":["opts","firstDefined","i","arguments","length","undefined","console","log","parent","dispImage","displacementImage","image1","image2","imagesRatio","intensity1","intensity","intensity2","commonAngle","angle","Math","PI","angle1","angle2","speedIn","speed","speedOut","userHover","hover","easing","video","scene","THREE","Scene","camera","OrthographicCamera","offsetWidth","offsetHeight","position","z","renderer","WebGLRenderer","antialias","alpha","setPixelRatio","setClearColor","setSize","appendChild","domElement","render","loader","TextureLoader","crossOrigin","a1","a2","disp","load","magFilter","minFilter","LinearFilter","animate","requestAnimationFrame","document","createElement","autoplay","loop","muted","src","video2","texture1","VideoTexture","texture2","addEventListener","play","mat","uniforms","value","imageAspect","ShaderMaterial","type","dispFactor","res","Vector4","dpr","window","devicePixelRatio","vertexShader","fragmentShader","transparent","opacity","geometry","PlaneGeometry","object","Mesh","add","transitionIn","transitionOut","e","material","this","next","previous","warn","gsap","to","duration","ease","onUpdate","onComplete"],"mappings":"0bAGe,SAASA,GAqDtB,SAASC,IACP,IAAK,IAAIC,EAAI,EAAGA,EAAIC,UAAUC,OAAQF,IACpC,QAAqBG,IAAjBF,UAAUD,GAAkB,OAAgBC,UAACD,EAErD,CATAI,QAAQC,IACN,kFACA,qCASF,MAAaP,EAAKQ,OACdC,EAAYT,EAAKU,oBACRV,EAAKW,OACdC,EAASZ,EAAKY,OACdC,EAAcZ,EAAaD,EAAKa,YAAa,GACnCC,EAAGb,EAAaD,EAAKc,WAAYd,EAAKe,UAAW,GACjDC,EAAGf,EAAaD,EAAKgB,WAAYhB,EAAKe,UAAW,GAC3DE,EAAchB,EAAaD,EAAKkB,MAAOC,KAAKC,GAAK,GAC3CC,EAAGpB,EAAaD,EAAKqB,OAAQJ,GAC7BK,EAAGrB,EAAaD,EAAKsB,OAAuB,GAAdL,GAC7BM,EAAGtB,EAAaD,EAAKuB,QAASvB,EAAKwB,MAAO,OACtCvB,EAAaD,EAAKyB,SAAUzB,EAAKwB,MAAO,KAC1CE,EAAGzB,EAAaD,EAAK2B,OAAO,GAC/BC,EAAG3B,EAAaD,EAAK4B,OAAQ,YAC9BC,EAAG5B,EAAaD,EAAK6B,OAAO,GAErC,GAAKrB,EAKL,GAAMG,GAAUC,GAAUH,EAA1B,CAKA,IAASqB,EAAG,IAAIC,EAAMC,MAClBC,EAAS,IAAIF,EAAMG,mBACrB1B,EAAO2B,aAAe,EACtB3B,EAAO2B,YAAc,EACrB3B,EAAO4B,aAAe,EACtB5B,EAAO4B,cAAgB,EACvB,EACA,KAGFH,EAAOI,SAASC,EAAI,EAEpB,IAAIC,EAAW,MAAUC,cAAc,CACrCC,WAAW,EACXC,OAAO,IAGTH,EAASI,cAAc,GACvBJ,EAASK,cAAc,SAAU,GACjCL,EAASM,QAAQrC,EAAO2B,YAAa3B,EAAO4B,cAC5C5B,EAAOsC,YAAYP,EAASQ,YAE5B,IAAUC,EAAG,WAEXT,EAASS,OAAOlB,EAAOG,EACzB,EAEUgB,EAAG,IAASlB,EAACmB,cACvBD,EAAOE,YAAc,GAErB,IAkEMC,EAAEC,EAlEJC,EAAOL,EAAOM,KAAK9C,EAAWuC,GAGlC,GAFAM,EAAKE,UAAYF,EAAKG,UAAY1B,EAAM2B,aAEpC7B,EAAO,EACK,SAAV8B,IACFC,sBAAsBD,GAEtBpB,EAASS,OAAOlB,EAAOG,EACzB,CACA0B,IAEI9B,EAAQgC,SAASC,cAAc,UAC7BC,UAAW,EACjBlC,EAAMmC,MAAO,EACbnC,EAAMoC,OAAQ,EACdpC,EAAMqC,IAAMvD,EACZkB,EAAM0B,OAEN,IAAIY,EAASN,SAASC,cAAc,SACpCK,EAAOJ,UAAW,EAClBI,EAAOH,MAAO,EACdG,EAAOF,OAAQ,EACfE,EAAOD,IAAMtD,EACbuD,EAAOZ,OAEP,IAAIa,EAAW,MAAUC,aAAaxC,GAC1ByC,EAAG,IAASvC,EAACsC,aAAaF,GACtCC,EAASZ,UAAYc,EAASd,UAAYzB,EAAM2B,aAChDU,EAASX,UAAYa,EAASb,UAAY1B,EAAM2B,aAEhDS,EAAOI,iBACL,aACA,WACEJ,EAAOK,QAEPF,EAAW,IAASvC,EAACsC,aAAaF,IACzBX,UAAYzB,EAAM2B,aAC3BY,EAASb,UAAY1B,EAAM2B,aAE3Be,EAAIC,SAASJ,SAASK,MAAQL,CAChC,GACA,GAGFzC,EAAM0C,iBACJ,aACA,WACE1C,EAAM2C,QAENJ,EAAW,IAASrC,EAACsC,aAAaxC,IAEzB2B,UAAYzB,EAAM2B,aAC3BU,EAASX,UAAY1B,EAAM2B,aAE3Be,EAAIC,SAASN,SAASO,MAAQP,CAChC,GACA,EAEJ,MACMA,EAAWnB,EAAOM,KAAK5C,EAAQqC,GACvBsB,EAAGrB,EAAOM,KAAK3C,EAAQoC,GAEnCoB,EAASZ,UAAYc,EAASd,UAAYzB,EAAM2B,aAChDU,EAASX,UAAYa,EAASb,UAAY1B,EAAM2B,aAIlD,IAAekB,EAAG/D,EACdL,EAAO4B,aAAe5B,EAAO2B,YAAcyC,GAC7CxB,EAAK,EACLC,EAAK7C,EAAO4B,aAAe5B,EAAO2B,YAAcyC,IAEhDxB,EAAM5C,EAAO2B,YAAc3B,EAAO4B,aAAgBwC,EAClDvB,EAAK,GAGP,MAAU,IAAStB,EAAC8C,eAAe,CACjCH,SAAU,CACR5D,WAAY,CACVgE,KAAM,IACNH,MAAO7D,GAETE,WAAY,CACV8D,KAAM,IACNH,MAAO3D,GAET+D,WAAY,CACVD,KAAM,IACNH,MAAO,GAETtD,OAAQ,CACNyD,KAAM,IACNH,MAAOtD,GAETC,OAAQ,CACNwD,KAAM,IACNH,MAAOrD,GAET8C,SAAU,CACRU,KAAM,IACNH,MAAOP,GAETE,SAAU,CACRQ,KAAM,IACNH,MAAOL,GAEThB,KAAM,CACJwB,KAAM,IACNH,MAAOrB,GAET0B,IAAK,CACHF,KAAM,OACNH,MAAO,IAAI5C,EAAMkD,QACfzE,EAAO2B,YACP3B,EAAO4B,aACPgB,EACAC,IAGJ6B,IAAK,CACHJ,KAAM,IACNH,MAAOQ,OAAOC,mBAIlBC,aAzOH,oIA0OGC,eAxOU,o9BAyOVC,aAAa,EACbC,QAAS,IAGCC,EAAG,IAAS1D,EAAC2D,cACvBlF,EAAO2B,YACP3B,EAAO4B,aACP,GAEEuD,EAAS,MAAUC,KAAKH,EAAUhB,GACtC3C,EAAM+D,IAAIF,GAsBNjE,IACFlB,EAAO+D,iBAAiB,aAAcuB,GACtCtF,EAAO+D,iBAAiB,aAAcuB,GACtCtF,EAAO+D,iBAAiB,aAAcwB,GACtCvF,EAAO+D,iBAAiB,WAAYwB,IAGtCZ,OAAOZ,iBAAiB,SAAU,SAASyB,GACrCxF,EAAO4B,aAAe5B,EAAO2B,YAAcyC,GAC7CxB,EAAK,EACLC,EAAK7C,EAAO4B,aAAe5B,EAAO2B,YAAcyC,IAEhDxB,EAAM5C,EAAO2B,YAAc3B,EAAO4B,aAAgBwC,EAClDvB,EAAK,GAEPsC,EAAOM,SAASvB,SAASM,IAAIL,MAAQ,IAAS5C,EAACkD,QAC7CzE,EAAO2B,YACP3B,EAAO4B,aACPgB,EACAC,GAEFd,EAASM,QAAQrC,EAAO2B,YAAa3B,EAAO4B,cAE5CY,GACF,GAEAkD,KAAKC,KAAOL,EACZI,KAAKE,SAAWL,CA1NhB,MAFEzF,QAAQ+F,KAAK,uCALb/F,QAAQ+F,KAAK,kBAkLf,SAAqBP,IACnBQ,EAAAA,QAAKC,GAAG9B,EAAIC,SAASK,WAAY,CAC/ByB,SAAUjF,EACVoD,MAAO,EACP8B,KAAM7E,EACN8E,SAAU1D,EACV2D,WAAY3D,GAEhB,CAEA,aACEsD,EAAAA,QAAKC,GAAG9B,EAAIC,SAASK,WAAY,CAC/ByB,SAAU/E,EACVkD,MAAO,EACP8B,KAAM7E,EACN8E,SAAU1D,EACV2D,WAAY3D,GAEhB,CA8BF"}


--------------------------------------------------------------------------------
/dist/hover-effect.modern.mjs:
--------------------------------------------------------------------------------
1 | import*as e from"three";import t from"gsap";function i(i){function n(){for(var e=0;e<arguments.length;e++)if(void 0!==arguments[e])return arguments[e]}console.log("%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect ","color: #bada55; font-size: 0.8rem");var r=i.parent,o=i.displacementImage,a=i.image1,s=i.image2,d=n(i.imagesRatio,1),l=n(i.intensity1,i.intensity,1),f=n(i.intensity2,i.intensity,1),u=n(i.angle,Math.PI/4),v=n(i.angle1,u),m=n(i.angle2,3*-u),c=n(i.speedIn,i.speed,1.6),p=n(i.speedOut,i.speed,1.2),g=n(i.hover,!0),h=n(i.easing,"expo.out"),y=n(i.video,!1);if(!r)return void console.warn("Parent missing");if(!(a&&s&&o))return void console.warn("One or more images are missing");var F=new e.Scene,x=new e.OrthographicCamera(r.offsetWidth/-2,r.offsetWidth/2,r.offsetHeight/2,r.offsetHeight/-2,1,1e3);x.position.z=1;var w=new e.WebGLRenderer({antialias:!1,alpha:!0});w.setPixelRatio(2),w.setClearColor(16777215,0),w.setSize(r.offsetWidth,r.offsetHeight),r.appendChild(w.domElement);var L=function(){w.render(F,x)},H=new e.TextureLoader;H.crossOrigin="";var W=H.load(o,L);if(W.magFilter=W.minFilter=e.LinearFilter,y){!function e(){requestAnimationFrame(e),w.render(F,x)}(),(y=document.createElement("video")).autoplay=!0,y.loop=!0,y.muted=!0,y.src=a,y.load();var V=document.createElement("video");V.autoplay=!0,V.loop=!0,V.muted=!0,V.src=s,V.load();var E=new e.VideoTexture(y),P=new e.VideoTexture(V);E.magFilter=P.magFilter=e.LinearFilter,E.minFilter=P.minFilter=e.LinearFilter,V.addEventListener("loadeddata",function(){V.play(),(P=new e.VideoTexture(V)).magFilter=e.LinearFilter,P.minFilter=e.LinearFilter,R.uniforms.texture2.value=P},!1),y.addEventListener("loadeddata",function(){y.play(),(E=new e.VideoTexture(y)).magFilter=e.LinearFilter,E.minFilter=e.LinearFilter,R.uniforms.texture1.value=E},!1)}else E=H.load(a,L),P=H.load(s,L),E.magFilter=P.magFilter=e.LinearFilter,E.minFilter=P.minFilter=e.LinearFilter;let U,C;var M=d;r.offsetHeight/r.offsetWidth<M?(U=1,C=r.offsetHeight/r.offsetWidth/M):(U=r.offsetWidth/r.offsetHeight*M,C=1);var R=new e.ShaderMaterial({uniforms:{intensity1:{type:"f",value:l},intensity2:{type:"f",value:f},dispFactor:{type:"f",value:0},angle1:{type:"f",value:v},angle2:{type:"f",value:m},texture1:{type:"t",value:E},texture2:{type:"t",value:P},disp:{type:"t",value:W},res:{type:"vec4",value:new e.Vector4(r.offsetWidth,r.offsetHeight,U,C)},dpr:{type:"f",value:window.devicePixelRatio}},vertexShader:"\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}\n",fragmentShader:"\nvarying vec2 vUv;\n\nuniform float dispFactor;\nuniform float dpr;\nuniform sampler2D disp;\n\nuniform sampler2D texture1;\nuniform sampler2D texture2;\nuniform float angle1;\nuniform float angle2;\nuniform float intensity1;\nuniform float intensity2;\nuniform vec4 res;\nuniform vec2 parent;\n\nmat2 getRotM(float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c);\n}\n\nvoid 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",transparent:!0,opacity:1}),D=new e.PlaneGeometry(r.offsetWidth,r.offsetHeight,1),_=new e.Mesh(D,R);function b(){t.to(R.uniforms.dispFactor,{duration:c,value:1,ease:h,onUpdate:L,onComplete:L})}function z(){t.to(R.uniforms.dispFactor,{duration:p,value:0,ease:h,onUpdate:L,onComplete:L})}F.add(_),g&&(r.addEventListener("mouseenter",b),r.addEventListener("touchstart",b),r.addEventListener("mouseleave",z),r.addEventListener("touchend",z)),window.addEventListener("resize",function(t){r.offsetHeight/r.offsetWidth<M?(U=1,C=r.offsetHeight/r.offsetWidth/M):(U=r.offsetWidth/r.offsetHeight*M,C=1),_.material.uniforms.res.value=new e.Vector4(r.offsetWidth,r.offsetHeight,U,C),w.setSize(r.offsetWidth,r.offsetHeight),L()}),this.next=b,this.previous=z}export{i as default};
2 | //# sourceMappingURL=hover-effect.modern.mjs.map
3 | 


--------------------------------------------------------------------------------
/dist/hover-effect.modern.mjs.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"hover-effect.modern.mjs","sources":["../src/hover-effect.js"],"sourcesContent":["import * as THREE from \"three\";\nimport gsap from \"gsap\";\n\nexport default function(opts) {\n  var vertex = `\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}\n`;\n\n  var fragment = `\nvarying vec2 vUv;\n\nuniform float dispFactor;\nuniform float dpr;\nuniform sampler2D disp;\n\nuniform sampler2D texture1;\nuniform sampler2D texture2;\nuniform float angle1;\nuniform float angle2;\nuniform float intensity1;\nuniform float intensity2;\nuniform vec4 res;\nuniform vec2 parent;\n\nmat2 getRotM(float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c);\n}\n\nvoid 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`;\n\n  // please respect authorship and do not remove\n  console.log(\n    \"%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect \",\n    \"color: #bada55; font-size: 0.8rem\"\n  );\n\n  function firstDefined() {\n    for (var i = 0; i < arguments.length; i++) {\n      if (arguments[i] !== undefined) return arguments[i];\n    }\n  }\n\n  var parent = opts.parent;\n  var dispImage = opts.displacementImage;\n  var image1 = opts.image1;\n  var image2 = opts.image2;\n  var imagesRatio = firstDefined(opts.imagesRatio, 1.0);\n  var intensity1 = firstDefined(opts.intensity1, opts.intensity, 1);\n  var intensity2 = firstDefined(opts.intensity2, opts.intensity, 1);\n  var commonAngle = firstDefined(opts.angle, Math.PI / 4); // 45 degrees by default, so grayscale images work correctly\n  var angle1 = firstDefined(opts.angle1, commonAngle);\n  var angle2 = firstDefined(opts.angle2, -commonAngle * 3);\n  var speedIn = firstDefined(opts.speedIn, opts.speed, 1.6);\n  var speedOut = firstDefined(opts.speedOut, opts.speed, 1.2);\n  var userHover = firstDefined(opts.hover, true);\n  var easing = firstDefined(opts.easing, \"expo.out\");\n  var video = firstDefined(opts.video, false);\n\n  if (!parent) {\n    console.warn(\"Parent missing\");\n    return;\n  }\n\n  if (!(image1 && image2 && dispImage)) {\n    console.warn(\"One or more images are missing\");\n    return;\n  }\n\n  var scene = new THREE.Scene();\n  var camera = new THREE.OrthographicCamera(\n    parent.offsetWidth / -2,\n    parent.offsetWidth / 2,\n    parent.offsetHeight / 2,\n    parent.offsetHeight / -2,\n    1,\n    1000\n  );\n\n  camera.position.z = 1;\n\n  var renderer = new THREE.WebGLRenderer({\n    antialias: false,\n    alpha: true\n  });\n\n  renderer.setPixelRatio(2.0);\n  renderer.setClearColor(0xffffff, 0.0);\n  renderer.setSize(parent.offsetWidth, parent.offsetHeight);\n  parent.appendChild(renderer.domElement);\n\n  var render = function() {\n    // This will be called by the TextureLoader as well as Gsap.\n    renderer.render(scene, camera);\n  };\n\n  var loader = new THREE.TextureLoader();\n  loader.crossOrigin = \"\";\n\n  var disp = loader.load(dispImage, render);\n  disp.magFilter = disp.minFilter = THREE.LinearFilter;\n\n  if (video) {\n    var animate = function() {\n      requestAnimationFrame(animate);\n\n      renderer.render(scene, camera);\n    };\n    animate();\n\n    var video = document.createElement(\"video\");\n    video.autoplay = true;\n    video.loop = true;\n    video.muted = true;\n    video.src = image1;\n    video.load();\n\n    var video2 = document.createElement(\"video\");\n    video2.autoplay = true;\n    video2.loop = true;\n    video2.muted = true;\n    video2.src = image2;\n    video2.load();\n\n    var texture1 = new THREE.VideoTexture(video);\n    var texture2 = new THREE.VideoTexture(video2);\n    texture1.magFilter = texture2.magFilter = THREE.LinearFilter;\n    texture1.minFilter = texture2.minFilter = THREE.LinearFilter;\n\n    video2.addEventListener(\n      \"loadeddata\",\n      function() {\n        video2.play();\n\n        texture2 = new THREE.VideoTexture(video2);\n        texture2.magFilter = THREE.LinearFilter;\n        texture2.minFilter = THREE.LinearFilter;\n\n        mat.uniforms.texture2.value = texture2;\n      },\n      false\n    );\n\n    video.addEventListener(\n      \"loadeddata\",\n      function() {\n        video.play();\n\n        texture1 = new THREE.VideoTexture(video);\n\n        texture1.magFilter = THREE.LinearFilter;\n        texture1.minFilter = THREE.LinearFilter;\n\n        mat.uniforms.texture1.value = texture1;\n      },\n      false\n    );\n  } else {\n    var texture1 = loader.load(image1, render);\n    var texture2 = loader.load(image2, render);\n\n    texture1.magFilter = texture2.magFilter = THREE.LinearFilter;\n    texture1.minFilter = texture2.minFilter = THREE.LinearFilter;\n  }\n\n  let a1, a2;\n  var imageAspect = imagesRatio;\n  if (parent.offsetHeight / parent.offsetWidth < imageAspect) {\n    a1 = 1;\n    a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;\n  } else {\n    a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;\n    a2 = 1;\n  }\n\n  var mat = new THREE.ShaderMaterial({\n    uniforms: {\n      intensity1: {\n        type: \"f\",\n        value: intensity1\n      },\n      intensity2: {\n        type: \"f\",\n        value: intensity2\n      },\n      dispFactor: {\n        type: \"f\",\n        value: 0.0\n      },\n      angle1: {\n        type: \"f\",\n        value: angle1\n      },\n      angle2: {\n        type: \"f\",\n        value: angle2\n      },\n      texture1: {\n        type: \"t\",\n        value: texture1\n      },\n      texture2: {\n        type: \"t\",\n        value: texture2\n      },\n      disp: {\n        type: \"t\",\n        value: disp\n      },\n      res: {\n        type: \"vec4\",\n        value: new THREE.Vector4(\n          parent.offsetWidth,\n          parent.offsetHeight,\n          a1,\n          a2\n        )\n      },\n      dpr: {\n        type: \"f\",\n        value: window.devicePixelRatio\n      }\n    },\n\n    vertexShader: vertex,\n    fragmentShader: fragment,\n    transparent: true,\n    opacity: 1.0\n  });\n\n  var geometry = new THREE.PlaneGeometry(\n    parent.offsetWidth,\n    parent.offsetHeight,\n    1\n  );\n  var object = new THREE.Mesh(geometry, mat);\n  scene.add(object);\n\n  function transitionIn() {\n    gsap.to(mat.uniforms.dispFactor, {\n      duration: speedIn,\n      value: 1,\n      ease: easing,\n      onUpdate: render,\n      onComplete: render\n    });\n  }\n\n  function transitionOut() {\n    gsap.to(mat.uniforms.dispFactor, {\n      duration: speedOut,\n      value: 0,\n      ease: easing,\n      onUpdate: render,\n      onComplete: render\n    });\n  }\n\n  if (userHover) {\n    parent.addEventListener(\"mouseenter\", transitionIn);\n    parent.addEventListener(\"touchstart\", transitionIn);\n    parent.addEventListener(\"mouseleave\", transitionOut);\n    parent.addEventListener(\"touchend\", transitionOut);\n  }\n\n  window.addEventListener(\"resize\", function(e) {\n    if (parent.offsetHeight / parent.offsetWidth < imageAspect) {\n      a1 = 1;\n      a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;\n    } else {\n      a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;\n      a2 = 1;\n    }\n    object.material.uniforms.res.value = new THREE.Vector4(\n      parent.offsetWidth,\n      parent.offsetHeight,\n      a1,\n      a2\n    );\n    renderer.setSize(parent.offsetWidth, parent.offsetHeight);\n\n    render();\n  });\n\n  this.next = transitionIn;\n  this.previous = transitionOut;\n}\n"],"names":["opts","firstDefined","i","arguments","length","undefined","console","log","parent","dispImage","displacementImage","image1","image2","imagesRatio","intensity1","intensity","intensity2","angle","Math","PI","angle1","commonAngle","angle2","speedIn","speed","speedOut","userHover","hover","easing","video","warn","scene","THREE","Scene","camera","OrthographicCamera","offsetWidth","offsetHeight","position","z","renderer","WebGLRenderer","antialias","alpha","setPixelRatio","setClearColor","setSize","appendChild","domElement","render","loader","TextureLoader","crossOrigin","disp","load","magFilter","minFilter","LinearFilter","requestAnimationFrame","animate","document","createElement","autoplay","loop","muted","src","video2","texture1","VideoTexture","texture2","addEventListener","play","mat","uniforms","value","a1","a2","imageAspect","ShaderMaterial","type","dispFactor","res","Vector4","dpr","window","devicePixelRatio","vertexShader","fragmentShader","transparent","opacity","geometry","PlaneGeometry","object","Mesh","transitionIn","gsap","to","duration","ease","onUpdate","onComplete","transitionOut","add","e","material","this","next","previous"],"mappings":"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"}


--------------------------------------------------------------------------------
/dist/hover-effect.umd.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("three"),require("gsap")):"function"==typeof define&&define.amd?define(["three","gsap"],t):(e||self).hoverEffect=t(e.THREE,e.gsap)}(this,function(e,t){function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach(function(n){if("default"!==n){var i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,i.get?i:{enumerable:!0,get:function(){return e[n]}})}}),t.default=e,t}var r=/*#__PURE__*/i(e),o=/*#__PURE__*/n(t);return function(e){function t(){for(var e=0;e<arguments.length;e++)if(void 0!==arguments[e])return arguments[e]}console.log("%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect ","color: #bada55; font-size: 0.8rem");var n=e.parent,i=e.displacementImage,a=e.image1,s=e.image2,f=t(e.imagesRatio,1),d=t(e.intensity1,e.intensity,1),l=t(e.intensity2,e.intensity,1),u=t(e.angle,Math.PI/4),c=t(e.angle1,u),v=t(e.angle2,3*-u),m=t(e.speedIn,e.speed,1.6),p=t(e.speedOut,e.speed,1.2),g=t(e.hover,!0),h=t(e.easing,"expo.out"),y=t(e.video,!1);if(n)if(a&&s&&i){var F=new r.Scene,x=new r.OrthographicCamera(n.offsetWidth/-2,n.offsetWidth/2,n.offsetHeight/2,n.offsetHeight/-2,1,1e3);x.position.z=1;var w=new r.WebGLRenderer({antialias:!1,alpha:!0});w.setPixelRatio(2),w.setClearColor(16777215,0),w.setSize(n.offsetWidth,n.offsetHeight),n.appendChild(w.domElement);var L=function(){w.render(F,x)},b=new r.TextureLoader;b.crossOrigin="";var H,E,W=b.load(i,L);if(W.magFilter=W.minFilter=r.LinearFilter,y){!function e(){requestAnimationFrame(e),w.render(F,x)}(),(y=document.createElement("video")).autoplay=!0,y.loop=!0,y.muted=!0,y.src=a,y.load();var V=document.createElement("video");V.autoplay=!0,V.loop=!0,V.muted=!0,V.src=s,V.load();var P=new r.VideoTexture(y),M=new r.VideoTexture(V);P.magFilter=M.magFilter=r.LinearFilter,P.minFilter=M.minFilter=r.LinearFilter,V.addEventListener("loadeddata",function(){V.play(),(M=new r.VideoTexture(V)).magFilter=r.LinearFilter,M.minFilter=r.LinearFilter,R.uniforms.texture2.value=M},!1),y.addEventListener("loadeddata",function(){y.play(),(P=new r.VideoTexture(y)).magFilter=r.LinearFilter,P.minFilter=r.LinearFilter,R.uniforms.texture1.value=P},!1)}else P=b.load(a,L),M=b.load(s,L),P.magFilter=M.magFilter=r.LinearFilter,P.minFilter=M.minFilter=r.LinearFilter;var O=f;n.offsetHeight/n.offsetWidth<O?(H=1,E=n.offsetHeight/n.offsetWidth/O):(H=n.offsetWidth/n.offsetHeight*O,E=1);var R=new r.ShaderMaterial({uniforms:{intensity1:{type:"f",value:d},intensity2:{type:"f",value:l},dispFactor:{type:"f",value:0},angle1:{type:"f",value:c},angle2:{type:"f",value:v},texture1:{type:"t",value:P},texture2:{type:"t",value:M},disp:{type:"t",value:W},res:{type:"vec4",value:new r.Vector4(n.offsetWidth,n.offsetHeight,H,E)},dpr:{type:"f",value:window.devicePixelRatio}},vertexShader:"\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}\n",fragmentShader:"\nvarying vec2 vUv;\n\nuniform float dispFactor;\nuniform float dpr;\nuniform sampler2D disp;\n\nuniform sampler2D texture1;\nuniform sampler2D texture2;\nuniform float angle1;\nuniform float angle2;\nuniform float intensity1;\nuniform float intensity2;\nuniform vec4 res;\nuniform vec2 parent;\n\nmat2 getRotM(float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c);\n}\n\nvoid 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",transparent:!0,opacity:1}),U=new r.PlaneGeometry(n.offsetWidth,n.offsetHeight,1),_=new r.Mesh(U,R);F.add(_),g&&(n.addEventListener("mouseenter",C),n.addEventListener("touchstart",C),n.addEventListener("mouseleave",D),n.addEventListener("touchend",D)),window.addEventListener("resize",function(e){n.offsetHeight/n.offsetWidth<O?(H=1,E=n.offsetHeight/n.offsetWidth/O):(H=n.offsetWidth/n.offsetHeight*O,E=1),_.material.uniforms.res.value=new r.Vector4(n.offsetWidth,n.offsetHeight,H,E),w.setSize(n.offsetWidth,n.offsetHeight),L()}),this.next=C,this.previous=D}else console.warn("One or more images are missing");else console.warn("Parent missing");function C(){o.default.to(R.uniforms.dispFactor,{duration:m,value:1,ease:h,onUpdate:L,onComplete:L})}function D(){o.default.to(R.uniforms.dispFactor,{duration:p,value:0,ease:h,onUpdate:L,onComplete:L})}}});
2 | //# sourceMappingURL=hover-effect.umd.js.map
3 | 


--------------------------------------------------------------------------------
/dist/hover-effect.umd.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"hover-effect.umd.js","sources":["../src/hover-effect.js"],"sourcesContent":["import * as THREE from \"three\";\nimport gsap from \"gsap\";\n\nexport default function(opts) {\n  var vertex = `\nvarying vec2 vUv;\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}\n`;\n\n  var fragment = `\nvarying vec2 vUv;\n\nuniform float dispFactor;\nuniform float dpr;\nuniform sampler2D disp;\n\nuniform sampler2D texture1;\nuniform sampler2D texture2;\nuniform float angle1;\nuniform float angle2;\nuniform float intensity1;\nuniform float intensity2;\nuniform vec4 res;\nuniform vec2 parent;\n\nmat2 getRotM(float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c);\n}\n\nvoid 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`;\n\n  // please respect authorship and do not remove\n  console.log(\n    \"%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect \",\n    \"color: #bada55; font-size: 0.8rem\"\n  );\n\n  function firstDefined() {\n    for (var i = 0; i < arguments.length; i++) {\n      if (arguments[i] !== undefined) return arguments[i];\n    }\n  }\n\n  var parent = opts.parent;\n  var dispImage = opts.displacementImage;\n  var image1 = opts.image1;\n  var image2 = opts.image2;\n  var imagesRatio = firstDefined(opts.imagesRatio, 1.0);\n  var intensity1 = firstDefined(opts.intensity1, opts.intensity, 1);\n  var intensity2 = firstDefined(opts.intensity2, opts.intensity, 1);\n  var commonAngle = firstDefined(opts.angle, Math.PI / 4); // 45 degrees by default, so grayscale images work correctly\n  var angle1 = firstDefined(opts.angle1, commonAngle);\n  var angle2 = firstDefined(opts.angle2, -commonAngle * 3);\n  var speedIn = firstDefined(opts.speedIn, opts.speed, 1.6);\n  var speedOut = firstDefined(opts.speedOut, opts.speed, 1.2);\n  var userHover = firstDefined(opts.hover, true);\n  var easing = firstDefined(opts.easing, \"expo.out\");\n  var video = firstDefined(opts.video, false);\n\n  if (!parent) {\n    console.warn(\"Parent missing\");\n    return;\n  }\n\n  if (!(image1 && image2 && dispImage)) {\n    console.warn(\"One or more images are missing\");\n    return;\n  }\n\n  var scene = new THREE.Scene();\n  var camera = new THREE.OrthographicCamera(\n    parent.offsetWidth / -2,\n    parent.offsetWidth / 2,\n    parent.offsetHeight / 2,\n    parent.offsetHeight / -2,\n    1,\n    1000\n  );\n\n  camera.position.z = 1;\n\n  var renderer = new THREE.WebGLRenderer({\n    antialias: false,\n    alpha: true\n  });\n\n  renderer.setPixelRatio(2.0);\n  renderer.setClearColor(0xffffff, 0.0);\n  renderer.setSize(parent.offsetWidth, parent.offsetHeight);\n  parent.appendChild(renderer.domElement);\n\n  var render = function() {\n    // This will be called by the TextureLoader as well as Gsap.\n    renderer.render(scene, camera);\n  };\n\n  var loader = new THREE.TextureLoader();\n  loader.crossOrigin = \"\";\n\n  var disp = loader.load(dispImage, render);\n  disp.magFilter = disp.minFilter = THREE.LinearFilter;\n\n  if (video) {\n    var animate = function() {\n      requestAnimationFrame(animate);\n\n      renderer.render(scene, camera);\n    };\n    animate();\n\n    var video = document.createElement(\"video\");\n    video.autoplay = true;\n    video.loop = true;\n    video.muted = true;\n    video.src = image1;\n    video.load();\n\n    var video2 = document.createElement(\"video\");\n    video2.autoplay = true;\n    video2.loop = true;\n    video2.muted = true;\n    video2.src = image2;\n    video2.load();\n\n    var texture1 = new THREE.VideoTexture(video);\n    var texture2 = new THREE.VideoTexture(video2);\n    texture1.magFilter = texture2.magFilter = THREE.LinearFilter;\n    texture1.minFilter = texture2.minFilter = THREE.LinearFilter;\n\n    video2.addEventListener(\n      \"loadeddata\",\n      function() {\n        video2.play();\n\n        texture2 = new THREE.VideoTexture(video2);\n        texture2.magFilter = THREE.LinearFilter;\n        texture2.minFilter = THREE.LinearFilter;\n\n        mat.uniforms.texture2.value = texture2;\n      },\n      false\n    );\n\n    video.addEventListener(\n      \"loadeddata\",\n      function() {\n        video.play();\n\n        texture1 = new THREE.VideoTexture(video);\n\n        texture1.magFilter = THREE.LinearFilter;\n        texture1.minFilter = THREE.LinearFilter;\n\n        mat.uniforms.texture1.value = texture1;\n      },\n      false\n    );\n  } else {\n    var texture1 = loader.load(image1, render);\n    var texture2 = loader.load(image2, render);\n\n    texture1.magFilter = texture2.magFilter = THREE.LinearFilter;\n    texture1.minFilter = texture2.minFilter = THREE.LinearFilter;\n  }\n\n  let a1, a2;\n  var imageAspect = imagesRatio;\n  if (parent.offsetHeight / parent.offsetWidth < imageAspect) {\n    a1 = 1;\n    a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;\n  } else {\n    a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;\n    a2 = 1;\n  }\n\n  var mat = new THREE.ShaderMaterial({\n    uniforms: {\n      intensity1: {\n        type: \"f\",\n        value: intensity1\n      },\n      intensity2: {\n        type: \"f\",\n        value: intensity2\n      },\n      dispFactor: {\n        type: \"f\",\n        value: 0.0\n      },\n      angle1: {\n        type: \"f\",\n        value: angle1\n      },\n      angle2: {\n        type: \"f\",\n        value: angle2\n      },\n      texture1: {\n        type: \"t\",\n        value: texture1\n      },\n      texture2: {\n        type: \"t\",\n        value: texture2\n      },\n      disp: {\n        type: \"t\",\n        value: disp\n      },\n      res: {\n        type: \"vec4\",\n        value: new THREE.Vector4(\n          parent.offsetWidth,\n          parent.offsetHeight,\n          a1,\n          a2\n        )\n      },\n      dpr: {\n        type: \"f\",\n        value: window.devicePixelRatio\n      }\n    },\n\n    vertexShader: vertex,\n    fragmentShader: fragment,\n    transparent: true,\n    opacity: 1.0\n  });\n\n  var geometry = new THREE.PlaneGeometry(\n    parent.offsetWidth,\n    parent.offsetHeight,\n    1\n  );\n  var object = new THREE.Mesh(geometry, mat);\n  scene.add(object);\n\n  function transitionIn() {\n    gsap.to(mat.uniforms.dispFactor, {\n      duration: speedIn,\n      value: 1,\n      ease: easing,\n      onUpdate: render,\n      onComplete: render\n    });\n  }\n\n  function transitionOut() {\n    gsap.to(mat.uniforms.dispFactor, {\n      duration: speedOut,\n      value: 0,\n      ease: easing,\n      onUpdate: render,\n      onComplete: render\n    });\n  }\n\n  if (userHover) {\n    parent.addEventListener(\"mouseenter\", transitionIn);\n    parent.addEventListener(\"touchstart\", transitionIn);\n    parent.addEventListener(\"mouseleave\", transitionOut);\n    parent.addEventListener(\"touchend\", transitionOut);\n  }\n\n  window.addEventListener(\"resize\", function(e) {\n    if (parent.offsetHeight / parent.offsetWidth < imageAspect) {\n      a1 = 1;\n      a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;\n    } else {\n      a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;\n      a2 = 1;\n    }\n    object.material.uniforms.res.value = new THREE.Vector4(\n      parent.offsetWidth,\n      parent.offsetHeight,\n      a1,\n      a2\n    );\n    renderer.setSize(parent.offsetWidth, parent.offsetHeight);\n\n    render();\n  });\n\n  this.next = transitionIn;\n  this.previous = transitionOut;\n}\n"],"names":["opts","firstDefined","i","arguments","length","undefined","console","log","parent","dispImage","displacementImage","image1","image2","imagesRatio","intensity1","intensity","intensity2","commonAngle","angle","Math","PI","angle1","angle2","speedIn","speed","speedOut","userHover","hover","easing","video","scene","THREE","Scene","camera","OrthographicCamera","offsetWidth","offsetHeight","position","z","renderer","WebGLRenderer","antialias","alpha","setPixelRatio","setClearColor","setSize","appendChild","domElement","render","loader","TextureLoader","crossOrigin","a1","a2","disp","load","magFilter","minFilter","LinearFilter","animate","requestAnimationFrame","document","createElement","autoplay","loop","muted","src","video2","texture1","VideoTexture","texture2","addEventListener","play","mat","uniforms","value","imageAspect","ShaderMaterial","type","dispFactor","res","Vector4","dpr","window","devicePixelRatio","vertexShader","fragmentShader","transparent","opacity","geometry","PlaneGeometry","object","Mesh","add","transitionIn","transitionOut","e","material","this","next","previous","warn","gsap","to","duration","ease","onUpdate","onComplete"],"mappings":"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"}


--------------------------------------------------------------------------------
/example/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/.DS_Store


--------------------------------------------------------------------------------
/example/css/base.css:
--------------------------------------------------------------------------------
  1 | @import url("https://use.typekit.net/std3xut.css");
  2 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
  3 | *,
  4 | *::after,
  5 | *::before {
  6 | 	box-sizing: border-box;
  7 | }
  8 | 
  9 | html {
 10 | 	background: #fff;
 11 | }
 12 | 
 13 | body {
 14 | 	--color-text: #000;
 15 | 	--color-bg: #fff;
 16 | 	--color-link: #000;
 17 | 	--color-link-hover: #000;
 18 | 	--color-info: #000;
 19 | 	font-family: "brother-1816",sans-serif;
 20 | 	min-height: 100vh;
 21 | 	color: #57585c;
 22 | 	color: var(--color-text);
 23 | 	background-color: #fff;
 24 | 	background-color: var(--color-bg);
 25 | 	-webkit-font-smoothing: antialiased;
 26 | 	-moz-osx-font-smoothing: grayscale;
 27 | }
 28 | 
 29 | /* Page Loader */
 30 | .js .loading::before {
 31 | 	content: '';
 32 | 	position: fixed;
 33 | 	z-index: 100000;
 34 | 	top: 0;
 35 | 	left: 0;
 36 | 	width: 100%;
 37 | 	height: 100%;
 38 | 	background: var(--color-bg);
 39 | }
 40 | 
 41 | .js .loading::after {
 42 | 	content: '';
 43 | 	position: fixed;
 44 | 	z-index: 100000;
 45 | 	top: 50%;
 46 | 	left: 50%;
 47 | 	width: 60px;
 48 | 	height: 60px;
 49 | 	margin: -30px 0 0 -30px;
 50 | 	pointer-events: none;
 51 | 	border-radius: 50%;
 52 | 	opacity: 0.4;
 53 | 	background: var(--color-link);
 54 | 	animation: loaderAnim 0.7s linear infinite alternate forwards;
 55 | }
 56 | 
 57 | @keyframes loaderAnim {
 58 | 	to {
 59 | 		opacity: 1;
 60 | 		transform: scale3d(0.5,0.5,1);
 61 | 	}
 62 | }
 63 | 
 64 | a {
 65 | 	text-decoration: none;
 66 | 	color: var(--color-link);
 67 | 	outline: none;
 68 | }
 69 | 
 70 | a:hover,
 71 | a:focus {
 72 | 	color: var(--color-link-hover);
 73 | 	outline: none;
 74 | }
 75 | 
 76 | .hidden {
 77 | 	position: absolute;
 78 | 	overflow: hidden;
 79 | 	width: 0;
 80 | 	height: 0;
 81 | 	pointer-events: none;
 82 | }
 83 | 
 84 | .message {
 85 | 	position: relative;
 86 | 	z-index: 100;
 87 | 	display: none;
 88 | 	padding: 1em;
 89 | 	text-align: center;
 90 | 	color: var(--color-bg);
 91 | 	background: var(--color-text);
 92 | }
 93 | 
 94 | /* Icons */
 95 | .icon {
 96 | 	display: block;
 97 | 	width: 1.5em;
 98 | 	height: 1.5em;
 99 | 	margin: 0 auto;
100 | 	fill: currentColor;
101 | }
102 | 
103 | main {
104 | 	position: relative;
105 | 	margin: 0 auto;
106 | }
107 | 
108 | .content {
109 | 	position: relative;
110 | 	display: flex;
111 | 	justify-content: center;
112 | 	align-items: center;
113 | 	margin: 0 auto;
114 | 	min-height: 100vh;
115 | }
116 | 
117 | /* Header */
118 | .codrops-header {
119 | 	position: relative;
120 | 	z-index: 100;
121 | 	display: flex;
122 | 	flex-direction: row;
123 | 	align-items: flex-start;
124 | 	align-items: center;
125 | 	width: 100%;
126 | 	padding: 0 0 2rem 0;
127 | }
128 | 
129 | .codrops-header__title {
130 | 	font-size: 1em;
131 | 	font-weight: bold;
132 | 	margin: 0;
133 | 	padding: 0;
134 | }
135 | 
136 | .info {
137 | 	margin: 0 0 0 1.25em;
138 | 	color: var(--color-info);
139 | }
140 | 
141 | .github {
142 | 	display: block;
143 | 	margin: 0 0 0 auto;
144 | }
145 | 
146 | /* Top Navigation Style */
147 | .codrops-links {
148 | 	position: relative;
149 | 	display: flex;
150 | 	justify-content: center;
151 | 	margin: 0 1em 0 0;
152 | 	text-align: center;
153 | 	white-space: nowrap;
154 | }
155 | 
156 | .codrops-icon {
157 | 	display: inline-block;
158 | 	margin: 0.15em;
159 | 	padding: 0.25em;
160 | }
161 | 
162 | .grid__item {
163 | 	position: relative;
164 | 	display: flex;
165 | 	align-items: stretch;
166 | 	width: 100vw;
167 | }
168 | 
169 | .grid__item--bg {
170 | 	background-color: var(--item-bg);
171 | 	height: 100vw;
172 | }
173 | 
174 | .grid__item-content {
175 | 	width: 100%;
176 | 	padding: 8vw;
177 | 	display: flex;
178 | 	flex-direction: column;
179 | 	overflow: hidden;
180 | 	pointer-events: none;
181 | 	background: var(--item-bg);
182 | }
183 | 
184 | .grid__item--bg .grid__item-content {
185 | 	position: absolute;
186 | 	height: 100%;
187 | 	width: 100%;
188 | 	top: 0;
189 | 	left: 0;
190 | }
191 | 
192 | .grid__item-img {
193 | 	display: block;
194 | 	height: 100%;
195 | 	width: 100%;
196 | }
197 | 
198 | .grid__item-img canvas {
199 | 	height: 100%;
200 | }
201 | 
202 | .grid__item-img img {
203 | 	height: 100%;
204 | 	display: block;
205 | }
206 | 
207 | .grid__item-img img:nth-child(2) {
208 | 	position: absolute;
209 | 	top: 0;
210 | 	left: 0;
211 | 	opacity: 0;
212 | 	transition: opacity 0.3s;
213 | }
214 | 
215 | .grid__item:hover .grid__item-img img:nth-child(2) {
216 | 	opacity: 1;
217 | }
218 | 
219 | .js .grid__item-img img {
220 | 	display: none;
221 | }
222 | 
223 | .grid__item-title {
224 | 	font-weight: 700;
225 | 	font-size: 2.5rem;
226 | 	line-height: 1;
227 | 	margin: 2rem 0 0 0;
228 | 	color: var(--item-title);
229 | }
230 | 
231 | .grid__item-title--small {
232 | 	font-size: 1.5rem;
233 | 	line-height: 1.25;
234 | 	margin-bottom: 1rem;
235 | }
236 | 
237 | .grid__item-meta {
238 | 	text-transform: uppercase;
239 | 	font-weight: 400;
240 | 	letter-spacing: 0.25rem;
241 | 	font-size: 0.95rem;
242 | 	color: var(--item-meta);
243 | }
244 | 
245 | .grid__item-subtitle {
246 | 	display: block;
247 | 	margin: auto 0 0 0;
248 | 	font-weight: 400;
249 | 	font-size: 1.5em;
250 | 	color: var(--item-subtitle);
251 | }
252 | 
253 | .grid__item-subtitle span {
254 | 	display: block;
255 | }
256 | 
257 | .grid__item-text {
258 | 	font-size: 1rem;
259 | 	line-height: 1.75;
260 | 	margin: 2rem 0 0 0;
261 | 	color: var(--item-text);
262 | }
263 | 
264 | .grid__item-link {
265 | 	display: inline-block;
266 | 	color: currentColor;
267 | 	font-weight: 700;
268 | 	font-size: 0.95rem;
269 | 	position: relative;
270 | 	padding: 0 0 0.2rem;
271 | 	pointer-events: auto;
272 | 	color: var(--item-link);
273 | }
274 | 
275 | .grid__item-link:focus,
276 | .grid__item-link:hover {
277 | 	color: var(--item-link-hover);
278 | }
279 | 
280 | .grid__item-link::before {
281 | 	content: '';
282 | 	position: absolute;
283 | 	background: currentColor;
284 | 	width: 80%;
285 | 	height: 1px;
286 | 	bottom: 0;
287 | 	transform-origin: 0% 50%;
288 | 	transform: scale3d(0,1,1);
289 | 	opacity: 0;
290 | 	transition: all 0.3s;
291 | 	transition-property: opacity, transform;
292 | }
293 | 
294 | .grid__item-link:hover::before {
295 | 	opacity: 1;
296 | 	transform: scale3d(1,1,1);
297 | }
298 | 
299 | .grid__item-link + .grid__item-link {
300 | 	margin: 0 0 0 3rem;
301 | }
302 | 
303 | .grid__item-text + .grid__item-link {
304 | 	white-space: nowrap;
305 | 	margin-top: 1rem;
306 | 	align-self: flex-start;
307 | 	margin-top: auto;
308 | }
309 | 
310 | .grid__item-nav {
311 | 	display: flex;
312 | }
313 | 
314 | /* Themes */
315 | .theme-1 {
316 | 	--item-bg: #4bb4e7;
317 |     --item-link: #fff;
318 |     --item-link-hover: #0d2936;
319 |     --item-meta: #fff;
320 |     --item-title: #fff;
321 |     --item-subtitle: #fff;
322 |     --item-text: #fff;
323 | }
324 | 
325 | .theme-2 {
326 | 	--item-bg: rgba(0,0,0,0.2);
327 | 	--item-link: #fff;
328 | 	--item-link-hover: #fff;
329 | 	--item-meta: #fff;
330 | 	--item-title: #fff;
331 | 	--item-subtitle: #fff;
332 | 	--item-text: #fff;
333 | }
334 | 
335 | .theme-3 {
336 | 	--item-bg: rgba(0,0,0,0.2);
337 | 	--item-link: #fff;
338 | 	--item-link-hover: #fff;
339 | 	--item-meta: #fff;
340 | 	--item-title: #fff;
341 | 	--item-subtitle: #fff;
342 | 	--item-text: #fff;
343 | }
344 | 
345 | .theme-4 {
346 | 	--item-bg: #12161e;
347 |     --item-link: #fff;
348 |     --item-link-hover: #9e6817;
349 |     --item-meta: #fff;
350 |     --item-title: #fff;
351 |     --item-subtitle: #fff;
352 |     --item-text: #fff;
353 | }
354 | 
355 | .theme-5 {
356 | 	--item-bg: #efe9dd;
357 |     --item-link: #12161e;
358 |     --item-link-hover: #0d13c1;
359 |     --item-meta: #fff;
360 |     --item-title: #12161e;
361 |     --item-subtitle: #12161e;
362 |     --item-text: #12161e;
363 | }
364 | 
365 | .theme-6 {
366 | 	--item-bg: rgba(0,0,0,0);
367 |     --item-link: #12161e;
368 |     --item-link-hover: #fff;
369 |     --item-meta: #fff;
370 |     --item-title: #ffffff;
371 |     --item-subtitle: #12161e;
372 |     --item-text: #ffffff;
373 | }
374 | 
375 | .theme-7 {
376 | 	--item-bg: rgba(0,0,0,0);
377 |     --item-link: #fff;
378 |     --item-link-hover: #fff;
379 |     --item-meta: #fff;
380 |     --item-title: #fff;
381 |     --item-subtitle: #fff;
382 |     --item-text: #fff;
383 | }
384 | 
385 | .theme-8 {
386 | 	--item-bg: #0c13c1;
387 |     --item-link: #dd8ca5;
388 |     --item-link-hover: #fff;
389 |     --item-meta: #fff;
390 |     --item-title: #fff;
391 |     --item-subtitle: #fff;
392 |     --item-text: #fff;
393 | }
394 | 
395 | .theme-9 {
396 | 	--item-bg: #c9efee;
397 |     --item-link: #000000;
398 |     --item-link-hover: #e80c40;
399 |     --item-meta: #fff;
400 |     --item-title: #000;
401 |     --item-subtitle: #000;
402 |     --item-text: #000;
403 | }
404 | 
405 | .theme-10 {
406 | 	--item-bg: rgba(0,0,0,0);
407 |     --item-link: #000;
408 |     --item-link-hover: #fff;
409 |     --item-meta: #fff;
410 |     --item-title: #fff;
411 |     --item-subtitle: #000;
412 |     --item-text: #fff;
413 | }
414 | 
415 | .theme-11 {
416 | 	--item-bg: rgba(0,0,0,0);
417 |     --item-link: #000;
418 |     --item-link-hover: #fff;
419 |     --item-meta: #000;
420 |     --item-title: #000;
421 |     --item-subtitle: #000;
422 |     --item-text: #000;
423 | }
424 | 
425 | .theme-12 {
426 | 	--item-bg: #4d565b;
427 |     --item-link: #f6fbfe;
428 |     --item-link-hover: #000000;
429 |     --item-meta: #f6fbfe;
430 |     --item-title: #f6fbfe;
431 |     --item-subtitle: #f6fbfe;
432 |     --item-text: #f6fbfe;
433 | }
434 | 
435 | .theme-13 {
436 | 	--item-bg: #d22851;
437 |     --item-link: #712a3b;
438 |     --item-link-hover: #f6fbfe;
439 |     --item-meta: #f6fbfe;
440 |     --item-title: #f6fbfe;
441 |     --item-subtitle: #f6fbfe;
442 |     --item-text: #f6fbfe;
443 | }
444 | 
445 | .theme-14 {
446 | 	--item-bg: rgba(0,0,0,0.2);
447 |     --item-link: #fff;
448 |     --item-link-hover: #fff;
449 |     --item-meta: #fff;
450 |     --item-title: #fff;
451 |     --item-subtitle: #fff;
452 |     --item-text: #fff;
453 | }
454 | 
455 | .theme-15 {
456 | 	--item-bg: rgba(0,0,0,0.3);
457 |     --item-link: #fff;
458 |     --item-link-hover: #fff;
459 |     --item-meta: #fff;
460 |     --item-title: #fff;
461 |     --item-subtitle: #fff;
462 |     --item-text: #fff;
463 | }
464 | 
465 | .theme-16 {
466 | 	--item-bg: #010101;
467 |     --item-link: #63676b;
468 |     --item-link-hover: #f6fbfe;
469 |     --item-meta: #f6fbfe;
470 |     --item-title: #f6fbfe;
471 |     --item-subtitle: #f6fbfe;
472 |     --item-text: #f6fbfe;
473 | }
474 | 
475 | .theme-17 {
476 | 	--item-bg: #ece7e5;
477 |     --item-link: #d68d13;
478 |     --item-link-hover: #2d2c2c;
479 |     --item-meta: #2d2c2c;
480 |     --item-title: #2d2c2c;
481 |     --item-subtitle: #2d2c2c;
482 |     --item-text: #2d2c2c;
483 | }
484 | 
485 | .theme-18 {
486 | 	--item-bg: rgba(0,0,0,0.2);
487 |     --item-link: #fff;
488 |     --item-link-hover: #fff;
489 |     --item-meta: #fff;
490 |     --item-title: #fff;
491 |     --item-subtitle: #fff;
492 |     --item-text: #fff;
493 | }
494 | 
495 | .theme-19 {
496 | 	--item-bg: rgba(0,0,0,0.1);
497 |     --item-link: #6317f5;
498 |     --item-link-hover: #fff;
499 |     --item-meta: #6317f5;
500 |     --item-title: #fff;
501 |     --item-subtitle: #6317f5;
502 |     --item-text: #fff;
503 | }
504 | 
505 | .theme-20 {
506 | 	--item-bg: #6317f5;
507 |     --item-link: #b29d85;
508 |     --item-link-hover: #ffffff;
509 |     --item-meta: #ffffff;
510 |     --item-title: #ffffff;
511 |     --item-subtitle: #ffffff;
512 |     --item-text: #ffffff;
513 | }
514 | 
515 | .theme-21 {
516 | 	--item-bg: #f7ac03;
517 |     --item-link: #ffffff;
518 |     --item-link-hover: #2d2c2c;
519 |     --item-meta: #2d2c2c;
520 |     --item-title: #ffffff;
521 |     --item-subtitle: #2d2c2c;
522 |     --item-text: #2d2c2c;
523 | }
524 | 
525 | .theme-22 {
526 | 	--item-bg: rgba(0,0,0,0.2);
527 |     --item-link: #fff;
528 |     --item-link-hover: #fff;
529 |     --item-meta: #fff;
530 |     --item-title: #fff;
531 |     --item-subtitle: #fff;
532 |     --item-text: #fff;
533 | }
534 | 
535 | @media screen and (min-width: 85em) {
536 | 	.grid__item-text {
537 | 		width: 80%;
538 | 	}
539 | }
540 | 
541 | @media screen and (min-width: 50em) {
542 | 	.grid {
543 | 		display: grid;
544 | 		grid-template-columns: repeat(2,50vmax);
545 | 	}
546 | 	.grid__item {
547 | 		height: 50vmax;
548 | 		width: 100%;
549 | 	}
550 | 	.grid__item-subtitle * {
551 | 		opacity: 0;
552 | 		transform: translate3d(100px, 0, 0);
553 | 		transition: all 0.5s cubic-bezier(0.2, 1, 0.7, 1);
554 | 		transition-property: transform, opacity;
555 | 	}
556 | 	.grid__item:hover .grid__item-subtitle * {
557 | 		opacity: 1;
558 | 		transform: translate3d(0, 0, 0);
559 | 	}
560 | 	.grid__item:hover .grid__item-subtitle span {
561 | 		transition-delay: 0.1s;
562 | 	}
563 | 	.grid__item:hover .grid__item-subtitle .grid__item-link {
564 | 		transition-delay: 0s;
565 | 	}
566 | 	.grid__item-title {
567 | 		font-size: 6vw;
568 | 	}
569 | 	.grid__item-title--small {
570 | 		font-size: 3vw;
571 | 	}
572 | 	.grid__item-text {
573 | 		margin-top: 2.5rem;
574 | 	}
575 | }
576 | 


--------------------------------------------------------------------------------
/example/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/favicon.ico


--------------------------------------------------------------------------------
/example/img/Img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img1.jpg


--------------------------------------------------------------------------------
/example/img/Img10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img10.jpg


--------------------------------------------------------------------------------
/example/img/Img11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img11.jpg


--------------------------------------------------------------------------------
/example/img/Img12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img12.jpg


--------------------------------------------------------------------------------
/example/img/Img13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img13.jpg


--------------------------------------------------------------------------------
/example/img/Img14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img14.jpg


--------------------------------------------------------------------------------
/example/img/Img15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img15.jpg


--------------------------------------------------------------------------------
/example/img/Img16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img16.jpg


--------------------------------------------------------------------------------
/example/img/Img17.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img17.jpg


--------------------------------------------------------------------------------
/example/img/Img18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img18.jpg


--------------------------------------------------------------------------------
/example/img/Img19.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img19.jpg


--------------------------------------------------------------------------------
/example/img/Img2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img2.jpg


--------------------------------------------------------------------------------
/example/img/Img20.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img20.jpg


--------------------------------------------------------------------------------
/example/img/Img21.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img21.jpg


--------------------------------------------------------------------------------
/example/img/Img22.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img22.jpg


--------------------------------------------------------------------------------
/example/img/Img23.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img23.jpg


--------------------------------------------------------------------------------
/example/img/Img24.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img24.jpg


--------------------------------------------------------------------------------
/example/img/Img25.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img25.jpg


--------------------------------------------------------------------------------
/example/img/Img26.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img26.jpg


--------------------------------------------------------------------------------
/example/img/Img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img3.jpg


--------------------------------------------------------------------------------
/example/img/Img4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img4.jpg


--------------------------------------------------------------------------------
/example/img/Img5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img5.jpg


--------------------------------------------------------------------------------
/example/img/Img6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img6.jpg


--------------------------------------------------------------------------------
/example/img/Img7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img7.jpg


--------------------------------------------------------------------------------
/example/img/Img8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img8.jpg


--------------------------------------------------------------------------------
/example/img/Img9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/Img9.jpg


--------------------------------------------------------------------------------
/example/img/displacement/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/1.jpg


--------------------------------------------------------------------------------
/example/img/displacement/10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/10.jpg


--------------------------------------------------------------------------------
/example/img/displacement/11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/11.jpg


--------------------------------------------------------------------------------
/example/img/displacement/12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/12.jpg


--------------------------------------------------------------------------------
/example/img/displacement/13.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/13.jpg


--------------------------------------------------------------------------------
/example/img/displacement/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/14.jpg


--------------------------------------------------------------------------------
/example/img/displacement/15.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/15.jpg


--------------------------------------------------------------------------------
/example/img/displacement/16.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/16.jpg


--------------------------------------------------------------------------------
/example/img/displacement/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/2.jpg


--------------------------------------------------------------------------------
/example/img/displacement/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/3.jpg


--------------------------------------------------------------------------------
/example/img/displacement/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/4.png


--------------------------------------------------------------------------------
/example/img/displacement/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/5.png


--------------------------------------------------------------------------------
/example/img/displacement/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/6.jpg


--------------------------------------------------------------------------------
/example/img/displacement/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/7.jpg


--------------------------------------------------------------------------------
/example/img/displacement/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/8.jpg


--------------------------------------------------------------------------------
/example/img/displacement/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/img/displacement/9.jpg


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" class="no-js">
  3 | 	<head>
  4 | 		<meta charset="UTF-8" />
  5 | 		<meta name="viewport" content="width=device-width, initial-scale=1">
  6 | 		<title>Distortion Hover Effect | Codrops</title>
  7 | 		<meta name="description" content="A little library that can be used for creating WebGL powered distortion hover effects using displacement images." />
  8 | 		<meta name="keywords" content="webgl, hover, effect, distortion, displacement, web development, three.js" />
  9 | 		<meta name="author" content="Codrops" />
 10 | 		<link rel="shortcut icon" href="favicon.ico">
 11 | 		<link rel="stylesheet" type="text/css" href="css/base.css" />
 12 | 		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
 13 | 	</head>
 14 | 	<body class="loading">
 15 | 		<svg class="hidden">
 16 | 			<symbol id="icon-arrow" viewBox="0 0 24 24">
 17 | 				<title>arrow</title>
 18 | 				<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
 19 | 			</symbol>
 20 | 			<symbol id="icon-drop" viewBox="0 0 24 24">
 21 | 				<title>drop</title>
 22 | 				<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
 23 | 			</symbol>
 24 | 			<svg id="icon-github" viewBox="0 0 33 33">
 25 | 				<title>github</title>
 26 | 				<path d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.353 1.112-.785 0-.386-.014-1.411-.022-2.77-4.531.984-5.487-2.184-5.487-2.184-.741-1.882-1.809-2.383-1.809-2.383-1.479-1.01.112-.99.112-.99 1.635.115 2.495 1.679 2.495 1.679 1.453 2.489 3.813 1.77 4.741 1.353.148-1.052.569-1.77 1.034-2.177-3.617-.411-7.42-1.809-7.42-8.051 0-1.778.635-3.233 1.677-4.371-.168-.412-.727-2.069.16-4.311 0 0 1.367-.438 4.479 1.67a15.602 15.602 0 0 1 4.078-.549 15.62 15.62 0 0 1 4.078.549c3.11-2.108 4.475-1.67 4.475-1.67.889 2.242.33 3.899.163 4.311C26.37 12.66 27 14.115 27 15.893c0 6.258-3.809 7.635-7.437 8.038.584.503 1.105 1.497 1.105 3.017 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.159 11.131-8.26 11.131-15.455 0-8.997-7.294-16.29-16.291-16.29"></path>
 27 | 			</svg>
 28 | 		</svg>
 29 | 		<main>
 30 | 			<div class="message">Some message for mobile if needed.</div>
 31 | 			<div class="grid">
 32 | 				<div class="grid__item theme-1">
 33 | 					<div class="grid__item-content">
 34 | 						<nav class="grid__item-nav">
 35 | 							<a href="https://tympanus.net/Development/GridMenu/" class="grid__item-link">&larr; Previous Demo</a>
 36 | 							<a href="https://tympanus.net/codrops/?p=34430" class="grid__item-link">Article</a>
 37 | 							<!--a href="" class="grid__item-link">GitHub</a-->
 38 | 						</nav>
 39 | 						<h2 class="grid__item-title grid__item-title--small">Distortion Hover Effect</h2>
 40 | 					</div>
 41 | 				</div>
 42 | 				<div class="grid__item grid__item--bg theme-2">
 43 | 					<div class="grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2">
 44 | 						<img src="img/Img22.jpg" alt="Image"/>
 45 | 						<img src="img/Img21.jpg" alt="Image"/>
 46 | 					</div>
 47 | 					<div class="grid__item-content">
 48 | 						<span class="grid__item-meta">California</span>
 49 | 						<h2 class="grid__item-title">Jumping Around</h2>
 50 | 						<h3 class="grid__item-subtitle">
 51 | 							<span>California's last empty jump spots</span>
 52 | 							<a class="grid__item-link" href="#">Discover more</a>
 53 | 						</h3>
 54 | 					</div>
 55 | 				</div>
 56 | 				<div class="grid__item grid__item--bg theme-3">
 57 | 					<div class="grid__item-img" data-displacement="img/displacement/4.png" data-intensity="0.2" data-speedIn="1.6" data-speedOut="1.6">
 58 | 						<img src="img/Img23.jpg" alt="Image"/>
 59 | 						<img src="img/Img24.jpg" alt="Image"/>
 60 | 					</div>
 61 | 					<div class="grid__item-content">
 62 | 						<span class="grid__item-meta">Italy</span>
 63 | 						<h2 class="grid__item-title">Calm Serenity</h2>
 64 | 						<h3 class="grid__item-subtitle">
 65 | 							<span>Italy's secret meadows and fields</span>
 66 | 							<a class="grid__item-link" href="#">Check them out</a>
 67 | 						</h3>
 68 | 					</div>
 69 | 				</div>
 70 | 				<div class="grid__item theme-4">
 71 | 					<div class="grid__item-content">
 72 | 						<nav class="grid__item-nav">
 73 | 							<a href="#" class="grid__item-link">About</a>
 74 | 							<a href="#" class="grid__item-link">Blog</a>
 75 | 							<a href="#" class="grid__item-link">Membership</a>
 76 | 						</nav>
 77 | 						<h2 class="grid__item-title grid__item-title--small">Qualm Inspiration for Everybody</h2>
 78 | 						<p class="grid__item-text">Muse about, something incredible is waiting to be known, courage of our questions tesseract hearts of the stars great turbulent clouds the only home.</p>
 79 | 						<a href="#" class="grid__item-link">Read more</a>
 80 | 					</div>
 81 | 				</div>
 82 | 				<div class="grid__item theme-5">
 83 | 					<div class="grid__item-content">
 84 | 						<nav class="grid__item-nav">
 85 | 							<a href="#" class="grid__item-link">Getting there</a>
 86 | 							<a href="#" class="grid__item-link">Accomodation</a>
 87 | 						</nav>
 88 | 						<h2 class="grid__item-title grid__item-title--small">Bangkok's Hidden Foodstalls</h2>
 89 | 						<p class="grid__item-text">Tingling of the spine, network of wormholes preserve and cherish that pale blue dot cosmic ocean encyclopaedia galactica.</p>
 90 | 						<a href="#" class="grid__item-link">Read more</a>
 91 | 					</div>
 92 | 				</div>
 93 | 				<div class="grid__item grid__item--bg theme-6">
 94 | 					<div class="grid__item-img" data-displacement="img/displacement/1.jpg" data-intensity="-0.4" data-speedIn="0.7" data-speedOut="0.3" data-easing="Sine.easeOut">
 95 | 						<img src="img/Img1.jpg" alt="Image"/>
 96 | 						<img src="img/Img13.jpg" alt="Image Alt"/>
 97 | 					</div>
 98 | 					<div class="grid__item-content">
 99 | 						<span class="grid__item-meta">Sweden</span>
100 | 						<h2 class="grid__item-title">Build it forever</h2>
101 | 						<h3 class="grid__item-subtitle">
102 | 							<span>Sweden's famous furniture</span>
103 | 							<a class="grid__item-link" href="#">Discover more</a>
104 | 						</h3>
105 | 					</div>
106 | 				</div>
107 | 				<div class="grid__item grid__item--bg theme-7">
108 | 					<div class="grid__item-img" data-displacement="img/displacement/7.jpg" data-intensity="0.9" data-speedIn="0.8" data-speedOut="0.4" data-easing="Circ.easeOut">
109 | 						<img src="img/Img19.jpg" alt="Image"/>
110 | 						<img src="img/Img20.jpg" alt="Image Alt"/>
111 | 					</div>
112 | 					<div class="grid__item-content">
113 | 						<span class="grid__item-meta">Spain</span>
114 | 						<h2 class="grid__item-title">Water Wonders</h2>
115 | 						<h3 class="grid__item-subtitle">
116 | 							<span>Spain's amazingly colorful lakes</span>
117 | 							<a class="grid__item-link" href="#">Check them out</a>
118 | 						</h3>
119 | 					</div>
120 | 				</div>
121 | 				<div class="grid__item theme-8">
122 | 					<div class="grid__item-content">
123 | 						<nav class="grid__item-nav">
124 | 							<a href="#" class="grid__item-link">Morocco FAQ</a>
125 | 							<a href="#" class="grid__item-link">Insider Tips</a>
126 | 							<a href="#" class="grid__item-link">Hotels</a>
127 | 						</nav>
128 | 						<h2 class="grid__item-title grid__item-title--small">The Rise of Moroccan Reggae</h2>
129 | 						<p class="grid__item-text">Concept of the number one two ghostly white figures in coveralls and helmets are soflty dancing.</p>
130 | 						<a href="#" class="grid__item-link">Read more</a>
131 | 					</div>
132 | 				</div>
133 | 				<div class="grid__item theme-9">
134 | 					<div class="grid__item-content">
135 | 						<nav class="grid__item-nav">
136 | 							<a href="#" class="grid__item-link">Uzbekistan Today</a>
137 | 							<a href="#" class="grid__item-link">History</a>
138 | 							<a href="#" class="grid__item-link">Culture</a>
139 | 						</nav>
140 | 						<h2 class="grid__item-title grid__item-title--small">Stories from Landlocked Lands</h2>
141 | 						<p class="grid__item-text">Drake Equation science Hypatia the ash of stellar alchemy. Circumnavigated gathered by gravity.</p>
142 | 						<a href="#" class="grid__item-link">Read more</a>
143 | 					</div>
144 | 				</div>
145 | 				<div class="grid__item grid__item--bg theme-10">
146 | 					<div class="grid__item-img" data-displacement="img/displacement/10.jpg" data-intensity="0.7" data-speedIn="1" data-speedOut="0.5" data-easing="Power2.easeOut">
147 | 						<img src="img/Img2.jpg" alt="Image"/>
148 | 						<img src="img/Img3.jpg" alt="Image Alt"/>
149 | 					</div>
150 | 					<div class="grid__item-content">
151 | 						<span class="grid__item-meta">Germany</span>
152 | 						<h2 class="grid__item-title">Holy House</h2>
153 | 						<h3 class="grid__item-subtitle">
154 | 							<span>Germany's amazing architecture</span>
155 | 							<a class="grid__item-link" href="#">Check it out</a>
156 | 						</h3>
157 | 					</div>
158 | 				</div>
159 | 				<div class="grid__item grid__item--bg theme-11">
160 | 					<div class="grid__item-img" data-displacement="img/displacement/6.jpg" data-intensity="0.6" data-speedIn="1.2" data-speedOut="0.5">
161 | 						<img src="img/Img5.jpg" alt="Image"/>
162 | 						<img src="img/Img4.jpg" alt="Image Alt"/>
163 | 					</div>
164 | 					<div class="grid__item-content">
165 | 						<span class="grid__item-meta">Denmark</span>
166 | 						<h2 class="grid__item-title">Future Proof</h2>
167 | 						<h3 class="grid__item-subtitle">
168 | 							<span>Building for the future</span>
169 | 							<a class="grid__item-link" href="#">Learn more</a>
170 | 						</h3>
171 | 					</div>
172 | 				</div>
173 | 				<div class="grid__item theme-12">
174 | 					<div class="grid__item-content">
175 | 						<nav class="grid__item-nav">
176 | 							<a href="#" class="grid__item-link">Wiki</a>
177 | 							<a href="#" class="grid__item-link">History</a>
178 | 							<a href="#" class="grid__item-link">Culture</a>
179 | 						</nav>
180 | 						<h2 class="grid__item-title grid__item-title--small">China's Last Wild Bears</h2>
181 | 						<p class="grid__item-text">Descended from astronomers emerged into consciousness? Encyclopaedia galactica. Extraordinary claims require extraordinary.</p>
182 | 						<a href="#" class="grid__item-link">Read more</a>
183 | 					</div>
184 | 				</div>
185 | 
186 | 				<div class="grid__item theme-13">
187 | 					<div class="grid__item-content">
188 | 						<nav class="grid__item-nav">
189 | 							<a href="#" class="grid__item-link">FAQ</a>
190 | 							<a href="#" class="grid__item-link">Quiz</a>
191 | 							<a href="#" class="grid__item-link">Getting There</a>
192 | 						</nav>
193 | 						<h2 class="grid__item-title grid__item-title--small">Travel Tips for South Africa</h2>
194 | 						<p class="grid__item-text">Venture something incredible is waiting to be known Orion's sword white dwarf rogue tendrils of gossamer.</p>
195 | 						<a href="#" class="grid__item-link">Read more</a>
196 | 					</div>
197 | 				</div>
198 | 				<div class="grid__item grid__item--bg theme-14">
199 | 					<div class="grid__item-img" data-displacement="img/displacement/11.jpg" data-intensity="0.4" data-speedIn="1" data-speedOut="1">
200 | 						<img src="img/Img10.jpg" alt="Image"/>
201 | 						<img src="img/Img6.jpg" alt="Image Alt"/>
202 | 					</div>
203 | 					<div class="grid__item-content">
204 | 						<span class="grid__item-meta">Florida</span>
205 | 						<h2 class="grid__item-title">Cool and Fresh</h2>
206 | 						<h3 class="grid__item-subtitle">
207 | 							<span>Discover Florida's best beaches</span>
208 | 							<a class="grid__item-link" href="#">Check them out</a>
209 | 						</h3>
210 | 					</div>
211 | 				</div>
212 | 				<div class="grid__item grid__item--bg theme-15">
213 | 					<div class="grid__item-img" data-displacement="img/displacement/2.jpg" data-intensity="0.6" data-speedIn="1" data-speedOut="1">
214 | 						<img src="img/Img11.jpg" alt="Image"/>
215 | 						<img src="img/Img18.jpg" alt="Image Alt"/>
216 | 					</div>
217 | 					<div class="grid__item-content">
218 | 						<span class="grid__item-meta">Europe</span>
219 | 						<h2 class="grid__item-title">My Cup of Coffee</h2>
220 | 						<h3 class="grid__item-subtitle">
221 | 							<span>The best coffe houses in Europe</span>
222 | 							<a class="grid__item-link" href="#">Check them out</a>
223 | 						</h3>
224 | 					</div>
225 | 				</div>
226 | 				<div class="grid__item theme-16">
227 | 					<div class="grid__item-content">
228 | 						<nav class="grid__item-nav">
229 | 							<a href="#" class="grid__item-link">About</a>
230 | 							<a href="#" class="grid__item-link">History</a>
231 | 							<a href="#" class="grid__item-link">Culture</a>
232 | 						</nav>
233 | 						<h2 class="grid__item-title grid__item-title--small">Cold Winters and Warm Hearts</h2>
234 | 						<p class="grid__item-text">Drake Equation science Hypatia the ash of stellar alchemy. Circumnavigated gathered.</p>
235 | 						<a href="#" class="grid__item-link">Read more</a>
236 | 					</div>
237 | 				</div>
238 | 				<div class="grid__item theme-17">
239 | 					<div class="grid__item-content">
240 | 						<nav class="grid__item-nav">
241 | 							<a href="#" class="grid__item-link">Getting There</a>
242 | 							<a href="#" class="grid__item-link">Festivals</a>
243 | 							<a href="#" class="grid__item-link">Trips</a>
244 | 						</nav>
245 | 						<h2 class="grid__item-title grid__item-title--small">Polka Dots Everywhere</h2>
246 | 						<p class="grid__item-text">Quasar billions upon billions rich in heavy atoms the only home we've ever known Cambrian explosion cosmic fugue? Galaxies, at the edge of forever.</p>
247 | 						<a href="#" class="grid__item-link">Read more</a>
248 | 					</div>
249 | 				</div>
250 | 				<div class="grid__item grid__item--bg theme-18">
251 | 					<div class="grid__item-img" data-displacement="img/displacement/15.jpg" data-intensity="-0.1" data-speedIn="0.4" data-speedOut="0.4" data-easing="power2.easeInOut">
252 | 						<img src="img/Img7.jpg" alt="Image"/>
253 | 						<img src="img/Img14.jpg" alt="Image Alt"/>
254 | 					</div>
255 | 					<div class="grid__item-content">
256 | 						<span class="grid__item-meta">Bulgaria</span>
257 | 						<h2 class="grid__item-title">Doors and Rooftops</h2>
258 | 						<h3 class="grid__item-subtitle">
259 | 							<span>Experience fantastic buildings</span>
260 | 							<a class="grid__item-link" href="#">Check them out</a>
261 | 						</h3>
262 | 					</div>
263 | 				</div>
264 | 				<div class="grid__item grid__item--bg theme-19">
265 | 					<div class="grid__item-img" data-displacement="img/displacement/13.jpg" data-intensity="0.2">
266 | 						<img src="img/Img8.jpg" alt="Image"/>
267 | 						<img src="img/Img15.jpg" alt="Image Alt"/>
268 | 					</div>
269 | 					<div class="grid__item-content">
270 | 						<span class="grid__item-meta">France</span>
271 | 						<h2 class="grid__item-title">French Geometry</h2>
272 | 						<h3 class="grid__item-subtitle">
273 | 							<span>France's geometric wonders</span>
274 | 							<a class="grid__item-link" href="#">Check them out</a>
275 | 						</h3>
276 | 					</div>
277 | 				</div>
278 | 				<div class="grid__item theme-20">
279 | 					<div class="grid__item-content">
280 | 						<nav class="grid__item-nav">
281 | 							<a href="#" class="grid__item-link">Wiki</a>
282 | 							<a href="#" class="grid__item-link">History</a>
283 | 							<a href="#" class="grid__item-link">Culture</a>
284 | 						</nav>
285 | 						<h2 class="grid__item-title grid__item-title--small">What Rudolf Steiner Envisioned</h2>
286 | 						<p class="grid__item-text">Drake Equation science Hypatia the ash of stellar alchemy. Circumnavigated gathered.</p>
287 | 						<a href="#" class="grid__item-link">Read more</a>
288 | 					</div>
289 | 				</div>
290 | 				<div class="grid__item theme-21">
291 | 					<div class="grid__item-content">
292 | 						<nav class="grid__item-nav">
293 | 							<a href="#" class="grid__item-link">Travel Guide</a>
294 | 							<a href="#" class="grid__item-link">Tips</a>
295 | 							<a href="#" class="grid__item-link">Flights</a>
296 | 						</nav>
297 | 						<h2 class="grid__item-title grid__item-title--small">More on Dracula's Heritage</h2>
298 | 						<p class="grid__item-text">Emerged into consciousness extraplanetary, a still more glorious dawn awaits, Orion's sword network of wormholes vanquish the impossible the sky.</p>
299 | 						<a href="#" class="grid__item-link">Read more</a>
300 | 					</div>
301 | 				</div>
302 | 				<div class="grid__item grid__item--bg theme-22">
303 | 					<div class="grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.8">
304 | 						<img src="img/Img26.jpg" alt="Image"/>
305 | 						<img src="img/Img25.jpg" alt="Image Alt"/>
306 | 					</div>
307 | 					<div class="grid__item-content">
308 | 						<span class="grid__item-meta">Dublin</span>
309 | 						<h2 class="grid__item-title">Facades and Bikes</h2>
310 | 						<h3 class="grid__item-subtitle">
311 | 							<span>The parking habits of the Irish</span>
312 | 							<a class="grid__item-link" href="#">Read more</a>
313 | 						</h3>
314 | 					</div>
315 | 				</div>
316 | 			</div>
317 | 		</main>
318 | 		<script src="js/imagesloaded.pkgd.min.js"></script>
319 | 		<script src="js/three.min.js"></script>
320 | 		<script src="js/gsap.min.js"></script>
321 | 		<script src="../dist/hover-effect.umd.js"></script>
322 | 		<script>
323 | 			imagesLoaded( document.querySelectorAll('img'), () => {
324 | 				document.body.classList.remove('loading');
325 | 			});
326 | 
327 | 			Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => {
328 | 				const imgs = Array.from(el.querySelectorAll('img'));
329 | 				new hoverEffect({
330 | 					parent: el,
331 | 					intensity: el.dataset.intensity || undefined,
332 | 					speedIn: el.dataset.speedin || undefined,
333 | 					speedOut: el.dataset.speedout || undefined,
334 | 					easing: el.dataset.easing || undefined,
335 | 					hover: el.dataset.hover || undefined,
336 | 					image1: imgs[0].getAttribute('src'),
337 | 					image2: imgs[1].getAttribute('src'),
338 | 					displacementImage: el.dataset.displacement
339 | 				});
340 | 			});
341 | 		</script>
342 | 	</body>
343 | </html>
344 | 


--------------------------------------------------------------------------------
/example/js/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/example/js/.DS_Store


--------------------------------------------------------------------------------
/example/js/gsap.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * GSAP 3.11.4
 3 |  * https://greensock.com
 4 |  * 
 5 |  * @license Copyright 2022, GreenSock. All rights reserved.
 6 |  * Subject to the terms at https://greensock.com/standard-license or for Club GreenSock members, the agreement issued with that membership.
 7 |  * @author: Jack Doyle, jack@greensock.com
 8 |  */
 9 | 
10 | !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function P(t){return(i=yt(t,ot))&&Ce}function Q(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function R(t,e){return!e&&console.warn(t)}function S(t,e){return t&&(ot[t]=e)&&i&&(i[t]=e)||ot}function T(){return 0}function ea(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=gt.length;r--&&!gt[r].targetTest(i););e=gt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new jt(t[r],e)))||t.splice(r,1);return t}function fa(t){return t._gsap||ea(Ot(t))[0]._gsap}function ga(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ha(t,e){return(t=t.split(",")).forEach(e)||t}function ia(t){return Math.round(1e5*t)/1e5||0}function ja(t){return Math.round(1e7*t)/1e7||0}function ka(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function la(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function ma(){var t,e,r=ct.length,i=ct.slice(0);for(dt={},t=ct.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function na(t,e,r,i){ct.length&&!B&&ma(),t.render(e,r,i||B&&e<0&&(t._initted||t._startAt)),ct.length&&!B&&ma()}function oa(t){var e=parseFloat(t);return(e||0===e)&&(t+"").match(at).length<2?e:r(t)?t.trim():t}function pa(t){return t}function qa(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function ta(t,e){for(var r in e)"__proto__"!==r&&"constructor"!==r&&"prototype"!==r&&(t[r]=v(e[r])?ta(t[r]||(t[r]={}),e[r]):e[r]);return t}function ua(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function va(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||"duration"===r&&i||"ease"===r||(t[r]=e[r])}}($(t.keyframes)):qa;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function xa(t,e,r,i,n){void 0===r&&(r="_first"),void 0===i&&(i="_last");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function ya(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function za(t,e){!t.parent||e&&!t.parent.autoRemoveChildren||t.parent.remove(t),t._act=0}function Aa(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Ca(t,e,r,i){return t._startAt&&(B?t._startAt.revert(ht):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ea(t){return t._repeat?Tt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ga(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ha(t){return t._end=ja(t._start+(t._tDur/Math.abs(t._ts||t._rts||V)||0))}function Ia(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=ja(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ha(t),r._dirty||Aa(r,t)),t}function Ja(t,e){var r;if((e._time||e._initted&&!e._dur)&&(r=Ga(t.rawTime(),e),(!e._dur||kt(0,e.totalDuration(),r)-e._tTime>V)&&e.render(r,!0)),Aa(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-V}}function Ka(e,r,i,n){return r.parent&&za(r),r._start=ja((t(i)?i:i||e!==L?xt(e,i,r):e._time)+r._delay),r._end=ja(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),xa(e,r,"_first","_last",e._sort?"_start":0),bt(r)||(e._recent=r),n||Ja(e,r),e._ts<0&&Ia(e,e._tTime),e}function La(t,e){return(ot.ScrollTrigger||Q("scrollTrigger",e))&&ot.ScrollTrigger.create(e,t)}function Ma(t,e,r,i,n){return Ht(t,e,n),t._initted?!r&&t._pt&&!B&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==Et.frame?(ct.push(t),t._lazy=[n,i],1):void 0:1}function Ra(t,e,r,i){var n=t._repeat,a=ja(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:ja(a*(n+1)+t._rDelay*n):a,0<s&&!i&&Ia(t,t._tTime=t._tDur*s),t.parent&&Ha(t),r||Aa(t.parent,t),t}function Sa(t){return t instanceof Ut?Aa(t):Ra(t,t._dur)}function Va(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!("immediateRender"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new Gt(r[0],u,r[1+o])}function Wa(t,e){return t||0===t?e(t):e}function Ya(t,e){return r(t)&&(e=st.exec(t))?e[1]:""}function _a(t,e){return t&&v(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function cb(r){return r=Ot(r)[0]||R("Invalid scope")||{},function(t){var e=r.current||r.nativeElement||r;return Ot(t,e.querySelectorAll?e:e===r?R("Invalid scope")||a.createElement("div"):r)}}function db(t){return t.sort(function(){return.5-Math.random()})}function eb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Yt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,c=(r||p).length,d=y[c];if(!d){if(!(f="auto"===p.grid?0:(p.grid||[1,U])[1])){for(h=-U;h<(h=r[f++].getBoundingClientRect().left)&&f<c;);f--}for(d=y[c]=[],i=T?Math.min(f,c)*w-.5:m%f,n=f===U?0:T?c*x/f-.5:m/f|0,l=U,u=h=0;u<c;u++)a=u%f-i,s=n-(u/f|0),d[u]=o=b?Math.abs("y"===b?s:a):K(a*a+s*s),h<o&&(h=o),o<l&&(l=o);"random"===m&&db(d),d.max=h-l,d.min=l,d.v=c=(parseFloat(p.amount)||parseFloat(p.each)*(c<f?c-1:b?"y"===b?c/f:f:Math.max(f,c/f))||0)*("edges"===m?-1:1),d.b=c<0?g-c:g,d.u=Ya(p.amount||p.each)||0,_=_&&c<0?Lt(_):_}return c=(d[t]-d.min)/d.max||0,ja(d.b+(_?_(c):c)*d.v)+d.u}}function fb(i){var n=Math.pow(10,((i+"").split(".")[1]||"").length);return function(e){var r=ja(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:Ya(e))}}function gb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||U,h.values?(h=Ot(h.values),(f=!t(h[0]))&&(l*=l)):h=fb(h.increment)),Wa(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=U,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+Ya(e)}:fb(h))}function hb(t,e,r,i){return Wa($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+"").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function lb(e,r,t){return Wa(t,function(t){return e[~~r(t)]})}function ob(t){for(var e,r,i,n,a=0,s="";~(e=t.indexOf("random(",a));)i=t.indexOf(")",e),n="["===t.charAt(e+7),r=t.substr(e+7,i-e-7).match(n?at:tt),s+=t.substr(a,e-a)+hb(n?r:+r[0],n?0:+r[1],+r[2]||1e-5),a=i+1;return s+t.substr(a,t.length-a)}function rb(t,e,r){var i,n,a,s=t.labels,o=U;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function tb(t){return za(t),t.scrollTrigger&&t.scrollTrigger.kill(!!B),t.progress()<1&&Ct(t,"onInterrupt"),t}function yb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*At+.5|0}function zb(e,r,i){var n,a,s,o,u,h,l,f,c,d,p=e?t(e)?[e>>16,e>>8&At,e&At]:0:St.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),St[e])p=St[e];else if("#"===e.charAt(0)){if(e.length<6&&(e="#"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):"")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&At,p&At,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&At,e&At]}else if("hsl"===e.substr(0,3))if(p=d=e.match(tt),r){if(~e.indexOf("="))return p=e.match(et),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=yb(o+1/3,n,a),p[1]=yb(o,n,a),p[2]=yb(o-1/3,n,a);else p=e.match(tt)||St.transparent;p=p.map(Number)}return r&&!d&&(n=p[0]/At,a=p[1]/At,s=p[2]/At,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(c=l-f,u=.5<h?c/(2-l-f):c/(l+f),o=l===n?(a-s)/c+(a<s?6:0):l===a?(s-n)/c+2:(n-a)/c+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Ab(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(rt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Bb(t,e,r){var i,n,a,s,o="",u=(t+o).match(Rt),h=e?"hsla(":"rgba(",l=0;if(!u)return t;if(u=u.map(function(t){return(t=zb(t,e,1))&&h+(e?t[0]+","+t[1]+"%,"+t[2]+"%,"+t[3]:t.join(","))+")"}),r&&(a=Ab(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,"1").split(rt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+"0,0,0,0)":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Eb(t){var e,r=t.join(" ");if(Rt.lastIndex=0,Rt.test(r))return e=Dt.test(r),t[1]=Bb(t[1],e),t[0]=Bb(t[0],e,Ab(t[1])),!0}function Nb(t){var e=(t+"").split("("),r=Ft[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf("{")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(":"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(","):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Bt,"").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf("(")+1,r=t.indexOf(")"),i=t.indexOf("(",e);return t.substring(e,~i&&i<r?t.indexOf(")",r+1):r)}(t).split(",").map(oa)):Ft._CE&&It.test(t)?Ft._CE("",t):r}function Pb(t,e){for(var r,i=t._first;i;)i instanceof Ut?Pb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Pb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Rb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ha(t,function(t){for(var e in Ft[t]=ot[t]=a,Ft[n=t.toLowerCase()]=r,a)Ft[n+("easeIn"===e?".in":"easeOut"===e?".out":".inOut")]=Ft[t+"."+e]=a[e]}),a}function Sb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Tb(r,t,e){function Hm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/W*(Math.asin(1/i)||0),s="out"===r?Hm:"in"===r?function(t){return 1-Hm(1-t)}:Sb(Hm);return n=W/n,s.config=function(t,e){return Tb(r,t,e)},s}function Ub(e,r){function Pm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t="out"===e?Pm:"in"===e?function(t){return 1-Pm(1-t)}:Sb(Pm);return t.config=function(t){return Ub(e,t)},t}var I,B,l,L,h,n,a,i,o,f,c,d,p,_,m,g,b,k,M,O,C,A,D,E,z,F,Y,N,j={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},q={duration:.5,overwrite:!1,delay:0},U=1e8,V=1/U,W=2*Math.PI,X=W/4,H=0,K=Math.sqrt,Z=Math.cos,G=Math.sin,J="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/(?:-?\.?\d|\.)+/gi,et=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,rt=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,it=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,nt=/[+-]=-?[.\d]+/,at=/[^,'"\[\]\s]+/gi,st=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,ot={},ut={suppressEvents:!0,isStart:!0,kill:!1},ht={suppressEvents:!0,kill:!1},lt={suppressEvents:!0},ft={},ct=[],dt={},pt={},_t={},mt=30,gt=[],vt="",yt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},Tt=function _animationCycle(t,e){var r=Math.floor(t/=e);return t&&r===t?r-1:r},bt=function _isFromOrFromStart(t){var e=t.data;return"isFromStart"===e||"isStart"===e},wt={_start:0,endTime:T,totalDuration:T},xt=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||wt,h=t.duration()>=U?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s="%"===e.substr(-1),n=e.indexOf("="),"<"===a||">"===a?(0<=n&&(e=e.replace(/=/,"")),("<"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},kt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Mt=[].slice,Ot=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&zt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||_a(t,1)?i.push.apply(i,Ot(t)):i.push(t)})||i}(t,i):_a(t)?Mt.call(t,0):t?[t]:[]:Mt.call((e||a).querySelectorAll(t),0)},Pt=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Wa(n,function(t){return r+((t-e)/a*s||0)})},Ct=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+"Params"],n=s.callbackScope||t,r&&ct.length&&ma(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},At=255,St={aqua:[0,At,At],lime:[0,At,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,At],navy:[0,0,128],white:[At,At,At],olive:[128,128,0],yellow:[At,At,0],orange:[At,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[At,0,0],pink:[At,192,203],cyan:[0,At,At],transparent:[At,At,At,0]},Rt=function(){var t,e="(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3,4}){1,2}\\b";for(t in St)e+="|"+t+"\\b";return new RegExp(e+")","gi")}(),Dt=/hsl[a]?\(/,Et=(M=Date.now,O=500,C=33,A=M(),D=A,z=E=1e3/240,g={time:0,frame:0,tick:function tick(){wl(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ot.gsap=Ce,(h.gsapVersions||(h.gsapVersions=[])).push(Ce.version),P(i||h.GreenSockGlobals||!h.gsap&&h||{}),m=h.requestAnimationFrame),p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},d=1,wl(2))},sleep:function sleep(){(m?h.cancelAnimationFrame:clearTimeout)(p),d=0,_=T},lagSmoothing:function lagSmoothing(t,e){O=t||1/0,C=Math.min(e||33,O)},fps:function fps(t){E=1e3/(t||240),z=1e3*g.time+E},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),F[e?"unshift":"push"](a),zt(),a},remove:function remove(t,e){~(e=F.indexOf(t))&&F.splice(e,1)&&e<=k&&k--},_listeners:F=[]}),zt=function _wake(){return!d&&Et.wake()},Ft={},It=/^[\d.\-M][\d.\-,\s]/,Bt=/["']/g,Lt=function _invertEase(e){return function(t){return 1-e(1-t)}},Yt=function _parseEase(t,e){return t&&(s(t)?t:Ft[t]||Nb(t))||e};function wl(t){var e,r,i,n,a=M()-D,s=!0===t;if(O<a&&(A+=a-C),(0<(e=(i=(D+=a)-A)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(E<=e?4:E-e),r=1),s||(p=_(wl)),r)for(k=0;k<F.length;k++)F[k](i,b,n,t)}function en(t){return t<N?Y*t*t:t<.7272727272727273?Y*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?Y*(t-=2.25/2.75)*t+.9375:Y*Math.pow(t-2.625/2.75,2)+.984375}ha("Linear,Quad,Cubic,Quart,Quint,Strong",function(t,e){var r=e<5?e+1:e;Rb(t+",Power"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Ft.Linear.easeNone=Ft.none=Ft.Linear.easeIn,Rb("Elastic",Tb("in"),Tb("out"),Tb()),Y=7.5625,N=1/2.75,Rb("Bounce",function(t){return 1-en(1-t)},en),Rb("Expo",function(t){return t?Math.pow(2,10*(t-1)):0}),Rb("Circ",function(t){return-(K(1-t*t)-1)}),Rb("Sine",function(t){return 1===t?1:1-Z(t*X)}),Rb("Back",Ub("in"),Ub("out"),Ub()),Ft.SteppedEase=Ft.steps=ot.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*kt(0,.99999999,t)|0)+n)*r}}},q.ease=Ft["quad.out"],ha("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt",function(t){return vt+=t+","+t+"Params,"});var Nt,jt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ga,this.set=e?e.getSetter:re},qt=((Nt=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Nt.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Nt.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ra(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Nt.totalTime=function totalTime(t,e){if(zt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(Ia(this,t),!r._dp||r.parent||Ja(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Ka(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===V||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),na(this,t,e)),this},Nt.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ea(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Nt.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):this.ratio},Nt.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ea(this),e):this.duration()?Math.min(1,this._time/this._dur):this.ratio},Nt.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?Tt(this._tTime,r)+1:1},Nt.timeScale=function timeScale(t){if(!arguments.length)return this._rts===-V?0:this._rts;if(this._rts===t)return this;var e=this.parent&&this._ts?Ga(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-V?0:this._rts,this.totalTime(kt(-this._delay,this._tDur,e),!0),Ha(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Nt.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(zt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==V&&(this._tTime-=V)))),this):this._ps},Nt.startTime=function startTime(t){if(arguments.length){this._start=t;var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Ka(e,this,t-this._delay),this}return this._start},Nt.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Nt.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ga(e.rawTime(t),this):this._tTime:this._tTime},Nt.revert=function revert(t){void 0===t&&(t=lt);var e=B;return B=t,(this._initted||this._startAt)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),"nested"!==this.data&&!1!==t.kill&&this.kill(),B=e,this},Nt.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(e._ts||1),e=e._dp;return!this.parent&&this._sat?this._sat.vars.immediateRender?-1:this._sat.globalTime(t):r},Nt.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Sa(this)):-2===this._repeat?1/0:this._repeat},Nt.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Sa(this),e?this.time(e):this}return this._rDelay},Nt.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Nt.seek=function seek(t,e){return this.totalTime(xt(this,t),w(e))},Nt.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e))},Nt.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Nt.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Nt.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Nt.resume=function resume(){return this.paused(!1)},Nt.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-V:0)),this):this._rts<0},Nt.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-V,this},Nt.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-V))},Nt.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+"Params"]=r),"onUpdate"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Nt.then=function then(t){var i=this;return new Promise(function(e){function zo(){var t=i.then;i.then=null,s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:pa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?zo():i._prom=zo})},Nt.kill=function kill(){tb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ra(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),d||Et.wake()}qa(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-V,_prom:0,_ps:!1,_rts:1});var Ut=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Ka(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&La(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Va(0,arguments,this),this},e.from=function from(t,e,r){return Va(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Va(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,va(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new Gt(t,e,xt(this,r),1),this},e.call=function call(t,e,r){return Ka(this,Gt.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new Gt(t,r,xt(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,va(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,va(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,c,d,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:ja(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(d=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=ja(v%o),v===m?(s=this._repeat,i=g):((s=~~(v/o))&&s===v/o&&(i=g,s--),g<i&&(i=g)),c=Tt(this._tTime,o),!_&&this._tTime&&c!==s&&(c=s),d&&1&s&&(i=g-i,p=1),s!==c&&!this._lock){var T=d&&1&c,b=T===(d&&1&s);if(s<c&&(T=!T),_=T?0:g,this._lock=1,this.render(_||(p?0:ja(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Ct(this,"onRepeat"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Pb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if("isPause"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start<e)return i;i=i._prev}}(this,ja(_),ja(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&i&&!e&&(Ct(this,"onStart"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-V);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||B&&(n._initted||n._startAt)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-V:V);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-V)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ha(this),this.render(t,e,r);this._onUpdate&&!e&&Ct(this,"onUpdate",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||za(this,1),e||t<0&&!_||!v&&!_&&m||(Ct(this,v===m&&0<=t?"onComplete":"onReverseComplete",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=xt(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=Gt.delayedCall(0,e)}return this!==e?Ka(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-U);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof Gt?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(ya(this,t),t===this._recent&&(this._recent=this._last),Aa(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=ja(Et.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=xt(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=Gt.delayedCall(0,e||T,r);return i.data="isPause",this._hasPause=1,Ka(this,i,xt(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=xt(this,t);e;)e._start===t&&"isPause"===e.data&&za(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Vt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Ot(e),s=this._first,o=t(r);s;)s instanceof Gt?la(s._targets,a)&&(o?(!Vt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=xt(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=Gt.to(i,qa({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||V,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ra(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,qa({startAt:{time:xt(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),rb(this,xt(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+V)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);for(var i,n=this._first,a=this.labels;n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Aa(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Aa(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=U;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Ka(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=r/a._ts,a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ra(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(na(L,Ga(t,L)),f=Et.frame),Et.frame>=mt){mt+=j.autoSleep||120;var e=L._first;if((!e||!e._ts)&&j.autoSleep&&Et._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||Et.sleep()}}},Timeline}(qt);qa(Ut.prototype,{_lock:0,_hasPause:0,_forcing:0});function _b(t,e,i,n,a,o){var u,h,l,f;if(pt[t]&&!1!==(u=new pt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Qt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||J(t))return r(t)?Qt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Qt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new pe(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==c))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function fc(t,r,e,i){var n,a,s=r.ease||i||"power1.inOut";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),"ease"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Vt,Wt,Xt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var c,d=t[e],p="get"!==i?i:s(d)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():d,_=s(d)?l?ee:$t:Jt;if(r(n)&&(~n.indexOf("random(")&&(n=ob(n)),"="===n.charAt(1)&&(!(c=ka(p,n)+(Ya(p)||0))&&0!==c||(n=c))),!f||p!==n||Wt)return isNaN(p*n)||""===n?(d||e in t||Q(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,c,d,p,_=new pe(this._pt,t,e,0,1,se,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(d=~(i+="").indexOf("random("))&&(i=ob(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(it)||[];o=it.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(c=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:c,c:"="===l.charAt(1)?ka(c,l)-c:parseFloat(l)-c,m:h&&h<4?Math.round:0},m=it.lastIndex);return _.c=m<i.length?i.substring(m,i.length):"",_.fp=s,(nt.test(i)||d)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||j.stringFilter,l)):(c=new pe(this._pt,t,e,+p||0,n-(p||0),"boolean"==typeof d?ae:ne,0,_),l&&(c.fp=l),u&&c.modifier(u,this,t),this._pt=c)},Ht=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,c,d,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.onUpdateParams,k=m.callbackScope,M=m.runBackwards,O=m.yoyoEase,P=m.keyframes,C=m.autoRevert,A=t._dur,S=t._startAt,R=t._targets,D=t.parent,E=D&&"nested"===D.data?D.vars.targets:R,z="auto"===t._overwrite&&!I,F=t.timeline;if(!F||P&&g||(g="none"),t._ease=Yt(g,q.ease),t._yEase=O?Lt(Yt(!0===O?g:O,q.ease)):0,O&&t._yoyo&&!t._repeat&&(O=t._yEase,t._yEase=t._ease,t._ease=O),t._from=!F&&!!m.runBackwards,!F||P&&!m.stagger){if(p=(l=R[0]?fa(R[0]).harness:0)&&m[l.prop],i=ua(m,ft),S&&(S._zTime<0&&S.progress(1),e<0&&M&&y&&!C?S.render(-1,!0):S.revert(M&&A?ht:ut),S._lazy=0),v){if(za(t._startAt=Gt.set(R,qa({data:"isStart",overwrite:!1,parent:D,immediateRender:!0,lazy:!S&&w(T),startAt:null,delay:0,onUpdate:b,onUpdateParams:x,callbackScope:k,stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(B||!y&&!C)&&t._startAt.revert(ht),y&&A&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(M&&A&&!S)if(e&&(y=!1),a=qa({overwrite:!1,data:"isFromStart",lazy:y&&!S&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),za(t._startAt=Gt.set(R,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(B?t._startAt.revert(ht):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,V,V);for(t._pt=t._ptCache=0,T=A&&w(T)||T&&!A,n=0;n<R.length;n++){if(h=(o=R[n])._gsap||ea(R)[n]._gsap,t._ptLookup[n]=c={},dt[h.id]&&ct.length&&ma(),d=E===R?n:E.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,d,E)&&(t._pt=s=new pe(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){c[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)pt[a]&&(f=_b(a,i,t,d,o,E))?f.priority&&(u=1):c[a]=s=Xt.call(t,o,a,"get",i[a],d,E,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Vt=t,L.killTweensOf(o,c,t.globalTime(e)),_=!t.parent,Vt=0),t._pt&&T&&(dt[h.id]=1)}u&&de(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,P&&e<=0&&F.render(U,!0,!0)},Qt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf("random(")?ob(t):t},Kt=vt+"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert",Zt={};ha(Kt+",id,stagger,delay,duration,paused,scrollTrigger",function(t){return Zt[t]=1});var Gt=function(z){function Tween(e,r,i,n){var a;"number"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,c,d,p=(a=z.call(this,n?r:va(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,T=p.stagger,b=p.overwrite,x=p.keyframes,k=p.defaults,M=p.scrollTrigger,O=p.yoyoEase,P=r.parent||L,C=($(e)||J(e)?t(e[0]):"length"in r)?[e]:Ot(e);if(a._targets=C.length?ea(C):R("GSAP target "+e+" not found. https://greensock.com",!j.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=b,x||T||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Ut({data:"nested",defaults:k||{},targets:P&&"nested"===P.data?P.vars.targets:C})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,T||y(_)||y(m)){if(h=C.length,c=T&&eb(T),v(T))for(l in T)~Kt.indexOf(l)&&((d=d||{})[l]=T[l]);for(o=0;o<h;o++)(u=ua(r,Zt)).stagger=0,O&&(u.yoyoEase=O),d&&yt(u,d),f=C[o],u.duration=+Qt(_,_assertThisInitialized(a),o,f,C),u.delay=(+Qt(m,_assertThisInitialized(a),o,f,C)||0)-a._delay,!T&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,c?c(o,f,C):0),s._ease=Ft.none;s.duration()?_=m=0:a.timeline=0}else if(x){va(qa(s.vars.defaults,{ease:"none"})),s._ease=Yt(x.ease||r.ease||"none");var A,S,D,E=0;if($(x))x.forEach(function(t){return s.to(C,t,">")}),s.duration();else{for(l in u={},x)"ease"===l||"easeEach"===l||fc(l,x[l],u,x.easeEach);for(l in u)for(A=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<A.length;o++)(D={ease:(S=A[o]).e,duration:(S.t-(o?A[o-1].t:0))/100*_})[l]=S.v,s.to(C,D,E),E+=D.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==b||I||(Vt=_assertThisInitialized(a),L.killTweensOf(C),Vt=0),Ka(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!x&&a._start===ja(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&"nested"!==P.data)&&(a._tTime=-V,a.render(Math.max(0,-m)||0)),M&&La(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,z);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,c=this._time,d=this._tDur,p=this._dur,_=t<0,m=d-V<t&&!_?d:t<V?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=ja(m%s),m===d?(a=this._repeat,i=p):((a=~~(m/s))&&a===m/s&&(i=p,a--),p<i&&(i=p)),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=Tt(this._tTime,s),i===c&&!r&&this._initted)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Pb(l,u),!this.vars.repeatRefresh||u||this._lock||(this._lock=r=1,this.render(ja(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Ma(this,_?t:i,r,e,m))return this._tTime=0,this;if(c!==this._time)return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),i&&!c&&!e&&(Ct(this,"onStart"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:!i&&u?-V:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Ca(this,t,0,r),Ct(this,"onUpdate")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Ct(this,"onRepeat"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Ca(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||za(this,1),e||_&&!c||!(m||c||u)||(Ct(this,m===d?"onComplete":"onReverseComplete",!0),!this._prom||m<d&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!bt(t))||(t._ts<0||t._dp._ts<0)&&!bt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=kt(0,t._tDur,e),a=Tt(l,h),t._yoyo&&1&a&&(u=1-u),a!==Tt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||B||i||t._zTime===V||!e&&t._zTime){if(!t._initted&&Ma(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?V:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Ca(t,e,0,!0),t._onUpdate&&!r&&Ct(t,"onUpdate"),l&&t._repeat&&!r&&t.parent&&Ct(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&za(t,1),r||B||(Ct(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),z.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i){d||Et.wake(),this._ts||this.play();var n,a=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Ht(this,a),n=this._ease(a/this._dur),function _updatePropTweens(t,e,r,i,n,a,s){var o,u,h,l,f=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!f)for(f=t._ptCache[e]=[],h=t._ptLookup,l=t._targets.length;l--;){if((o=h[l][e])&&o.d&&o.d._pt)for(o=o.d._pt;o&&o.p!==e&&o.fp!==e;)o=o._next;if(!o)return Wt=1,t.vars[e]="+=0",Ht(t,s),Wt=0,1;f.push(o)}for(l=f.length;l--;)(o=(u=f[l])._pt||u).s=!i&&0!==i||n?o.s+(i||0)+a*o.c:i,o.c=r-o.s,u.e&&(u.e=ia(r)+Ya(u.e)),u.b&&(u.b=o.s+Ya(u.b))}(this,t,e,r,i,n,a)?this.resetTo(t,e,r,i):(Ia(this,0),this.parent||xa(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?tb(this):this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Vt&&!0!==Vt.vars.overwrite)._first||tb(this),this.parent&&i!==this.timeline.totalDuration()&&Ra(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,c=t?Ot(t):f,d=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,c))return"all"===e&&(this._pt=0),tb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ha(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?fa(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=yt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~c.indexOf(f[l]))for(u in a=d[l],"all"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||ya(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&tb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Va(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Va(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);qa(Gt.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ha("staggerTo,staggerFrom,staggerFromTo",function(r){Gt[r]=function(){var t=new Ut,e=Mt.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function nc(t,e,r){return t.setAttribute(e,r)}function vc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var Jt=function _setterPlain(t,e,r){return t[e]=r},$t=function _setterFunc(t,e,r){return t[e](r)},ee=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},re=function _getSetter(t,e){return s(t[e])?$t:u(t[e])&&t.setAttribute?nc:Jt},ne=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},ae=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},se=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},oe=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},le=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},fe=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?ya(this,i,"_pt"):i.dep||(e=1),i=r;return!e},de=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},pe=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=vc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ne,this.d=s||this,this.set=o||Jt,this.pr=u||0,(this._next=t)&&(t._prev=this)}ha(vt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",function(t){return ft[t]=1}),ot.TweenMax=ot.TweenLite=Gt,ot.TimelineLite=ot.TimelineMax=Ut,L=new Ut({sortChildren:!1,defaults:q,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),j.stringFilter=Eb;function Cc(t){return(Te[t]||we).map(function(t){return t()})}function Dc(){var t=Date.now(),o=[];2<t-xe&&(Cc("matchMediaInit"),ye.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Cc("matchMediaRevert"),o.forEach(function(t){return t.onMatch(t)}),xe=t,Cc("matchMedia"))}var _e,ye=[],Te={},we=[],xe=0,ke=((_e=Context.prototype).add=function add(t,i,n){function Cw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=cb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Cw,t===s?Cw(a):t?a[t]=Cw:Cw},_e.ignore=function ignore(t){var e=l;l=null,t(this),l=e},_e.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof Gt&&!(t.parent&&"nested"===t.parent.data)&&e.push(t)}),e},_e.clear=function clear(){this._r.length=this.data.length=0},_e.kill=function kill(e,t){var r=this;if(e){var i=this.getTweens();this.data.forEach(function(t){"isFlip"===t.data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return i.splice(i.indexOf(t),1)}))}),i.map(function(t){return{g:t.globalTime(0),t:t}}).sort(function(t,e){return e.g-t.g||-1}).forEach(function(t){return t.t.revert(e)}),this.data.forEach(function(t){return!(t instanceof qt)&&t.revert&&t.revert(e)}),this._r.forEach(function(t){return t(e,r)}),this.isReverted=!0}else this.data.forEach(function(t){return t.kill&&t.kill()});if(this.clear(),t){var n=ye.indexOf(this);~n&&ye.splice(n,1)}},_e.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&cb(e),this.data=[],this._r=[],this.isReverted=!1,t&&this.add(t)}var Me,Oe=((Me=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new ke(0,r||this.scope),o=s.conditions={};for(n in this.contexts.push(s),e=s.add("onMatch",e),s.queries=t)"all"===n?a=1:(i=h.matchMedia(t[n]))&&(ye.indexOf(s)<0&&ye.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Dc):i.addEventListener("change",Dc));return a&&e(s),this},Me.revert=function revert(t){this.kill(t||{})},Me.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t}var Pe={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return function _createPlugin(t){var e=(t=!t.name&&t.default||t).name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:T,render:oe,add:Xt,kill:fe,modifier:le,rawVars:0},a={targetTest:0,get:0,getSetter:re,aliases:{},register:0};if(zt(),t!==i){if(pt[e])return;qa(i,qa(ua(t,n),a)),yt(i.prototype,yt(n,ua(t,a))),pt[i.prop=e]=i,t.targetTest&&(gt.push(i),ft[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}S(e,i),t.register&&t.register(Ce,i,pe)}(t)})},timeline:function timeline(t){return new Ut(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Ot(i)[0]);var a=fa(i||{}).get,s=e?pa:oa;return"native"===e&&(e=""),i?t?s((pt[t]&&pt[t].get||a)(i,t,e,n)):function(t,e,r){return s((pt[t]&&pt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Ot(r)).length){var n=r.map(function(t){return Ce.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=pt[e],o=fa(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;c._pt=0,e.init(r,i?t+i:t,c,0,[r]),e.render(1,e),c._pt&&oe(1,c)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function Ux(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Ce.to(t,yt(((r={})[i]="+=0.1",r.paused=!0,r),e||{}));return Ux.tween=n,Ux},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Yt(t.ease,q.ease)),ta(q,t||{})},config:function config(t){return ta(j,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||"").split(",").forEach(function(t){return t&&!pt[t]&&!ot[t]&&R(i+" effect requires "+t+" plugin.")}),_t[i]=function(t,e,r){return n(Ot(t),qa(e||{},a),r)},r&&(Ut.prototype[i]=function(t,e,r){return this.add(_t[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Ft[t]=Yt(e)},parseEase:function parseEase(t,e){return arguments.length?Yt(t,e):Ft},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Ut(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof Gt&&r.vars.onComplete===r._targets[0]||Ka(n,r,r._start-r._delay),r=i;return Ka(L,n,0),n},context:function context(t,e){return t?new ke(t,e):l},matchMedia:function matchMedia(t){return new Oe(t)},matchMediaRefresh:function matchMediaRefresh(){return ye.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Dc()},addEventListener:function addEventListener(t,e){var r=Te[t]||(Te[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Te[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?lb(e,wrap(0,e.length),t):Wa(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?lb(e,wrapYoyo(0,e.length-1),t):Wa(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:eb,random:hb,snap:gb,normalize:function normalize(t,e,r){return Pt(t,e,0,1,r)},getUnit:Ya,clamp:function clamp(e,r,t){return Wa(t,function(t){return kt(e,r,t)})},splitColor:zb,toArray:Ot,selector:cb,mapRange:Pt,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||Ya(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),c={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=yt($(e)?[]:{},e));if(!u){for(s in i)Xt.call(c,e,s,"get",i[s]);a=function func(t){return oe(t,c)||(f?e.p:e)}}}return Wa(t,a)},shuffle:db},install:P,effects:_t,ticker:Et,updateRoot:Ut.updateRoot,plugins:pt,globalTimeline:L,core:{PropTween:pe,globals:S,Tween:Gt,Timeline:Ut,Animation:qt,getCache:fa,_removeLinkedListItem:ya,reverting:function reverting(){return B},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return I=t}}};ha("to,from,fromTo,delayedCall,set,killTweensOf",function(t){return Pe[t]=Gt[t]}),Et.add(Ut.updateRoot),c=Pe.to({},{duration:0});function Hc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Jc(t,a){return{name:t,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ha(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Hc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Ce=Pe.registerPlugin({name:"attr",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||"",(s=this.add(t,"setAttribute",(o||0)+"",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)B?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:"endArray",init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Jc("roundProps",fb),Jc("modifiers"),Jc("snap",gb))||Pe;Gt.version=Ut.version=Ce.version="3.11.4",o=1,x()&&zt();function td(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function ud(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function vd(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function wd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function xd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function yd(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function zd(t,e,r){return t.style[e]=r}function Ad(t,e,r){return t.style.setProperty(e,r)}function Bd(t,e,r){return t._gsap[e]=r}function Cd(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Dd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Ed(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Hd(t,e){var r=this,i=this.target,n=i.style;if(t in rr){if(this.tfm=this.tfm||{},"transform"!==t&&(~(t=hr[t]||t).indexOf(",")?t.split(",").forEach(function(t){return r.tfm[t]=mr(i,t)}):this.tfm[t]=i._gsap.x?i._gsap[t]:mr(i,t)),0<=this.props.indexOf(lr))return;i._gsap.svg&&(this.svgo=i.getAttribute("data-svg-origin"),this.props.push(fr,e,"")),t=lr}(n||e)&&this.props.push(t,e,n[t])}function Id(t){t.translate&&(t.removeProperty("translate"),t.removeProperty("scale"),t.removeProperty("rotate"))}function Jd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(r[t].replace(sr,"-$1").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute("data-svg-origin",this.svgo||"")),!(t=Fe())||t.isStart||n[lr]||(Id(n),a.uncache=1)}}function Kd(t,e){var r={target:t,props:[],revert:Jd,save:Hd};return e&&e.split(",").forEach(function(t){return r.save(t)}),r}function Md(t,e){var r=Se.createElementNS?Se.createElementNS((e||"http://www.w3.org/1999/xhtml").replace(/^https/,"http"),t):Se.createElement(t);return r.style?r:Se.createElement(t)}function Nd(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(sr,"-$1").toLowerCase())||i.getPropertyValue(e)||!r&&Nd(t,dr(e)||e,1)||""}function Qd(){(function _windowExists(){return"undefined"!=typeof window})()&&window.document&&(Ae=window,Se=Ae.document,Re=Se.documentElement,Ee=Md("div")||{style:{}},Md("div"),lr=dr(lr),fr=lr+"Origin",Ee.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Ie=!!dr("perspective"),Fe=Ce.core.reverting,De=1)}function Rd(t){var e,r=Md("svg",this.ownerSVGElement&&this.ownerSVGElement.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),i=this.parentNode,n=this.nextSibling,a=this.style.cssText;if(Re.appendChild(r),r.appendChild(this),this.style.display="block",t)try{e=this.getBBox(),this._gsapBBox=this.getBBox,this.getBBox=Rd}catch(t){}else this._gsapBBox&&(e=this._gsapBBox());return i&&(n?i.insertBefore(this,n):i.appendChild(this)),Re.removeChild(r),this.style.cssText=a,e}function Sd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Td(e){var r;try{r=e.getBBox()}catch(t){r=Rd.call(e,!0)}return r&&(r.width||r.height)||e.getBBox===Rd||(r=Rd.call(e,!0)),!r||r.width||r.x||r.y?r:{x:+Sd(e,["x","cx","x1"])||0,y:+Sd(e,["y","cy","y1"])||0,width:0,height:0}}function Ud(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Td(t))}function Vd(t,e){if(e){var r=t.style;e in rr&&e!==fr&&(e=lr),r.removeProperty?("ms"!==e.substr(0,2)&&"webkit"!==e.substr(0,6)||(e="-"+e),r.removeProperty(e.replace(sr,"-$1").toLowerCase())):r.removeAttribute(e)}}function Wd(t,e,r,i,n,a){var s=new pe(t._pt,e,r,0,1,a?yd:xd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function Zd(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+"").trim().substr((u+"").length)||"px",l=Ee.style,f=or.test(e),c="svg"===t.tagName.toLowerCase(),d=(c?"client":"offset")+(f?"Width":"Height"),p="px"===i,_="%"===i;return i===h||!u||pr[i]||pr[h]?u:("px"===h||p||(u=Zd(t,e,r,"px")),o=t.getCTM&&Ud(t),!_&&"%"!==h||!rr[e]&&!~e.indexOf("adius")?(l[f?"width":"height"]=100+(p?h:i),a=~e.indexOf("adius")||"em"===i&&t.appendChild&&!c?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Se&&a.appendChild||(a=Se.body),(s=a._gsap)&&_&&s.width&&f&&s.time===Et.time&&!s.uncache?ia(u/s.width*100):(!_&&"%"!==h||_r[Nd(a,"display")]||(l.position=Nd(t,"position")),a===t&&(l.position="static"),a.appendChild(Ee),n=Ee[d],a.removeChild(Ee),l.position="absolute",f&&_&&((s=fa(a)).time=Et.time,s.width=a[d]),ia(p?n*u/100:n&&u?100/n*u:0))):(n=o?t.getBBox()[f?"width":"height"]:t[d],ia(_?u/n*100:u/100*n)))}function _d(t,e,r,i){if(!r||"none"===r){var n=dr(e,t,1),a=n&&Nd(t,n,1);a&&a!==r?(e=n,r=a):"borderColor"===e&&(r=Nd(t,"borderTopColor"))}var s,o,u,h,l,f,c,d,p,_,m,g=new pe(this._pt,t.style,e,0,1,se),v=0,y=0;if(g.b=r,g.e=i,r+="","auto"===(i+="")&&(t.style[e]=i,i=Nd(t,e)||i,t.style[e]=r),Eb(s=[r,i]),i=s[1],u=(r=s[0]).match(rt)||[],(i.match(rt)||[]).length){for(;o=rt.exec(i);)c=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:"rgba("!==p.substr(-5)&&"hsla("!==p.substr(-5)||(l=1),c!==(f=u[y++]||"")&&(h=parseFloat(f)||0,m=f.substr((h+"").length),"="===c.charAt(1)&&(c=ka(h,c)+m),d=parseFloat(c),_=c.substr((d+"").length),v=rt.lastIndex-_.length,_||(_=_||j.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=Zd(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:",",s:h,c:d-h,m:l&&l<4||"zIndex"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):""}else g.r="display"===e&&"none"===i?yd:xd;return nt.test(i)&&(g.e=0),this._pt=g}function be(t){var e=t.split(" "),r=e[0],i=e[1]||"50%";return"top"!==r&&"bottom"!==r&&"left"!==i&&"right"!==i||(t=r,r=i,i=t),e[0]=gr[r]||r,e[1]=gr[i]||i,e.join(" ")}function ce(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if("all"===o||!0===o)s.cssText="",i=1;else for(n=(o=o.split(",")).length;-1<--n;)r=o[n],rr[r]&&(i=1,r="transformOrigin"===r?fr:lr),Vd(a,r);i&&(Vd(a,lr),u&&(u.svg&&a.removeAttribute("transform"),br(a,1),u.uncache=1,Id(s)))}}function ge(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t}function he(t){var e=Nd(t,lr);return ge(e)?yr:e.substr(7).match(et).map(ia)}function ie(t,e){var r,i,n,a,s=t._gsap||fa(t),o=t.style,u=he(t);return s.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(",")?yr:u:(u!==yr||t.offsetParent||t===Re||s.svg||(n=o.display,o.display="block",(r=t.parentNode)&&t.offsetParent||(a=1,i=t.nextElementSibling,Re.appendChild(t)),u=he(t),n?o.display=n:Vd(t,"display"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Re.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function je(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||ie(t,!0),f=h.xOrigin||0,c=h.yOrigin||0,d=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(" "),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==yr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Td(t)).x+(~b[0].indexOf("%")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf("%")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-c,h.xOffset=d+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[fr]="0px 0px",a&&(Wd(a,h,"xOrigin",f,w),Wd(a,h,"yOrigin",c,x),Wd(a,h,"xOffset",d,h.xOffset),Wd(a,h,"yOffset",p,h.yOffset)),t.setAttribute("data-svg-origin",w+" "+x)}function me(t,e,r){var i=Ya(e);return ia(parseFloat(e)+parseFloat(Zd(t,"x",r+"px",i)))+i}function te(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf("rad")?ir:1)-n,f=n+l+"deg";return h&&("short"===(s=a.split("_")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),"cw"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:"ccw"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new pe(t._pt,e,i,n,l,ud),o.e=f,o.u="deg",t._props.push(i),o}function ue(t,e){for(var r in e)t[r]=e[r];return t}function ve(t,e,r){var i,n,a,s,o,u,h,l=ue({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute("transform"),r.setAttribute("transform",""),f[lr]=e,i=br(r,1),Vd(r,lr),r.setAttribute("transform",a)):(a=getComputedStyle(r)[lr],f[lr]=e,i=br(r,1),f[lr]=a),rr)(a=l[n])!==(s=i[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=Ya(a)!==(h=Ya(s))?Zd(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new pe(t._pt,i,n,o,u-o,td),t._pt.u=h||0,t._props.push(n));ue(i,l)}var Ae,Se,Re,De,Ee,ze,Fe,Ie,Be=Ft.Power0,Le=Ft.Power1,Ye=Ft.Power2,Ne=Ft.Power3,qe=Ft.Power4,Ue=Ft.Linear,Ve=Ft.Quad,We=Ft.Cubic,Xe=Ft.Quart,He=Ft.Quint,Qe=Ft.Strong,Ke=Ft.Elastic,Ze=Ft.Back,Ge=Ft.SteppedEase,Je=Ft.Bounce,$e=Ft.Sine,tr=Ft.Expo,er=Ft.Circ,rr={},ir=180/Math.PI,nr=Math.PI/180,ar=Math.atan2,sr=/([A-Z])/g,or=/(left|right|width|margin|padding|x)/i,ur=/[\s,\(]\S/,hr={autoAlpha:"opacity,visibility",scale:"scaleX,scaleY",alpha:"opacity"},lr="transform",fr=lr+"Origin",cr="O,Moz,ms,Ms,Webkit".split(","),dr=function _checkPropPrefix(t,e,r){var i=(e||Ee).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(cr[n]+t in i););return n<0?null:(3===n?"ms":0<=n?cr[n]:"")+t},pr={deg:1,rad:1,turn:1},_r={grid:1,flex:1},mr=function _get(t,e,r,i){var n;return De||Qd(),e in hr&&"transform"!==e&&~(e=hr[e]).indexOf(",")&&(e=e.split(",")[0]),rr[e]&&"transform"!==e?(n=br(t,i),n="transformOrigin"!==e?n[e]:n.svg?n.origin:wr(Nd(t,fr))+" "+n.zOrigin+"px"):(n=t.style[e])&&"auto"!==n&&!i&&!~(n+"").indexOf("calc(")||(n=vr[e]&&vr[e](t,e,r)||Nd(t,e)||ga(t,e)||("opacity"===e?1:0)),r&&!~(n+"").trim().indexOf(" ")?Zd(t,e,n,r)+r:n},gr={top:"0%",bottom:"100%",left:"0%",right:"100%",center:"50%"},vr={clearProps:function clearProps(t,e,r,i,n){if("isFromStart"!==n.data){var a=t._pt=new pe(t._pt,e,r,0,0,ce);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},yr=[1,0,0,1,0,0],Tr={},br=function _parseTransform(t,e){var r=t._gsap||new jt(t);if("x"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,c,d,p,_,m,g,v,y,T,b,w,x,k,M,O,P,C,A,S,R,D,E,z,F=t.style,I=r.scaleX<0,B="deg",L=getComputedStyle(t),Y=Nd(t,fr)||"0";return i=n=a=u=h=l=f=c=d=0,s=o=1,r.svg=!(!t.getCTM||!Ud(t)),L.translate&&("none"===L.translate&&"none"===L.scale&&"none"===L.rotate||(F[lr]=("none"!==L.translate?"translate3d("+(L.translate+" 0 0").split(" ").slice(0,3).join(", ")+") ":"")+("none"!==L.rotate?"rotate("+L.rotate+") ":"")+("none"!==L.scale?"scale("+L.scale.split(" ").join(",")+") ":"")+("none"!==L[lr]?L[lr]:"")),F.scale=F.rotate=F.translate="none"),m=ie(t,r.svg),r.svg&&(O=r.uncache?(P=t.getBBox(),Y=r.xOrigin-P.x+"px "+(r.yOrigin-P.y)+"px",""):!e&&t.getAttribute("data-svg-origin"),je(t,O||Y,!!O||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==yr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=M=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?ar(b,T)*ir:0,(f=w||x?ar(w,x)*ir+u:0)&&(o*=Math.abs(Math.cos(f*nr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(z=m[6],D=m[7],A=m[8],S=m[9],R=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=ar(z,R))*ir,g&&(O=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),P=M*v+S*y,C=z*v+R*y,A=k*-y+A*v,S=M*-y+S*v,R=z*-y+R*v,E=D*-y+E*v,k=O,M=P,z=C),l=(g=ar(-w,R))*ir,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=O=T*v-A*y,b=P=b*v-S*y,w=C=w*v-R*y),u=(g=ar(b,T))*ir,g&&(O=T*(v=Math.cos(g))+b*(y=Math.sin(g)),P=k*v+M*y,b=b*v-T*y,M=M*v-k*y,T=O,k=P),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ia(Math.sqrt(T*T+b*b+w*w)),o=ia(Math.sqrt(M*M+z*z)),g=ar(k,M),f=2e-4<Math.abs(g)?g*ir:0,d=E?1/(E<0?-E:E):0),r.svg&&(O=t.getAttribute("transform"),r.forceCSS=t.setAttribute("transform","")||!ge(Nd(t,lr)),O&&t.setAttribute("transform",O))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+"px",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+"px",r.z=a+"px",r.scaleX=ia(s),r.scaleY=ia(o),r.rotation=ia(u)+B,r.rotationX=ia(h)+B,r.rotationY=ia(l)+B,r.skewX=f+B,r.skewY=c+B,r.transformPerspective=d+"px",(r.zOrigin=parseFloat(Y.split(" ")[2])||0)&&(F[fr]=wr(Y)),r.xOffset=r.yOffset=0,r.force3D=j.force3D,r.renderTransform=r.svg?Cr:Ie?Pr:xr,r.uncache=0,r},wr=function _firstTwoOnly(t){return(t=t.split(" "))[0]+" "+t[1]},xr=function _renderNon3DTransforms(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Pr(t,e)},kr="0deg",Mr="0px",Or=") ",Pr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,c=r.skewY,d=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y="",T="auto"===m&&t&&1!==t||!0===m;if(v&&(l!==kr||h!==kr)){var b,w=parseFloat(h)*nr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*nr,b=Math.cos(w),a=me(g,a,x*b*-v),s=me(g,s,-Math.sin(w)*-v),o=me(g,o,k*b*-v+v)}_!==Mr&&(y+="perspective("+_+Or),(i||n)&&(y+="translate("+i+"%, "+n+"%) "),!T&&a===Mr&&s===Mr&&o===Mr||(y+=o!==Mr||T?"translate3d("+a+", "+s+", "+o+") ":"translate("+a+", "+s+Or),u!==kr&&(y+="rotate("+u+Or),h!==kr&&(y+="rotateY("+h+Or),l!==kr&&(y+="rotateX("+l+Or),f===kr&&c===kr||(y+="skew("+f+", "+c+Or),1===d&&1===p||(y+="scale("+d+", "+p+Or),g.style[lr]=y||"translate(0, 0)"},Cr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,c=o.rotation,d=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);c=parseFloat(c),d=parseFloat(d),(p=parseFloat(p))&&(d+=p=parseFloat(p),c+=p),c||d?(c*=nr,d*=nr,r=Math.cos(c)*_,i=Math.sin(c)*_,n=Math.sin(c-d)*-m,a=Math.cos(c-d)*m,d&&(p*=nr,s=Math.tan(d-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ia(r),i=ia(i),n=ia(n),a=ia(a)):(r=_,a=m,i=n=0),(x&&!~(l+"").indexOf("px")||k&&!~(f+"").indexOf("px"))&&(x=Zd(g,"x",l,"px"),k=Zd(g,"y",f,"px")),(v||y||T||b)&&(x=ia(x+v-(v*r+y*n)+T),k=ia(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ia(x+u/100*s.width),k=ia(k+h/100*s.height)),s="matrix("+r+","+i+","+n+","+a+","+x+","+k+")",g.setAttribute("transform",s),w&&(g.style[lr]=s)};ha("padding,margin,Width,Radius",function(e,r){var t="Right",i="Bottom",n="Left",o=(r<3?["Top",t,i,n]:["Top"+n,"Top"+t,i+t,i+n]).map(function(t){return r<2?e+t:"border"+t+e});vr[1<r?"border"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return mr(e,t,r)}),5===(s=a.join(" ")).split(a[0]).length?a[0]:s;a=(i+"").split(" "),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ar,Sr,Rr,Dr={name:"css",register:Qd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,c,d,p,_,m,g,v,y,T,b,w=this._props,x=t.style,k=i.vars.startAt;for(c in De||Qd(),this.styles=this.styles||Kd(t),b=this.styles.props,this.tween=i,e)if("autoRound"!==c&&(o=e[c],!pt[c]||!_b(c,e,i,n,t,a)))if(l=typeof o,f=vr[c],"function"===l&&(l=typeof(o=o.call(i,n,t,a))),"string"===l&&~o.indexOf("random(")&&(o=ob(o)),f)f(this,t,c,o,i)&&(T=1);else if("--"===c.substr(0,2))s=(getComputedStyle(t).getPropertyValue(c)+"").trim(),o+="",Rt.lastIndex=0,Rt.test(s)||(d=Ya(s),p=Ya(o)),p?d!==p&&(s=Zd(t,c,s,p)+p):d&&(o+=d),this.add(x,"setProperty",s,o,n,a,0,0,c),w.push(c),b.push(c,0,x[c]);else if("undefined"!==l){if(k&&c in k?(s="function"==typeof k[c]?k[c].call(i,n,t,a):k[c],r(s)&&~s.indexOf("random(")&&(s=ob(s)),Ya(s+"")||(s+=j.units[c]||Ya(mr(t,c))||""),"="===(s+"").charAt(1)&&(s=mr(t,c))):s=mr(t,c),h=parseFloat(s),(_="string"===l&&"="===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),c in hr&&("autoAlpha"===c&&(1===h&&"hidden"===mr(t,"visibility")&&u&&(h=0),b.push("visibility",0,x.visibility),Wd(this,x,"visibility",h?"inherit":"hidden",u?"inherit":"hidden",!u)),"scale"!==c&&"transform"!==c&&~(c=hr[c]).indexOf(",")&&(c=c.split(",")[0])),m=c in rr)if(this.styles.save(c),g||((v=t._gsap).renderTransform&&!e.parseTransform||br(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new pe(this._pt,x,lr,0,1,v.renderTransform,v,0,-1)).dep=1),"scale"===c)this._pt=new pe(this._pt,v,"scaleY",v.scaleY,(_?ka(v.scaleY,_+u):u)-v.scaleY||0,td),this._pt.u=0,w.push("scaleY",c),c+="X";else{if("transformOrigin"===c){b.push(fr,0,x[fr]),o=be(o),v.svg?je(t,o,0,y,0,this):((p=parseFloat(o.split(" ")[2])||0)!==v.zOrigin&&Wd(this,v,"zOrigin",v.zOrigin,p),Wd(this,x,c,wr(s),wr(o)));continue}if("svgOrigin"===c){je(t,o,1,y,0,this);continue}if(c in Tr){te(this,v,c,h,_?ka(h,_+o):o);continue}if("smoothOrigin"===c){Wd(this,v,"smooth",v.smooth,o);continue}if("force3D"===c){v[c]=o;continue}if("transform"===c){ve(this,o,t);continue}}else c in x||(c=dr(c)||c);if(m||(u||0===u)&&(h||0===h)&&!ur.test(o)&&c in x)u=u||0,(d=(s+"").substr((h+"").length))!==(p=Ya(o)||(c in j.units?j.units[c]:d))&&(h=Zd(t,c,s,p)),this._pt=new pe(this._pt,m?v:x,c,h,(_?ka(h,_+u):u)-h,m||"px"!==p&&"zIndex"!==c||!1===e.autoRound?td:wd),this._pt.u=p||0,d!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=vd);else if(c in x)_d.call(this,t,c,s,_?_+o:o);else if(c in t)this.add(t,c,s||t[c],_?_+o:o,n,a);else if("parseTransform"!==c){Q(c,o);continue}m||(c in x?b.push(c,0,x[c]):b.push(c,1,s||t[c])),w.push(c)}T&&de(this)},render:function render(t,e){if(e.tween._time||!Fe())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:mr,aliases:hr,getSetter:function getSetter(t,e,r){var i=hr[e];return i&&i.indexOf(",")<0&&(e=i),e in rr&&e!==fr&&(t._gsap.x||mr(t,"x"))?r&&ze===r?"scale"===e?Cd:Bd:(ze=r||{})&&("scale"===e?Dd:Ed):t.style&&!u(t.style[e])?zd:~e.indexOf("-")?Ad:re(t,e)},core:{_removeProperty:Vd,_getMatrix:ie}};Ce.utils.checkPrefix=dr,Ce.core.getStyleSaver=Kd,Rr=ha((Ar="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Sr="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",function(t){rr[t]=1}),ha(Sr,function(t){j.units[t]="deg",Tr[t]=1}),hr[Rr[13]]=Ar+","+Sr,ha("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",function(t){var e=t.split(":");hr[e[1]]=Rr[e[0]]}),ha("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",function(t){j.units[t]="px"}),Ce.registerPlugin(Dr);var Er=Ce.registerPlugin(Dr)||Ce,zr=Er.core.Tween;e.Back=Ze,e.Bounce=Je,e.CSSPlugin=Dr,e.Circ=er,e.Cubic=We,e.Elastic=Ke,e.Expo=tr,e.Linear=Ue,e.Power0=Be,e.Power1=Le,e.Power2=Ye,e.Power3=Ne,e.Power4=qe,e.Quad=Ve,e.Quart=Xe,e.Quint=He,e.Sine=$e,e.SteppedEase=Ge,e.Strong=Qe,e.TimelineLite=Ut,e.TimelineMax=Ut,e.TweenLite=Gt,e.TweenMax=zr,e.default=Er,e.gsap=Er;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});
11 | 
12 | 


--------------------------------------------------------------------------------
/example/js/imagesloaded.pkgd.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * imagesLoaded PACKAGED v4.1.4
3 |  * JavaScript is all like "You images are done yet or what?"
4 |  * MIT License
5 |  */
6 | 
7 | !function(e,t){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",t):"object"==typeof module&&module.exports?module.exports=t():e.EvEmitter=t()}("undefined"!=typeof window?window:this,function(){function e(){}var t=e.prototype;return t.on=function(e,t){if(e&&t){var i=this._events=this._events||{},n=i[e]=i[e]||[];return n.indexOf(t)==-1&&n.push(t),this}},t.once=function(e,t){if(e&&t){this.on(e,t);var i=this._onceEvents=this._onceEvents||{},n=i[e]=i[e]||{};return n[t]=!0,this}},t.off=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){var n=i.indexOf(t);return n!=-1&&i.splice(n,1),this}},t.emitEvent=function(e,t){var i=this._events&&this._events[e];if(i&&i.length){i=i.slice(0),t=t||[];for(var n=this._onceEvents&&this._onceEvents[e],o=0;o<i.length;o++){var r=i[o],s=n&&n[r];s&&(this.off(e,r),delete n[r]),r.apply(this,t)}return this}},t.allOff=function(){delete this._events,delete this._onceEvents},e}),function(e,t){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return t(e,i)}):"object"==typeof module&&module.exports?module.exports=t(e,require("ev-emitter")):e.imagesLoaded=t(e,e.EvEmitter)}("undefined"!=typeof window?window:this,function(e,t){function i(e,t){for(var i in t)e[i]=t[i];return e}function n(e){if(Array.isArray(e))return e;var t="object"==typeof e&&"number"==typeof e.length;return t?d.call(e):[e]}function o(e,t,r){if(!(this instanceof o))return new o(e,t,r);var s=e;return"string"==typeof e&&(s=document.querySelectorAll(e)),s?(this.elements=n(s),this.options=i({},this.options),"function"==typeof t?r=t:i(this.options,t),r&&this.on("always",r),this.getImages(),h&&(this.jqDeferred=new h.Deferred),void setTimeout(this.check.bind(this))):void a.error("Bad element for imagesLoaded "+(s||e))}function r(e){this.img=e}function s(e,t){this.url=e,this.element=t,this.img=new Image}var h=e.jQuery,a=e.console,d=Array.prototype.slice;o.prototype=Object.create(t.prototype),o.prototype.options={},o.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},o.prototype.addElementImages=function(e){"IMG"==e.nodeName&&this.addImage(e),this.options.background===!0&&this.addElementBackgroundImages(e);var t=e.nodeType;if(t&&u[t]){for(var i=e.querySelectorAll("img"),n=0;n<i.length;n++){var o=i[n];this.addImage(o)}if("string"==typeof this.options.background){var r=e.querySelectorAll(this.options.background);for(n=0;n<r.length;n++){var s=r[n];this.addElementBackgroundImages(s)}}}};var u={1:!0,9:!0,11:!0};return o.prototype.addElementBackgroundImages=function(e){var t=getComputedStyle(e);if(t)for(var i=/url\((['"])?(.*?)\1\)/gi,n=i.exec(t.backgroundImage);null!==n;){var o=n&&n[2];o&&this.addBackground(o,e),n=i.exec(t.backgroundImage)}},o.prototype.addImage=function(e){var t=new r(e);this.images.push(t)},o.prototype.addBackground=function(e,t){var i=new s(e,t);this.images.push(i)},o.prototype.check=function(){function e(e,i,n){setTimeout(function(){t.progress(e,i,n)})}var t=this;return this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?void this.images.forEach(function(t){t.once("progress",e),t.check()}):void this.complete()},o.prototype.progress=function(e,t,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded,this.emitEvent("progress",[this,e,t]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,e),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&a&&a.log("progress: "+i,e,t)},o.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(e,[this]),this.emitEvent("always",[this]),this.jqDeferred){var t=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[t](this)}},r.prototype=Object.create(t.prototype),r.prototype.check=function(){var e=this.getIsImageComplete();return e?void this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),void(this.proxyImage.src=this.img.src))},r.prototype.getIsImageComplete=function(){return this.img.complete&&this.img.naturalWidth},r.prototype.confirm=function(e,t){this.isLoaded=e,this.emitEvent("progress",[this,this.img,t])},r.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},r.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},r.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},r.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype=Object.create(r.prototype),s.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url;var e=this.getIsImageComplete();e&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},s.prototype.unbindEvents=function(){this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype.confirm=function(e,t){this.isLoaded=e,this.emitEvent("progress",[this,this.element,t])},o.makeJQueryPlugin=function(t){t=t||e.jQuery,t&&(h=t,h.fn.imagesLoaded=function(e,t){var i=new o(this,e,t);return i.jqDeferred.promise(h(this))})},o.makeJQueryPlugin(),o});


--------------------------------------------------------------------------------
/gifs/1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/gifs/1.gif


--------------------------------------------------------------------------------
/gifs/2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/gifs/2.gif


--------------------------------------------------------------------------------
/gifs/alex_brown.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/gifs/alex_brown.gif


--------------------------------------------------------------------------------
/images/balloon.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/balloon.jpg


--------------------------------------------------------------------------------
/images/balloon2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/balloon2.jpg


--------------------------------------------------------------------------------
/images/dot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/dot.jpg


--------------------------------------------------------------------------------
/images/fluid.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/fluid.jpg


--------------------------------------------------------------------------------
/images/heightMap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/heightMap.png


--------------------------------------------------------------------------------
/images/hover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/hover.jpg


--------------------------------------------------------------------------------
/images/ice.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/ice.jpg


--------------------------------------------------------------------------------
/images/ice2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/ice2.jpg


--------------------------------------------------------------------------------
/images/ny-info.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/ny-info.jpg


--------------------------------------------------------------------------------
/images/ny.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/ny.jpg


--------------------------------------------------------------------------------
/images/ramen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/ramen.jpg


--------------------------------------------------------------------------------
/images/rect.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/rect.png


--------------------------------------------------------------------------------
/images/strip.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/strip.png


--------------------------------------------------------------------------------
/images/stripe1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/stripe1.png


--------------------------------------------------------------------------------
/images/stripe1mul.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/stripe1mul.png


--------------------------------------------------------------------------------
/images/submit.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/submit.jpg


--------------------------------------------------------------------------------
/images/submit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/images/submit.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <title>title</title>
  6 |     <style>
  7 |       body {
  8 |         margin: 10px;
  9 |         background: white;
 10 |       }
 11 | 
 12 |       .demo {
 13 |         width: 40vw;
 14 |         height: 40vh;
 15 |         margin: 10px auto;
 16 |         position: relative;
 17 |       }
 18 | 
 19 |       .div5 {
 20 |         width: 50vw;
 21 |         height: 256px;
 22 |       }
 23 | 
 24 |       .div4 {
 25 |         background: black;
 26 |       }
 27 | 
 28 |       .div4 span {
 29 |         position: absolute;
 30 |         color: rgba(255, 255, 255, 1);
 31 |         font-size: 14px;
 32 |         font-family: sans-serif;
 33 |         font-weight: bold;
 34 |         letter-spacing: 4px;
 35 |         top: 50%;
 36 |         left: 50%;
 37 |         transform: translate(-50%, -50%);
 38 |         transition: color 0.6s ease;
 39 |       }
 40 | 
 41 |       .div4:hover span {
 42 |         transition: color 0.6s ease;
 43 |         color: rgba(255, 255, 255, 0.6);
 44 |       }
 45 | 
 46 |       .balloon-ctr {
 47 |         text-align: center;
 48 |       }
 49 | 
 50 |       .demos-ctr .demo {
 51 |         display: inline-block;
 52 |       }
 53 | 
 54 |       .control {
 55 |         margin: 0px 20px;
 56 |       }
 57 |     </style>
 58 |     <script src="example/js/three.min.js"></script>
 59 |     <script src="example/js/gsap.min.js"></script>
 60 |     <script src="dist/hover-effect.umd.js"></script>
 61 |   </head>
 62 |   <body>
 63 |     <div class="balloon-ctr">
 64 |       <div class="div5 demo"></div>
 65 |       <button class="previous control">PREVIOUS</button>
 66 |       <button class="next control">NEXT</button>
 67 |     </div>
 68 |     <div class="demos-ctr">
 69 |       <div class="div-video demo"></div>
 70 |       <div class="div demo"></div>
 71 |       <div class="div2 demo"></div>
 72 |       <div class="div3 demo"></div>
 73 |       <div class="div4 demo">
 74 |         <span>MY BUTTON</span>
 75 |       </div>
 76 |       <div class="div6 demo"></div>
 77 |     </div>
 78 |     <script>
 79 |       var button = new hoverEffect({
 80 |         parent: document.querySelector(".div-video"),
 81 |         image1: "videos/video.mp4",
 82 |         image2: "videos/video2.mp4",
 83 |         displacementImage: "images/fluid.jpg",
 84 |         video: true
 85 |       });
 86 | 
 87 |       var button = new hoverEffect({
 88 |         parent: document.querySelector(".div"),
 89 |         intensity1: 0.1,
 90 |         intensity2: 0.1,
 91 |         angle2: Math.PI / 2,
 92 |         image1: "images/ny.jpg",
 93 |         image2: "images/ny-info.jpg",
 94 |         imagesRatio: 512 / 512,
 95 |         displacementImage: "images/stripe1mul.png"
 96 |       });
 97 | 
 98 |       var button2 = new hoverEffect({
 99 |         parent: document.querySelector(".div2"),
100 |         intensity1: 0.25,
101 |         intensity2: 0.25,
102 |         angle1: Math.PI / 2,
103 |         angle2: -Math.PI / 2,
104 |         image1: "images/ice.jpg",
105 |         image2: "images/ice2.jpg",
106 |         displacementImage: "images/ramen.jpg"
107 |       });
108 | 
109 |       var button3 = new hoverEffect({
110 |         parent: document.querySelector(".div3"),
111 |         intensity: 0.3,
112 |         image1: "images/hover.jpg",
113 |         image2: "images/hover.jpg",
114 |         displacementImage: "images/fluid.jpg",
115 |         speedIn: 1.0,
116 |         speedOut: 1.0
117 |       });
118 | 
119 |       var button4 = new hoverEffect({
120 |         parent: document.querySelector(".div4"),
121 |         intensity: 0.1,
122 |         image1: "images/rect.png",
123 |         image2: "images/rect.png",
124 |         displacementImage: "images/strip.png"
125 |       });
126 | 
127 |       var button5 = new hoverEffect({
128 |         parent: document.querySelector(".div5"),
129 |         intensity: 0.2,
130 |         imagesRatio: 512 / 768,
131 |         image1: "images/balloon.jpg",
132 |         image2: "images/balloon2.jpg",
133 |         displacementImage: "images/dot.jpg",
134 |         hover: false
135 |       });
136 |       document.querySelector(".next").addEventListener("click", button5.next);
137 |       document
138 |         .querySelector(".previous")
139 |         .addEventListener("click", button5.previous);
140 | 
141 |       var button6 = new hoverEffect({
142 |         parent: document.querySelector(".div6"),
143 |         intensity: 0.2,
144 |         image1: "images/submit.png",
145 |         image2: "images/submit.png",
146 |         displacementImage: "images/heightMap.png"
147 |       });
148 |     </script>
149 |   </body>
150 | </html>
151 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hover-effect",
 3 |   "version": "1.2.0",
 4 |   "source": "src/hover-effect.js",
 5 |   "module": "dist/hover-effect.es.js",
 6 |   "main": "dist/hover-effect.js",
 7 |   "umd:main": "dist/hover-effect.umd.js",
 8 |   "devDependencies": {
 9 |     "microbundle": "^0.15.1",
10 |     "prettier": "^2.8.4",
11 |     "uglify-es": "^3.3.9"
12 |   },
13 |   "scripts": {
14 |     "build": "microbundle build --globals three=THREE,gsap=gsap",
15 |     "watch": "microbundle watch --globals three=THREE,gsap=gsap",
16 |     "publish": "npm publish --access public",
17 |     "minify": "uglifyjs --mangle --compress -- js/hover.js > js/hover.min.js",
18 |     "prettify": "prettier --trailing-comma=es5 --single-quote --print-width=120 --write ./js/hover.js"
19 |   },
20 |   "files": [
21 |     "dist"
22 |   ],
23 |   "dependencies": {
24 |     "gsap": "^3.11.4",
25 |     "three": "^0.149.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
  1 | # Hover effect
  2 | 
  3 | Javascript library to draw and animate images on hover.
  4 | 
  5 | [![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=ZGDNS5D28SFWQ)
  6 | 
  7 | [**DEMO**](https://tympanus.net/Development/DistortionHoverEffect/)
  8 | 
  9 | [**ARTICLE**](https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/)
 10 | 
 11 | ## Example
 12 | <p align="center">
 13 |     <img alt="example 1" src="https://github.com/robin-dela/hover-effect/blob/master/gifs/1.gif?raw=true" width="256">
 14 |     <img alt="example 2" src="https://github.com/robin-dela/hover-effect/blob/master/gifs/2.gif?raw=true" width="256">
 15 | </p>
 16 | 
 17 | ## Use locally
 18 | To load the images you'll need to view the demo via a web server, simply go to the demo's folder location and type `python -m SimpleHTTPServer 8000` in your terminal. Then access the demo in your browser by typing: `localhost:8000`
 19 | 
 20 | ## Basic usage
 21 | 
 22 | This helper needs [Three.js](https://threejs.org) and [gsap](https://greensock.com/) to do the transition, so you need to include it before this little helper.
 23 | 
 24 | Then you only need a `div` element in HTML to start animating things with a piece of code like this:
 25 | 
 26 | ```html
 27 | <!-- Div to draw the effect -->
 28 | <div class="my-div"></div>
 29 | 
 30 | <!-- library needed -->
 31 | <script src="three.min.js"></script>
 32 | <script src="gsap.min.js"></script>
 33 | 
 34 | <script src="dist/hover.umd.js"></script>
 35 | <script>
 36 |     var myAnimation = new hoverEffect({
 37 |         parent: document.querySelector('.my-div'),
 38 |         intensity: 0.3,
 39 |         image1: 'images/myImage1.jpg',
 40 |         image2: 'images/myImage2.jpg',
 41 |         displacementImage: 'images/myDistorsionImage.png'
 42 |     });
 43 | </script>
 44 | ```
 45 | 
 46 | ## Node JS usage
 47 | 
 48 | This helper can also be used in node js environments. Three.js and TweenMax scripts are included as dependencies in the package so you don't need to manually include them.
 49 | 
 50 | ### Install
 51 | 
 52 | ```
 53 | npm install hover-effect
 54 | ```
 55 | 
 56 | ### Import
 57 | 
 58 | ```js
 59 | import hoverEffect from 'hover-effect'
 60 | ```
 61 | 
 62 | ### Init
 63 | 
 64 | Initialize just as you would in the basic usage example above.
 65 | 
 66 | ## Options
 67 | 
 68 | ### Mandatory parameters
 69 | 
 70 | | Name                    | Type            | Default         | Description |
 71 | |-------------------------|-----------------|-----------------|-------------|
 72 | |`parent`                 | `Dom element`   | `null`          | The DOM element where the animation will be injected. The images of the animation will take the parent's size. |
 73 | |`image1`                 | `Image`         | `null`          | The first `Image` of the animation. |
 74 | |`image2`                 | `Image`         | `null`          | The second `Image` of the animation. |
 75 | |`displacementImage`      | `Image`         | `null`          | The `Image` used to do the transition between the 2 main images. |
 76 | 
 77 | ### Optional parameters
 78 | 
 79 | | Name                    | Type      | Default         | Description |
 80 | |-------------------------|-----------|-----------------|-------------|
 81 | |`intensity`              | `Float`   | `1`             | Used to determine the intensity of the distortion effect. 0 is no effect and 1 is full distortion. |
 82 | |`intensity1`             | `Float`   | `intensity`     | Overrides the distortion intensity of the first image. |
 83 | |`intensity2`             | `Float`   | `intensity`     | Overrides the distortion intensity of the second image. |
 84 | |`angle`                  | `Float`   | `Math.PI / 4`   | Angle of the distortion effect in Radians. Defaults to Pi / 4 (45 degrees). |
 85 | |`angle1`                 | `Float`   | `angle`         | Overrides the distortion angle for the first image. |
 86 | |`angle2`                 | `Float`   | `-angle * 3`    | Overrides the distortion angle for the second image. |
 87 | |`speedIn`                | `Float`   | `1.6`           | Speed of the inbound animation (in seconds). |
 88 | |`speedOut`               | `Float`   | `1.2`           | Speed of the outbound animation (in seconds). |
 89 | |`hover`                  | `Boolean` | `true`          | if set to false the animation will not be triggered on hover (see `next` and `previous` function to interact) |
 90 | |`easing`                 | `String`  | `Expo.easeOut`  | Easing of the transition, see [greensock easing](https://greensock.com/ease-visualizer)|
 91 | |`video`                  | `Boolean` | `false`         | Defines if you want to use videos instead of images (note: you need 2 videos, it doesn't work with one image and one video.) |
 92 | |`imagesRatio`            | `Float`   | `1`             | Specify a value if you want a `background: cover` type of behaviour, otherwise it will apply a square aspect ratio. usage: `image height / image width` example: `1080 / 1920` |
 93 | 
 94 | ### Methods
 95 | 
 96 | | Name                    | Description             |
 97 | |-------------------------|-------------------------|
 98 | |`next`                   | Transition to the second image. |
 99 | |`previous`               | Transition to the first image. |
100 | 
101 | ## Credits
102 | Thanks to :
103 | - [Codrops](https://twitter.com/crnacura) for the creation of the example
104 | - [Aarni Koskela](https://github.com/akx/) for the improvements
105 | - [Celso White](https://github.com/celsowhite) for the multiple module formats
106 | 
107 | ## Made with it
108 | <p align="center">
109 |     <img alt="Alex Brown demo" src="https://github.com/robin-dela/hover-effect/blob/master/gifs/alex_brown.gif?raw=true" width="512">
110 | </p>
111 | 
112 | - [Codepen demo](https://codepen.io/alxrbrown/pen/GxVQLr) and [Medium article](https://medium.com/@alxrbrown/create-a-distortion-hover-effect-using-webgl-32fc1ab50d24) by Alex Brown
113 | - [https://stimmt.digital/en/](https://stimmt.digital/en/)
114 | - [https://www.fabiofantolino.com/en](https://www.fabiofantolino.com/en)
115 | - [Youtube tutorial](https://www.youtube.com/watch?v=o0zlX1E7l0A)
116 | - [https://www.youtube.com/watch?v=9kcOQdJHyIo](https://www.youtube.com/watch?v=9kcOQdJHyIo)
117 | - [https://www.estudionk.com/en](https://www.estudionk.com/en)
118 | - [https://github.com/AlbanCrepel/vue-displacement-slideshow](https://github.com/AlbanCrepel/vue-displacement-slideshow)
119 | - [https://digitalpresent.io/about](https://digitalpresent.io/about)
120 | - [https://www.couleecreative.com/](https://www.couleecreative.com/)
121 | - [https://two.zero.nyc/](https://two.zero.nyc/)
122 | - [https://www.danilodemarco.com/](https://www.danilodemarco.com/)
123 | - [https://lsce.com/](https://lsce.com/)
124 | - [http://vadimtyurin.com/](http://vadimtyurin.com/)
125 | 


--------------------------------------------------------------------------------
/src/hover-effect.js:
--------------------------------------------------------------------------------
  1 | import * as THREE from "three";
  2 | import gsap from "gsap";
  3 | 
  4 | export default function(opts) {
  5 |   var vertex = `
  6 | varying vec2 vUv;
  7 | void main() {
  8 |   vUv = uv;
  9 |   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 10 | }
 11 | `;
 12 | 
 13 |   var fragment = `
 14 | varying vec2 vUv;
 15 | 
 16 | uniform float dispFactor;
 17 | uniform float dpr;
 18 | uniform sampler2D disp;
 19 | 
 20 | uniform sampler2D texture1;
 21 | uniform sampler2D texture2;
 22 | uniform float angle1;
 23 | uniform float angle2;
 24 | uniform float intensity1;
 25 | uniform float intensity2;
 26 | uniform vec4 res;
 27 | uniform vec2 parent;
 28 | 
 29 | mat2 getRotM(float angle) {
 30 |   float s = sin(angle);
 31 |   float c = cos(angle);
 32 |   return mat2(c, -s, s, c);
 33 | }
 34 | 
 35 | void main() {
 36 |   vec4 disp = texture2D(disp, vUv);
 37 |   vec2 dispVec = vec2(disp.r, disp.g);
 38 | 
 39 |   vec2 uv = 0.5 * gl_FragCoord.xy / (res.xy) ;
 40 |   vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);
 41 | 
 42 | 
 43 |   vec2 distortedPosition1 = myUV + getRotM(angle1) * dispVec * intensity1 * dispFactor;
 44 |   vec2 distortedPosition2 = myUV + getRotM(angle2) * dispVec * intensity2 * (1.0 - dispFactor);
 45 |   vec4 _texture1 = texture2D(texture1, distortedPosition1);
 46 |   vec4 _texture2 = texture2D(texture2, distortedPosition2);
 47 |   gl_FragColor = mix(_texture1, _texture2, dispFactor);
 48 | }
 49 | `;
 50 | 
 51 |   // please respect authorship and do not remove
 52 |   console.log(
 53 |     "%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect ",
 54 |     "color: #bada55; font-size: 0.8rem"
 55 |   );
 56 | 
 57 |   function firstDefined() {
 58 |     for (var i = 0; i < arguments.length; i++) {
 59 |       if (arguments[i] !== undefined) return arguments[i];
 60 |     }
 61 |   }
 62 | 
 63 |   var parent = opts.parent;
 64 |   var dispImage = opts.displacementImage;
 65 |   var image1 = opts.image1;
 66 |   var image2 = opts.image2;
 67 |   var imagesRatio = firstDefined(opts.imagesRatio, 1.0);
 68 |   var intensity1 = firstDefined(opts.intensity1, opts.intensity, 1);
 69 |   var intensity2 = firstDefined(opts.intensity2, opts.intensity, 1);
 70 |   var commonAngle = firstDefined(opts.angle, Math.PI / 4); // 45 degrees by default, so grayscale images work correctly
 71 |   var angle1 = firstDefined(opts.angle1, commonAngle);
 72 |   var angle2 = firstDefined(opts.angle2, -commonAngle * 3);
 73 |   var speedIn = firstDefined(opts.speedIn, opts.speed, 1.6);
 74 |   var speedOut = firstDefined(opts.speedOut, opts.speed, 1.2);
 75 |   var userHover = firstDefined(opts.hover, true);
 76 |   var easing = firstDefined(opts.easing, "expo.out");
 77 |   var video = firstDefined(opts.video, false);
 78 | 
 79 |   if (!parent) {
 80 |     console.warn("Parent missing");
 81 |     return;
 82 |   }
 83 | 
 84 |   if (!(image1 && image2 && dispImage)) {
 85 |     console.warn("One or more images are missing");
 86 |     return;
 87 |   }
 88 | 
 89 |   var scene = new THREE.Scene();
 90 |   var camera = new THREE.OrthographicCamera(
 91 |     parent.offsetWidth / -2,
 92 |     parent.offsetWidth / 2,
 93 |     parent.offsetHeight / 2,
 94 |     parent.offsetHeight / -2,
 95 |     1,
 96 |     1000
 97 |   );
 98 | 
 99 |   camera.position.z = 1;
100 | 
101 |   var renderer = new THREE.WebGLRenderer({
102 |     antialias: false,
103 |     alpha: true
104 |   });
105 | 
106 |   renderer.setPixelRatio(2.0);
107 |   renderer.setClearColor(0xffffff, 0.0);
108 |   renderer.setSize(parent.offsetWidth, parent.offsetHeight);
109 |   parent.appendChild(renderer.domElement);
110 | 
111 |   var render = function() {
112 |     // This will be called by the TextureLoader as well as Gsap.
113 |     renderer.render(scene, camera);
114 |   };
115 | 
116 |   var loader = new THREE.TextureLoader();
117 |   loader.crossOrigin = "";
118 | 
119 |   var disp = loader.load(dispImage, render);
120 |   disp.magFilter = disp.minFilter = THREE.LinearFilter;
121 | 
122 |   if (video) {
123 |     var animate = function() {
124 |       requestAnimationFrame(animate);
125 | 
126 |       renderer.render(scene, camera);
127 |     };
128 |     animate();
129 | 
130 |     var video = document.createElement("video");
131 |     video.autoplay = true;
132 |     video.loop = true;
133 |     video.muted = true;
134 |     video.src = image1;
135 |     video.load();
136 | 
137 |     var video2 = document.createElement("video");
138 |     video2.autoplay = true;
139 |     video2.loop = true;
140 |     video2.muted = true;
141 |     video2.src = image2;
142 |     video2.load();
143 | 
144 |     var texture1 = new THREE.VideoTexture(video);
145 |     var texture2 = new THREE.VideoTexture(video2);
146 |     texture1.magFilter = texture2.magFilter = THREE.LinearFilter;
147 |     texture1.minFilter = texture2.minFilter = THREE.LinearFilter;
148 | 
149 |     video2.addEventListener(
150 |       "loadeddata",
151 |       function() {
152 |         video2.play();
153 | 
154 |         texture2 = new THREE.VideoTexture(video2);
155 |         texture2.magFilter = THREE.LinearFilter;
156 |         texture2.minFilter = THREE.LinearFilter;
157 | 
158 |         mat.uniforms.texture2.value = texture2;
159 |       },
160 |       false
161 |     );
162 | 
163 |     video.addEventListener(
164 |       "loadeddata",
165 |       function() {
166 |         video.play();
167 | 
168 |         texture1 = new THREE.VideoTexture(video);
169 | 
170 |         texture1.magFilter = THREE.LinearFilter;
171 |         texture1.minFilter = THREE.LinearFilter;
172 | 
173 |         mat.uniforms.texture1.value = texture1;
174 |       },
175 |       false
176 |     );
177 |   } else {
178 |     var texture1 = loader.load(image1, render);
179 |     var texture2 = loader.load(image2, render);
180 | 
181 |     texture1.magFilter = texture2.magFilter = THREE.LinearFilter;
182 |     texture1.minFilter = texture2.minFilter = THREE.LinearFilter;
183 |   }
184 | 
185 |   let a1, a2;
186 |   var imageAspect = imagesRatio;
187 |   if (parent.offsetHeight / parent.offsetWidth < imageAspect) {
188 |     a1 = 1;
189 |     a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;
190 |   } else {
191 |     a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;
192 |     a2 = 1;
193 |   }
194 | 
195 |   var mat = new THREE.ShaderMaterial({
196 |     uniforms: {
197 |       intensity1: {
198 |         type: "f",
199 |         value: intensity1
200 |       },
201 |       intensity2: {
202 |         type: "f",
203 |         value: intensity2
204 |       },
205 |       dispFactor: {
206 |         type: "f",
207 |         value: 0.0
208 |       },
209 |       angle1: {
210 |         type: "f",
211 |         value: angle1
212 |       },
213 |       angle2: {
214 |         type: "f",
215 |         value: angle2
216 |       },
217 |       texture1: {
218 |         type: "t",
219 |         value: texture1
220 |       },
221 |       texture2: {
222 |         type: "t",
223 |         value: texture2
224 |       },
225 |       disp: {
226 |         type: "t",
227 |         value: disp
228 |       },
229 |       res: {
230 |         type: "vec4",
231 |         value: new THREE.Vector4(
232 |           parent.offsetWidth,
233 |           parent.offsetHeight,
234 |           a1,
235 |           a2
236 |         )
237 |       },
238 |       dpr: {
239 |         type: "f",
240 |         value: window.devicePixelRatio
241 |       }
242 |     },
243 | 
244 |     vertexShader: vertex,
245 |     fragmentShader: fragment,
246 |     transparent: true,
247 |     opacity: 1.0
248 |   });
249 | 
250 |   var geometry = new THREE.PlaneGeometry(
251 |     parent.offsetWidth,
252 |     parent.offsetHeight,
253 |     1
254 |   );
255 |   var object = new THREE.Mesh(geometry, mat);
256 |   scene.add(object);
257 | 
258 |   function transitionIn() {
259 |     gsap.to(mat.uniforms.dispFactor, {
260 |       duration: speedIn,
261 |       value: 1,
262 |       ease: easing,
263 |       onUpdate: render,
264 |       onComplete: render
265 |     });
266 |   }
267 | 
268 |   function transitionOut() {
269 |     gsap.to(mat.uniforms.dispFactor, {
270 |       duration: speedOut,
271 |       value: 0,
272 |       ease: easing,
273 |       onUpdate: render,
274 |       onComplete: render
275 |     });
276 |   }
277 | 
278 |   if (userHover) {
279 |     parent.addEventListener("mouseenter", transitionIn);
280 |     parent.addEventListener("touchstart", transitionIn);
281 |     parent.addEventListener("mouseleave", transitionOut);
282 |     parent.addEventListener("touchend", transitionOut);
283 |   }
284 | 
285 |   window.addEventListener("resize", function(e) {
286 |     if (parent.offsetHeight / parent.offsetWidth < imageAspect) {
287 |       a1 = 1;
288 |       a2 = parent.offsetHeight / parent.offsetWidth / imageAspect;
289 |     } else {
290 |       a1 = (parent.offsetWidth / parent.offsetHeight) * imageAspect;
291 |       a2 = 1;
292 |     }
293 |     object.material.uniforms.res.value = new THREE.Vector4(
294 |       parent.offsetWidth,
295 |       parent.offsetHeight,
296 |       a1,
297 |       a2
298 |     );
299 |     renderer.setSize(parent.offsetWidth, parent.offsetHeight);
300 | 
301 |     render();
302 |   });
303 | 
304 |   this.next = transitionIn;
305 |   this.previous = transitionOut;
306 | }
307 | 


--------------------------------------------------------------------------------
/videos/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/videos/.DS_Store


--------------------------------------------------------------------------------
/videos/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/videos/video.mp4


--------------------------------------------------------------------------------
/videos/video2.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/robin-dela/hover-effect/1938cbff22a0379c5c5f17355550961374e7754c/videos/video2.mp4


--------------------------------------------------------------------------------