---
title: "Scroll Image Reveal — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Hasan Wali · Effects. Scroll Image Reveal creates a smooth transformation where an image expands from a compact rounded shape into a full-screen visual…"
canonical: "https://framer.elliotli.dev/component/scroll-image-reveal"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Scroll Image Reveal

# Scroll Image Reveal

Scroll Based Image ExpansionEffect

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

![Scroll Image Reveal preview image 1](https://framer.elliotli.dev/og/component/scroll-image-reveal/dbd332dd24d5c53c/1600x1200.jpg)

## Summary

Scroll Image Reveal creates a smooth transformation where an image expands from a compact rounded shape into a full-screen visual while progressively removing the border radius.

## Description

**About this Component**

Turn ordinary sections into cinematic scroll experiences.

Scroll Image Reveal creates a smooth transformation where an image expands from a compact rounded shape into a full-screen visual while progressively removing the border radius.

The animation is powered by the user's scroll position, creating a fluid and modern storytelling effect without external animation libraries.

Perfect for hero sections, portfolios, landing pages, case studies, and visual storytelling websites.

**Perfect For**

Creative portfolios

Agency websites

Photography websites

Product showcases

Landing pages

Case studies

Editorial websites

Premium brand experiences

**Key Features**

Scroll-controlled image expansion

Smooth border radius morphing

Responsive desktop and mobile sizing

Built-in easing controls

Optional overlay text reveal

Optional darkening effect

Automatic scroll progress detection

No GSAP dependency

No external setup required

Lightweight and performant

**Important Setup Notes**

For the best experience, place this component inside a sticky scroll layout.

Recommended structure:

Scrolling container → Sticky Container → component

The component automatically detects its scroll progress and does not require manual animation controls.

**Customization Options**

Image

Desktop starting size

Mobile starting size

Starting border radius

Ending border radius

Animation easing

Overlay text

Darkening effect

Questions? Reach out at hasanwali6890@gmail.com

**Refund Policy**

All sales are final upon purchase as this is a non-tangible digital product. A refund is offered only if the component suffers a critical technical failure that prevents its core function and cannot be resolved within a reasonable timeframe. Refunds are not issued for buyer's remorse, aesthetic preference, or modifications made after purchase. Report confirmed technical failures with evidence within 14 days of purchase.

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

-   All · #7582

## Details

- **Author**: Hasan Wali
- **Price**: $7.00
- **Published**: 2026-06-17
- **Updated**: 2026-06-17
- **Added**: 2026-06-17
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo