Is moving type on a path a marquee?

A marquee is a straight looping strip. A path can loop too, but reading suffers as soon as the baseline bends.

Should the curved words be the only copy?

No. If they name a product or a legal point, repeat them in a still line.

Does this work on small screens?

The path has to shrink with the viewport.

Can people select the text?

Yes, if you used real SVG text.

What does reduced motion do?

Stop the travel. Leave the words where they can still be read, or set them straight.

Text on path

Text on a path places a short line on a curve, and sometimes slides it along that curve, so the words follow a shape you have drawn.

TextBuild difficulty: HardMotionPath

Also called Curved text, Text path, Circle type, Type on a line.

Here it is working.

Four words rest on the curve. Play again to watch them arrive.

For designers

This is decoration that happens to be words. A badge, a seal, a short slogan around a mark. A sentence you need people to finish should sit on a straight line. If the path is a circle that never stops, you are close to Infinite marquee, only harder to read. Keep the string short enough to sit on the curve without colliding with its own tail. Reduced motion shows the words parked on the path, or set on a straight line if the curve was only there to move.

Use this when

The words are a short badge or slogan, and the curve is the design.
Nobody has to scan the line to complete a task.
You can pause a moving path, and reduced motion can stop it.
The path is simple enough that the type still looks like type.

Reach for something else when

The heading must be read at a glance. Set it on a straight line, or use Text reveal.
You wanted a looping strip of items. Use Infinite marquee.
The letters should arrive, pop or scramble. Use Text reveal, Popping text or Text scramble.
You wanted a progress cue along a track. Use Progress.
The curve is really an underline flourish. Use Text underline.

How to build it

Draw the path as SVG. Put the words in a text element on that path, or place each word as an element and move it with MotionPathPlugin. If the type sits still on the curve, you may not need motion at all. If it travels, tween the offset along the path. Duplicate the string only when the loop must have no gap, and hide the duplicate from the accessibility tree. Keep a still, readable version nearby if the curved line is the only place those words exist. On reduced motion, park the type or swap to a straight setting. Measure after the font has loaded.

Official GSAP

MotionPathPlugin.

gsap.set(word, { motionPath: { path, align: path, alignOrigin: [0.5, 0.5], start, end } });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Is moving type on a path a marquee?: A marquee is a straight looping strip. A path can loop too, but reading suffers as soon as the baseline bends.
How long can the string be?: A few words.
Should the curved words be the only copy?: No. If they name a product or a legal point, repeat them in a still line.
Does this work on small screens?: The path has to shrink with the viewport.
Can people select the text?: Yes, if you used real SVG text.
What does reduced motion do?: Stop the travel. Leave the words where they can still be read, or set them straight.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Text split zoom