├── 14.jpg
├── 3.jpg
├── 4.png
├── 6.jpg
├── 7.jpg
├── 8.jpg
├── 9.jpg
├── hover-effect.umd.js
├── img_one.jpg
├── img_two.jpg
├── index.html
└── style.css


/14.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Image-Hover-Liquid-Distortion-Effect-ThreeJS-TweenMax/0d83388ee1e6a412ebacd91edf31dc34cf4ef687/14.jpg


--------------------------------------------------------------------------------
/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Image-Hover-Liquid-Distortion-Effect-ThreeJS-TweenMax/0d83388ee1e6a412ebacd91edf31dc34cf4ef687/3.jpg


--------------------------------------------------------------------------------
/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Image-Hover-Liquid-Distortion-Effect-ThreeJS-TweenMax/0d83388ee1e6a412ebacd91edf31dc34cf4ef687/4.png


--------------------------------------------------------------------------------
/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Image-Hover-Liquid-Distortion-Effect-ThreeJS-TweenMax/0d83388ee1e6a412ebacd91edf31dc34cf4ef687/6.jpg


--------------------------------------------------------------------------------
/7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Image-Hover-Liquid-Distortion-Effect-ThreeJS-TweenMax/0d83388ee1e6a412ebacd91edf31dc34cf4ef687/7.jpg


--------------------------------------------------------------------------------
/8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Image-Hover-Liquid-Distortion-Effect-ThreeJS-TweenMax/0d83388ee1e6a412ebacd91edf31dc34cf4ef687/8.jpg


--------------------------------------------------------------------------------
/9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Image-Hover-Liquid-Distortion-Effect-ThreeJS-TweenMax/0d83388ee1e6a412ebacd91edf31dc34cf4ef687/9.jpg


--------------------------------------------------------------------------------
/hover-effect.umd.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("three"),require("gsap/TweenMax")):"function"==typeof define&&define.amd?define(["three","gsap/TweenMax"],t):e.hoverEffect=t(e.THREE,e.TweenMax)}(this,function(e,t){return t=t&&t.hasOwnProperty("default")?t.default:t,function(n){function i(){for(var e=arguments,t=0;t<arguments.length;t++)if(void 0!==e[t])return e[t]}console.log("%c Hover effect by Robin Delaporte: https://github.com/robin-dela/hover-effect ","color: #bada55; font-size: 0.8rem");var r=n.parent,o=n.displacementImage,a=n.image1,s=n.image2,f=i(n.imagesRatio,1),d=i(n.intensity1,n.intensity,1),l=i(n.intensity2,n.intensity,1),u=i(n.angle,Math.PI/4),v=i(n.angle1,u),m=i(n.angle2,3*-u),c=i(n.speedIn,n.speed,1.6),p=i(n.speedOut,n.speed,1.2),g=i(n.hover,!0),h=i(n.easing,Expo.easeOut),y=i(n.video,!1);if(r)if(a&&s&&o){var x=new e.Scene,F=new e.OrthographicCamera(r.offsetWidth/-2,r.offsetWidth/2,r.offsetHeight/2,r.offsetHeight/-2,1,1e3);F.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(x,F)},H=new e.TextureLoader;H.crossOrigin="";var E,W,V=H.load(o,L);if(V.magFilter=V.minFilter=e.LinearFilter,y){var M=function(){requestAnimationFrame(M),w.render(x,F)};M(),(y=document.createElement("video")).autoplay=!0,y.loop=!0,y.src=a,y.load();var P=document.createElement("video");P.autoplay=!0,P.loop=!0,P.src=s,P.load();var R=new e.VideoTexture(y),T=new e.VideoTexture(P);R.magFilter=T.magFilter=e.LinearFilter,R.minFilter=T.minFilter=e.LinearFilter,P.addEventListener("loadeddata",function(){P.play(),(T=new e.VideoTexture(P)).magFilter=e.LinearFilter,T.minFilter=e.LinearFilter,C.uniforms.texture2.value=T},!1),y.addEventListener("loadeddata",function(){y.play(),(R=new e.VideoTexture(y)).magFilter=e.LinearFilter,R.minFilter=e.LinearFilter,C.uniforms.texture1.value=R},!1)}else R=H.load(a,L),T=H.load(s,L),R.magFilter=T.magFilter=e.LinearFilter,R.minFilter=T.minFilter=e.LinearFilter;var U=f;r.offsetHeight/r.offsetWidth<U?(E=1,W=r.offsetHeight/r.offsetWidth/U):(E=r.offsetWidth/r.offsetHeight*U,W=1);var C=new e.ShaderMaterial({uniforms:{intensity1:{type:"f",value:d},intensity2:{type:"f",value:l},dispFactor:{type:"f",value:0},angle1:{type:"f",value:v},angle2:{type:"f",value:m},texture1:{type:"t",value:R},texture2:{type:"t",value:T},disp:{type:"t",value:V},res:{type:"vec4",value:new e.Vector4(r.offsetWidth,r.offsetHeight,E,W)},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}),b=new e.PlaneBufferGeometry(r.offsetWidth,r.offsetHeight,1),D=new e.Mesh(b,C);x.add(D),g&&(r.addEventListener("mouseenter",_),r.addEventListener("touchstart",_),r.addEventListener("mouseleave",z),r.addEventListener("touchend",z)),window.addEventListener("resize",function(t){r.offsetHeight/r.offsetWidth<U?(E=1,W=r.offsetHeight/r.offsetWidth/U):(E=r.offsetWidth/r.offsetHeight*U,W=1),D.material.uniforms.res.value=new e.Vector4(r.offsetWidth,r.offsetHeight,E,W),w.setSize(r.offsetWidth,r.offsetHeight),L()}),this.next=_,this.previous=z}else console.warn("One or more images are missing");else console.warn("Parent missing");function _(){t.to(C.uniforms.dispFactor,c,{value:1,ease:h,onUpdate:L,onComplete:L})}function z(){t.to(C.uniforms.dispFactor,p,{value:0,ease:h,onUpdate:L,onComplete:L})}}});
2 | //# sourceMappingURL=hover-effect.umd.js.map
3 | 


