---
title: "Path Text Reveal — Free Framer component · Best of Framer"
description: "Free Framer component · by Long Nhật · Text. TextClipPathReveal Animate headlines on scroll with a clean clip path reveal."
canonical: "https://framer.elliotli.dev/component/path-text-reveal"
---

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

# Path Text Reveal

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

![Path Text Reveal preview image 1](https://framer.elliotli.dev/og/component/path-text-reveal/129f3df1a9e651dd/1600x1200.jpg)

## Summary

TextClipPathReveal Animate headlines on scroll with a clean clip path reveal.

## Description

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-m2xhspod-8Qw0GSdukII7AjuCfxlBvG7RG33dmU)

## TextClipPathReveal

Animate headlines on scroll with a clean clip path reveal. The component measures the rendered width of your text, wraps it into true visual lines, then animates each line as it enters view.

## What you get

• On scroll reveal with enter and exit control from the viewport

• Line by line animation that respects your actual wrapping

• Direction options top bottom left right center

• Controls for duration and stagger

• Works with any font and weight

• Alignment left center rightProps

• Text: multi line input. Press Enter to create a new line.

• Font: family and weight.

• Font Size: default 72.

• Text Color: any solid color.

• Text Align: left center right.

• Line Height: default 1.1.

• Width: container width.

• Background: component background.

• Padding: inner spacing.

• Radius: corner rounding.

• Reveal Direction: top bottom left right center.

• Stagger Delay: delay between lines.

• Duration: time for each line.

## How to use

1\. Drop the component on your canvas.

2\. Set Text and press Enter for new lines.

3\. Choose Font and Font Size.

4\. Pick Reveal Direction then tune Duration and Stagger.

5\. Adjust Padding and Radius if you want a card look.

6\. Place the frame in a scrollable section. The reveal runs when the text enters view.

## Tips

• Keep a short line length for stronger rhythm.

• Try center alignment with small stagger for hero lines.

• For subtle motion use a shorter duration with a small stagger.

• The frame has a minimum height to ensure scroll space. Increase the section height if you want a later reveal.

## Notes

• The component uses Framer Motion and in view detection.

• Works best with display fonts at medium to large sizes

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

-   All · #1906

## Details

- **Author**: Long Nhật
- **Published**: 2025-11-07
- **Updated**: 2025-11-15
- **Added**: 2025-10-27
- **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