---
title: "TextImage Reveal — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Kelvin Mata · Text. Scroll-driven cinematic text-image"
canonical: "https://framer.elliotli.dev/component/textimage-reveal"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/TextImage Reveal

# TextImage Reveal

Scroll-driven cinematic text-image

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

![TextImage Reveal preview image 1](https://framer.elliotli.dev/og/component/textimage-reveal/b9bd6b4ebe629bd2/1600x712.jpg)

## Summary

Scroll-driven cinematic text-image

## Description

Text- Image Reveal is a scroll-based Framer Motion component that creates an immersive editorial layout by splitting each line of text into left and right segments while revealing an image between them. As the user scrolls, each line animates independently using scroll progress tracking, gradually expanding the image width from 0 to its full size. This produces a smooth “unfolding” effect that feels both organic and visually engaging.

The animation is carefully tuned to ensure performance and fluidity across devices. Each line reacts based on its position in the viewport, allowing multiple reveal moments as the user moves through the section.

Key Features

-   Scroll-driven reveal animation per text line
    
-   Dynamic image expansion between split text
    
-   Spring-smoothed motion for natural transitions
    
-   Fully customizable typography (size, spacing, tracking)
    
-   Adjustable image dimensions and corner radius
    
-   Multi-slide support for storytelling sequences
    
-   Clean, minimal layout structure for easy integration
    
-   Performance-optimized transforms using GPU acceleration hints
    
-   Responsive Behavior.
    

Customization

-   Edit slides directly to define text and images per line
    
-   Adjust imageWidth and imageHeight to control reveal scale
    
-   Modify lineFontSize and letterSpacing for typographic style
    
-   Control spacing between lines using lineSpacing and lineGap
    
-   Change backgroundColor, textColor, and hintColor for theme matching
    
-   Fine-tune animation feel via spring configuration (stiffness, damping)
    

Best Used For

-   Creative agency landing pages
    
-   Portfolio storytelling sections
    
-   Editorial or magazine-style websites
    
-   Brand narrative introductions
    
-   Product or campaign story reveals
    
-   High-end interactive web experiences
    

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

-   All · #6744

## Details

- **Author**: Kelvin Mata
- **Price**: $8.00
- **Published**: 2026-07-03
- **Updated**: 2026-09-01
- **Added**: 2026-07-03
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing