Project Title

Distortion hover effect using WebGL

Motivation for this project

The inspiration for this project came from the fact I want to create a displacement effect for the web using hover effect that reveals the next image underneath.

Snapshot for the project

Preview for the project

Getting Started

You need to have basic understanding of HTML, CSS, and Javascript. This project was build using external javascript from the following.

1. Hover effect from Robin Dela

• The library that creates the actual effect

2. Three.js

• A WebGL library that the hover-effect library uses for the distortion

3. TweenMax

• A GSAP library that allows the hover-effect library to create the fade animation

To use this external source code,

• Embed them in your script tag before the closing body tag.

Deployment

Netlify

Author

Teri Eyenike

Follow me on social

Twitter

Github

Follow the link to view this project, below

1. Displacement

2. Distortion-webGL