---
title: "Hover Transitions — Free Framer component · Best of Framer"
description: "Free Framer component · by mehul · Buttons. WebGL image transitions on hover"
canonical: "https://framer.elliotli.dev/component/hover-transitions"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Hover Transitions

# Hover Transitions

WebGL image transitions on hover

[View on Framer](https://framer.com/marketplace/components/hover-transitions/?via=elliot-li)

![Hover Transitions preview image 1](https://framer.elliotli.dev/og/component/hover-transitions/e771880ab4580d58/1600x1200.jpg)

## Summary

WebGL image transitions on hover

## Description

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
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #6066

## Details

- **Author**: mehul
- **Published**: 2026-01-27
- **Updated**: 2026-02-25
- **Added**: 2025-12-31
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow