How can I achieve the image distortion mouse hover effect in Webflow, similar to what I saw on a showcased website?
TL;DR
- Add a Webflow embed element and include the Pixi.js library via CDN for WebGL support.
- Create a custom script using a displacement map and Pixi.js to apply distortion on hover.
- Use Webflow Designer to structure and style a container div (e.g., #pixi-wrapper) for rendering the effect.
- Upload your images to Webflow assets and link their CDN URLs in your script.
To achieve an image distortion mouse hover effect in Webflow, you'll need to combine Webflow’s interactions with a custom WebGL-based script, often using libraries like Three.js or pixi.js, since Webflow’s native tools don't support visual shader effects.
1. Use a Webflow Embed Element for Custom Code
- Add an Embed element to your Webflow project (available in paid plans).
- Place the embed inside the desired section or container where you want the effect to appear.
2. Integrate a WebGL Library Like Pixi.js
- Use a CDN link to include Pixi.js within your embed element. Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.9/browser/pixi.min.js"></script>
- This library allows GPU-based image manipulation required for distortion effects.
3. Use a Displacement Map Technique
- Prepare two images: the original image and a displacement map (a black-and-white texture that defines distortion).
- Use JavaScript inside Webflow’s Before </body> tag custom code area to:
- Create a Pixi.js application.
- Load your image and displacement map.
- Apply the displacement filter and update its scale based on cursor movement.
4. Set Up Webflow Container and Style
- In your Webflow Designer:
- Create a div with a unique ID (e.g.,
#pixi-wrapper) where the effect will be rendered. - Set position: relative and define a width/height matching your design.
5. Example Script Overview (Do Not Paste Raw Code)
- In your script, ensure you:
- Target the
#pixi-wrapperelement. - Initialize a Pixi application with
transparent: true. - Add the image as a sprite.
- Load a grayscale PNG as a displacement map.
- Create a
DisplacementFilterand animate its scale on mousemove.
6. Hosting Images Correctly
- Upload both the main image and the displacement map image in your Webflow assets.
- Use the CDN URLs of these assets in your script references.
Summary
To create an advanced image distortion hover effect in Webflow, you’ll need to use a JavaScript-based solution like Pixi.js via custom code embeds, along with a displacement map and Webflow’s native layout tools to position everything. Webflow alone doesn't support WebGL-level image effects natively.