---
title: "PathTextMotion — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Khannh huu · Text. PathTextMotion - Animate Text Along Any Open Path Turn static text into dynamic motion that follows any open SVG path — directly inside Framer."
canonical: "https://framer.elliotli.dev/component/pathtextmotion"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/PathTextMotion

# PathTextMotion

Animate text along any open SVG path

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

![PathTextMotion preview image 1](https://framer.elliotli.dev/og/component/pathtextmotion/b57b80d471852129/1600x1200.jpg)

## Summary

PathTextMotion - Animate Text Along Any Open Path Turn static text into dynamic motion that follows any open SVG path — directly inside Framer.

## Description

## PathTextMotion - Animate Text Along Any Open Path

Turn static text into dynamic motion that follows any open SVG path — directly inside Framer.

Create eye-catching hero sections, interactive menus, loading animations, and scroll-driven storytelling in minutes.

### 🔛 Property Controls

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

### 🚀 Simple Setup

1.  Add your SVG path
    
2.  Customize text & styling
    
3.  Choose trigger and animation
    
4.  Fine-tune position and offset. Done 🎉.
    

### ✨ Why Choose PathTextMotion?

Full creative control without complex setup:

-   Multiple triggers: Auto, Hover, Click, Scroll
    
-   Complete typography control
    
-   Paste SVG code or upload a path
    
-   Custom easing + loop options
    
-   4 animation directions (Forward, Reverse, Ping-Pong, Continuous)
    

### 🎯 Perfect For:

-   Curved hero headlines
    
-   Interactive navigation
    
-   Circular loading text
    
-   Product-shaped text layouts
    
-   Scroll-based reveals
    
-   Creative portfolio typography
    

### 🔧 Built for Designers

-   Works with any open SVG path
    
-   REM-based responsive sizing
    
-   Custom cubic-bezier easing
    
-   Scroll-triggered animation
    
-   Clean error handling
    

### 💡 Pro Tips:

-   Use **"Nearly Circle"** paths for circular text effects
    
-   Set **negative start positions** for entrance animations
    
-   Combine with **hover triggers** for interactive elements
    
-   Use **Scroll Animation** for storytelling experiences
    
-   **Hide the path** for invisible guide animations
    

### 🎨 Flexible by Design

From subtle micro-interactions to bold motion typography, PathTextMotion adapts seamlessly to your Framer projects.

### Create expressive motion — without writing complex animation logic.💬 Support & Updates

PathTextMotion is actively maintained and improved.

All future updates are included with your purchase.You’re free to remain on your current version or update anytime via **Assets → Components** in Framer.

For support or questions:📧 [cobopso@gmail.com](mailto:cobopso@gmail.com)

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

-   All · #9775

## Details

- **Author**: Khannh huu
- **Price**: $8.00
- **Published**: 2026-02-18
- **Updated**: 2026-02-18
- **Added**: 2026-02-08
- **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