---
title: "On Scroll Icon Text — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Nabeel · Text. About This component creates an animated heading with text and images that reveal as the user scrolls down the page."
canonical: "https://framer.elliotli.dev/component/on-scroll-icon-text"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/On Scroll Icon Text

# On Scroll Icon Text

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

![On Scroll Icon Text preview image 1](https://framer.elliotli.dev/og/component/on-scroll-icon-text/8b065169670acee7/1600x1200.jpg)

## Summary

About This component creates an animated heading with text and images that reveal as the user scrolls down the page.

## Description

## About

This component creates an animated heading with text and images that reveal as the user scrolls down the page. It allows for a mix of text and images, with customizable styles and triggers

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

1.  Copy & paste the component to your design canvas.
    
2.  Use the property controls to add content (text and/or images).
    
3.  Adjust the text properties
    
4.  Set the offset to determine when elements start revealing.
    
5.  Preview your design to reveal effect in action.
    

## How It Works

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-s1khdwcy-JVYPMyjQlgFwj3c6QDnyYoyzaHldQH)

You can then customize its appearance and behavior using the property controls, which include content, color, font, font size, line height, initial opacity, emoji size, spacing, offset, and alignment.

## Support

For any queries and help setting up the component, contact [hello@segmentui.com](mailto:hello@segmentui.com)

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

-   All · #11126

## Details

- **Author**: Nabeel
- **Price**: $9.00
- **Published**: 2025-08-15
- **Updated**: 2025-08-14
- **Added**: 2025-08-11
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos