GSAP Curved Text Marquee on an SVG Path
Overview
A curved text marquee for React and Next.js that runs along an SVG path. Scrolling speeds it up, turns it around and physically bends the ribbon, which springs back as the page slows down.
Most curved marquees are a fixed shape with text sliding along it. This one reacts to the page: scroll speed feeds both the pace of the text and the depth of the curve, so a hard flick makes the whole ribbon sag and spring back. Scrolling up turns it around.
Details
- Category
- Marquee
- Interaction
- On Scroll + On Hover
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 003 / Marquee
GSAP Scroll Velocity Marquee
On Load · On Scroll
No. 073 / Testimonials
GSAP Testimonial Wall with Infinite Scrolling Columns
On Scroll · On Hover · On Load · On Click
No. 020 / Preloader
GSAP Column Preloader & Blooming Lily Hero Section
On Load · On Scroll · Mouse Move · On Hover
(02)FAQ
GSAP Curved Text Marquee on an SVG Path — FAQ
01How do I set the font size?
Add it through className, like any text. The ribbon's thickness and the section's height are set in em, so they follow.
02Can I use it without the coloured ribbon?
Yes. Leave out band and only the text shows. Set its colour with color, or let it inherit from the page.
03How do I change the curve?
curve sets the depth in px, and a negative value bows upward. flex sets how far scrolling can bend it, and 0 turns the bending off.
04What do screen readers hear?
The text once, as an image label. The repeated copies are hidden.
05What happens with reduced motion?
The text sits still on the curve, with no scrolling and no bending.