--------------------------------------------------------------------------------
/img_one.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Image-Hover-Liquid-Distortion-Effect-ThreeJS-TweenMax/0d83388ee1e6a412ebacd91edf31dc34cf4ef687/img_one.jpg


--------------------------------------------------------------------------------
/img_two.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codegridweb/Image-Hover-Liquid-Distortion-Effect-ThreeJS-TweenMax/0d83388ee1e6a412ebacd91edf31dc34cf4ef687/img_two.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |       <meta charset="UTF-8">
 5 |       <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |       <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |       <title>Hover Distortion Effect</title>
 8 |       <link rel="stylesheet" href="style.css">
 9 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
10 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
11 | </head>
12 | <body>
13 | 
14 |       <div class="wrapper"></div>
15 |       <div class="hero-title"><h1>OFFBEAT</h1></div>
16 | 
17 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
18 |       <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
19 |       <script src="hover-effect.umd.js"></script>
20 | 
21 | <script>
22 | 
23 |       var hoverDistort = new hoverEffect({
24 |             parent: document.querySelector('.wrapper'),
25 |             intensity: 0.5,
26 |             image1: 'img_one.jpg',
27 |             image2: 'img_two.jpg',
28 |             displacementImage: '4.png'
29 |       });
30 | 
31 | // Wrap every letter in a span
32 | var textWrapper = document.querySelector('.hero-title');
33 | textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
34 | 
35 | $(document).ready(function() {
36 | 
37 | $('.wrapper').hover(         
38 |       function () {
39 |       anime.timeline({loop: false})
40 |       .add({
41 |       targets: '.hero-title .letter',
42 |       translateX: [80,0],
43 |       translateZ: 0,
44 |       opacity: [0,1],
45 |       easing: "easeOutExpo",
46 |       duration: 1400,
47 |       delay: (el, i) => 100 + 40 * i
48 |       })
49 |       },
50 | 
51 |       function () {
52 |       anime.timeline({loop: false})
53 |       .add({
54 |       targets: '.hero-title .letter',
55 |       translateX: [0,-80],
56 |       opacity: [1,0],
57 |       easing: "easeInExpo",
58 |       duration: 800,
59 |       delay: (el, i) => 40 * i
60 |       });         
61 |       }
62 | );
63 |             
64 | });
65 | 
66 | </script>
67 | </body>
68 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |       margin: 0%;
 3 |       padding: 0%;
 4 |       width: 100%;
 5 |       height: 100vh;
 6 |       background: #161616;
 7 | }
 8 | 
 9 | .wrapper {
10 |       width: 800px;
11 |       height: 600px;
12 |       position: absolute;
13 |       top: 50%;
14 |       left: 50%;
15 |       transform: translate(-50%, -50%);
16 | }
17 | 
18 | .hero-title {
19 |       position: absolute;
20 |       top: 35%;
21 |       left: 30%;
22 |       transform: translate(-50%, -50%);
23 |       color: white;
24 |       font-family: "Cosi Azure";
25 |       font-size: 84px;
26 | }
27 | 
28 | .hero-title .letter {
29 |       display: inline-block;
30 |       opacity: 0;
31 | }


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