---
title: "ScaleoutImage — Free Framer component · Best of Framer"
description: "Free Framer component · by Olivar Grant · Effects. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/scaleoutimage"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/ScaleoutImage

# ScaleoutImage

Hover Interaction

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

![ScaleoutImage preview image 1](https://framer.elliotli.dev/og/component/scaleoutimage/8ec8e49ea0947df0/1600x1200.jpg)

## Summary

Hover Interaction

## Description

The Scale Out Image effect is designed to showcase a minimal yet impactful animation behavior where images gradually reduce in size until they disappear. This creates a sense of fluidity and controlled motion rather than abrupt changes.

Built using Framer’s interaction system, the effect leverages transform properties like scaling to deliver smooth, performance-friendly animations.

A key characteristic of this interaction is its **one-directional behavior**—each hover triggers a scale-out animation, and the element does not scale back in when the hover ends. This creates a distinct, progressive interaction feel rather than a reversible one.

**Key highlights:**

-   **Scale-based transition:** Images animate from visible (scale: 1) to invisible (scale: 0)
    
-   **One-directional interaction:** Triggers on hover without reversing on hover out
    
-   **Smooth motion feel:** Creates a polished and modern UI experience
    
-   **Minimal & clean:** Focuses on a single interaction without visual clutter
    
-   **Reusable component:** Can be applied to galleries, cards, or hero sections
    

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

-   All · #7764

## Details

- **Author**: Olivar Grant
- **Published**: 2026-04-17
- **Updated**: 2026-04-17
- **Added**: 2026-04-07
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows