Create a distortion hover effect using WebGL

4 min readApr 16, 2018

In this tutorial we will be using a distortion hover effect to display both the departure and arrival locations in a single div.

Want to see the code in action? Check out the Codepen.

Last week I came across an article on Codrops introducing a library called hover-effect built by Robin Delaporte. It was super easy to use and worked really well.

The library uses a distortion image like the one below to transition between two different images. This creates a very cool hover effect.

How it works

According to the article on Codrops the effect works in three steps.

Apply the displacement image to the two images we will be transitioning between.
Fade between the two images
Remove the displacement

Getting started

For this tutorial all you will need is a single html file or you can create your own CodePen. For the rest of the examples in the tutorial I will be using a single html file.

First we will create our html file. Create a file called index.html and open it up in your favorite code editor.

You can paste the below code into your .html file. This just includes all of the outside sources neccesary to complete the tutorial.

<html>
    <head>
        <title>Distortion Hover Effect Example</title>
        <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">        
    </head>
    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js">
        </script>
        <script src="https://cdn.rawgit.com/robin-dela/hover-effect/master/js/hover.min.js">
        </script>
    </body>
</html>

So what did we just add?

Oswald: A google web font that we will be using for our text
Three.js: A WebGL library that the hover-effect library uses for the distortion
TweenMax.js: A GSAP library that allows the hover-effect library to create the fade animation
Hover-Effect: The library that creates the actual effect

Adding the markup

Now that we have all of our required outside sources we can start to build our flight information div. Go ahead and add this div inside the body tag. This has all of our markup that we will be using. Nothing special here.

<div class="ticket">
  <div class="overlay"></div>
  <div class="flight-info">
    <h3>JUNE 30 2018 12:30PM</h3>
    <div class="flight-locations">
      <h1>LAX</h1>
      <img src="https://cdn-images-1.medium.com/max/800/1*QFU_XYAKOGJ9nunfqvem1w.png" />
      <h1>JFK</h1>
    </div>
  </div>
</div>

Go ahead and open the index.html file in your browser. It should look well…terrible. That’s because we haven’t added the css component yet. We can do that now. Go ahead and create a <style> tag in the <head> section of your html page.

Again nothing to special here. We are utilizing flexbox for a lot of our layout needs.

body{
  background:#4F4F4F;
  color:white;
  font-family: 'Oswald', sans-serif;
  display:flex;
  justify-content:center;
  padding-top:40px;
}h1{
  font-size:60px;
}h3{
  font-weight:400;
  color:#F2C94C;
}h1,
h3{
  margin:0;
  padding:0;
}img{
  width:42px;
  height:39px;
  margin:0px 20px;
}.ticket{
  position:relative;
  height:410px;
  width:690px;
  background:black;
  display:flex;
  align-items:flex-end;
  box-shadow: 0px 10px 40px rgba(0,0,0,.4);
}.flight-info{
  position:relative;
  z-index:99;
  padding:30px;
}.flight-locations{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:-20px;
}canvas{
  position:absolute;
  border-radius:6px;
  z-index:0;
}.overlay{
  position:absolute;
  background:rgba(0, 0, 0, .2);
  left:0; 
  right:0;
  top:0;
  bottom:0;
  z-index:1;
}

Refresh your browser and you should see a much better looking page.

Now we can add our hover effect. We will be transition between two images. The first being an image of Los Angeles to represent LAX and the other of New York City to represent JFK.

As for our displacement image we will be using a striped design that looks like this.

This will create a very cool striped effect when we hover over the images.

To create the effect we will need to create a <script> tag right above the </body> tag.

Here is all the code that we need to create the effect

new hoverEffect({
  parent: document.querySelector('.ticket'),
  intensity1: 0.1,
  intensity2: 0.1,
  angle2: Math.PI / 2,
  image1: 'https://images.unsplash.com/photo-1518824547657-2bb07e2978ba?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1600&h=900&fit=crop&ixid=eyJhcHBfaWQiOjF9&s=942862481ea16bf420e9014eb479e866',
  image2: 'https://images.unsplash.com/photo-1494756739853-38af58aa9dd0?ixlib=rb-0.3.5&s=121d4a13a0ca8125ea7bb70eae292900&auto=format&fit=crop&w=1351&q=80',
  displacementImage: 'https://cdn.rawgit.com/robin-dela/hover-effect/b6c6fd26/images/stripe1mul.png?raw=true'
});

So here’s what we are doing. We are creating a new hoverEffect object. Then we are pointing to what div needs the hover effect applied to it with the parent property. We can then set things like intensity and angles for both of the images. Finally we are identifying which images we want the effect to be applied to as well as the actual displacement image that we will be using.

The finished product

Refresh your browser and check out the awesome hover effect that you created.

Thanks for reading!

Thanks for making it this far. Hope you enjoyed the tutorial. If you have any questions or comments feel free to ask them below.