ThreeJS Distortion Hover Effects on Gatsby JS

We were asked by a fellow developer how we implemented the transitions on the "Our Clients" page of our site. We thought we'd share some of the secret sauce that made it happen, and the story behind it.

When we were building our new site, we located some breathtaking transition animations to include on one of our showpiece pages in an article titled "WebGL Distortion Hover Effects". However, it wasn't an exact cut and paste style affair - Requiring a little leg work on our part to make it work.

In this blog post, we will detail how we implemented the hover animations on the "Our Clients" page of our site in ReactJS. The animation is based on WebGL, and we use GSAP and ThreeJS to implement it.

We only needed to make some minor changes to the code to get it working.

Some of the core changes required to accommodate for the latest versions of the libraries included:

Renaming variables within the WebGL shader to accommodate for ThreeJS no longer allowing variables titled "texture".

uniform sampler2D texture; > uniform sampler2D t1;
uniform sampler2D texture2; > uniform sampler2D t2;

Enabling an Alpha layer for the WebGLRenderer to stop the images from going black when the canvas is being rendered.

Adding a delay to the mouse leave transition to prevent transition jitter. This was done by adding delay: speedIn / 2 to the evtOut TweeMax animation.

There were also some issues in relation to how some of the data properties of the image elements were processed, you could either ensure you are using floats instead of strings to pass the data, but in our instance, we did not require further customisations of the animations so we simply relied on the built fallback variables.

Finally, we trigger the animation on the onLoad hook of the image, so we can ensure the images have been loaded before proceeding to render the animation.

Some boilerplate code for the effect can be found here.

Contact us or check out our Gatsby JS web development services here