Hover Transitions — WebGL image transitions on hover

Wave Transition FX is a premium WebGL image transition component designed for modern Framer projects. It delivers smooth, cinematic hover and click transitions using real-time displacement effects powered by Three.js and GSAP.

Features

• 8 handcrafted transition presets

• Real-time hover, click, or auto playback modes

• True image-accurate rendering (no color shifts or contrast changes)

• Fill, Fit, Crop, and Tile image modes

• Adjustable transition strength, angles, timing, and easing

• High-performance rendering with quality controls

• Works perfectly in both Framer Canvas and Preview

How to Use

• Upload Image A and Image B

• Select a transition preset

• Click a number to switch effects

• Hover the image to preview the transition

Perfect For

• Hero sections

• Portfolio showcases

• Product reveals

• Interactive galleries

• Premium landing pages

Built for creators who want visually rich interactions without compromising performance or image quality.

Controls

• Quality – Adjust rendering quality (Low / Medium / High)

• Image A – Primary image

• Image B – Secondary image for transition

• Transition – Choose from 8 handcrafted transition effects

• Trigger – Start animation on Hover, Click, or Auto

• Mode – Forward or Toggle behavior

• Duration – Control transition speed

• Ease – Animation easing style

• Delay – Add delay before animation starts

• Reverse – Automatically reverse on hover out

• Strength – Transition distortion intensity

• Angle 1 – Direction angle for first displacement vector

• Angle 2 – Direction angle for second displacement vector

• Fit – Image layout mode (Crop / Fit / Fill / Tile)

• Scale – Zoom level of the image

• Pos X – Horizontal image offset

• Pos Y – Vertical image offset