WebGL Distortion Hover Effects

A little library that can be used for creating WebGL powered distortion hover effects using displacement images.

Today we’d like to share a little hover effect library with you. The effect goes as follows: when hovering an image, we’ll use a displacement image to transition to another image. Using different displacement images, we can create a variety of looks. The main idea behind this little library is to recreate an effect similar to what we have done previously, but with broader support, better performance and that is easier to customize.

The demo is kindly sponsored by HelloSign API: Everything IT requires and Developers love. If you would like to sponsor one of our demos, find out more here.

The animation is based on WebGL and we use three.js, so it works in all recent browsers.

To get started we need two main images and one displacement image to create the effect.

Here is an example displacement image we’re using:

1

The effect works in the following three steps:

  1. Modifying the images with the displacement image
  2. A classic fade between the 2 images
  3. Reverse the displacement

DistortionHoverEffect_01

We can use a simple div to initiate our effect:

var myAnimation = new hoverEffect({
	parent: document.querySelector('.my-div'),
	image1: 'images/myImage1.jpg',
	image2: 'images/myImage2.jpg',
	displacementImage: 'images/myDistortionImage.png'
});

Keep in mind that the demo needs to run in a server environment.

We hope you like this library and find it useful!

References and Credits

Tagged with:

Robin Delaporte

Creative technologist at Canva Sydney. CSS and animation lover, Robin is also a WebGL enthusiast.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 17

Comments are closed.
  1. I started to dig into WebGL a couple of months ago and love such effects. Here’s clearly the problem of the performance. Use those effects wisely, since it’s heavy on the memory.

    In this demo, I think it would have been better to order the examples in a pagination, the site is very laggy.
    And maybe it could be optimized with reducing the console output?

    But thank you for this article, I surely will play around with those distortion files 🙂

  2. Work very poorly on Chrome (about 0.00001 FPS), while Microsoft Edge make it 60FPS.
    (GeForce GTX 970 on a i7 Series 6 at 4Ghz and 32Gb of RAM… kinda enough for this =P)

  3. The demo plays well on Manoela’s site, but it does not play well locally on Win 10 and chrome. It plays well locally on Edge, and intermittently on Firefox.

  4. Good morning, thanks for all your work, means a lot to me, and help me always!! this example doesnt work fast, actually is very slow, just for say. Thanks for all your fantastic work…

  5. The demo is currently re-rendering each ThreeJS scene for each image on every animation frame.

    Performance could probably be greatly improved with the relatively simple optimization of nly re-rendering scenes that are actually changing because they are entering/exiting the hover state.

  6. Great work, very inspiring! Regarding performance, it works awesome in my Win10 (64bit) with GTX 1080, in both Chrome v65.0.3325.181, Firefox 59 and Microsoft Edge 16.

    • Yeah but don’t you think if you need a high powered machine with a graphics card the demo is pretty much useless? It really is nice work though. How come it works on Manoela’s site even with WIN 7 and 4gb of ram and no graphics card?

  7. I’m using an iMac from late 2009 with 16gb ram and it works perfectly in Chrome !

  8. Wow!! That’s awesome! And I’m very happy to see a photo of mine (Pink Lake) featuring the demo!

  9. This is fantastic!

    i managed to get it work with some of my images but i found that the images do not keep their ratio when the browser is resized.

    My mobile images are stretched.
    Any help would be greatly appreciated!
    TY

  10. Hi Robin,

    This is such a fun transition! Thank you for sharing. I am experimenting with the code and it is only allowing 16-effects on the page? Is that something in the three.min.js? Do you know how to change to an indefinite amount of usage?