148
AI ready

Rotating Text Badge

£7 or the whole Vault, £79.20

The circular spinning text badge from studio sites, built on GSAP ScrollTrigger and InertiaPlugin: it picks up spin from scroll speed, coasts back to idle and turns its arrow to face the pointer.

ScrollTriggerInertiaPlugin intermediate
5 more details
svg-pathtext-animationvelocity-reactivehover-effectmomentum

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Rotating Text Badge demo in new tab

Released

About this effect

Rotating Text Badge is the circular "scroll down" or "now booking" badge that sits over the corner of a hero photo, done properly. Your line of text runs around an SVG circle and is fitted to it exactly, so the join between the last word and the first never shows a gap or an overlap, whether the text is twelve characters or forty-eight.

Read the full effect overview

It is built on GSAP ScrollTrigger and InertiaPlugin. The ring turns slowly at rest. Scroll the page and it picks up speed in the direction you are scrolling, with a faint trail behind the letters at speed; stop, and it coasts back down to its idle spin on its own momentum in about a second and a half. Scrolling back the other way slows it through zero rather than snapping round.

Point at the badge and the ring slows almost to a stop, the disc tilts towards the pointer with a soft highlight and a shadow that falls away from it, and the arrow in the middle grows and turns to face the pointer. Press it and the disc squashes and springs back while the arrow shoots out the way it points and comes back in from behind. The demo is one large pink badge over the corner of a photograph; scroll to spin it.

Rotating Text Badge - GSAP animation effect preview

What's included

9 items
  • Built on GSAP ScrollTrigger and InertiaPlugin: scroll speed adds spin, momentum brings it back to idle
  • Text fitted to the circle exactly for any length, re-measured after web fonts load
  • Spin follows the scroll direction and passes smoothly through zero when you reverse
  • A faint motion trail behind the lettering that only appears at speed
  • On hover the ring slows, the disc tilts towards the pointer and the arrow turns to face it
  • Press squashes the disc and springs it back; the arrow launches and returns
  • A real link or button, named once by its plain text rather than the repeated ring
  • Idle speed, scroll boost, direction and separator set by data attributes; colours and size by CSS custom properties
  • Small API to set up new badges, refit after a text change, and revert cleanly

Perfect for

4 use cases
  • A "scroll down" or "now booking" badge over the corner of a hero image
  • A back-to-top button in a site footer
  • An "available for work" sticker on a freelancer's or studio's homepage
  • A "new season" or "order now" roundel on a shop's product section

How it works

3 sections

Your text runs along a circular SVG path. The script works out how many repeats of the text and separator fit around the circle and spreads the small remainder evenly as letter spacing, so every gap, including the one where the ring joins, is the same. It does this again once web fonts have loaded and after a resize.

GSAP ScrollTrigger reads how fast the page is scrolling and the ring eases towards a matching spin. When scrolling stops, GSAP InertiaPlugin takes the spin it had and lets it run down naturally to the idle speed, so the badge seems to have weight. Hover, focus and press are short GSAP tweens with overshoot that always settle back to rest.

The badge is an ordinary link or button with its text written once for screen readers; the ring and the arrow are hidden from them. On touch screens the ring turns only while the page scrolls. With reduced motion the ring stands still, and without JavaScript the badge is a static SVG with real text.

Plugins ScrollTrigger, InertiaPlugin
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Rotating Text Badge opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£7 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the badge wherever it belongs (a link here; a <button> works the same):

Code snippet omitted: it ships with the download.

The text inside the <textPath> is what visitors see without JavaScript; with it, the script rewrites the ring from data-rb-label, so you only need to keep the label up to date.

Using It With Your Own Design

What the effect needs from your markup: a root with data-rb, normally the link or button itself. Inside it: data-rb-label holding the plain text (visually hidden; it is the accessible name), data-rb-body (the disc that tilts and squashes), an <svg data-rb-ring> containing a circular <path> with a unique id and one <text><textPath> pointing at it, and optionally data-rb-icon around your icon. The icon's first child is what launches on click, so keep the icon wrapped in one element. Give every badge its own path id.

What is only the demo's styling: the pinned stage with one photograph, the DM Mono face, the pink and ink palette and the badge position. Set the font of the ring with --rb-font.

CSS the effect depends on: .rb needs a size (--rb-size) and position: relative; .rb__body and .rb__ring fill it absolutely; .rb__well keeps overflow: hidden so the arrow can leave and come back in through its edge. The ring's font-size attribute is in viewBox units (out of 200), so the badge scales with --rb-size without refitting. Change the circle's radius and the script refits to the new length.

Custom property Default Description
--rb-size 200px Diameter
--rb-ink #141412 Ring text and centre well
--rb-accent #ff3e7f Disc and arrow
--rb-disc, --rb-text, --rb-well, --rb-arrow from the two above Override one part on its own
--rb-shadow rgba(0,0,0,.5) Disc shadow colour
--rb-focus accent Keyboard focus ring
--rb-font DM Mono Ring typeface

Options

Attribute Values Default Description
data-rb-speed degrees per second 24 Idle spin. 0 turns only on scroll
data-rb-boost number 1 How much scroll speed adds. 0 ignores scrolling
data-rb-reverse present off Spin anticlockwise; scroll spin mirrors too
data-rb-separator any character · Placed between repeats of the text. Empty for none
data-rb-icon right, down, left, up or degrees right The direction your icon is drawn pointing, so it can turn to face the pointer

Accessibility

  • Screen readers hear the label once. The ring, its motion trail and the icon are hidden from assistive technology; the badge's name is the plain text in data-rb-label, not the repeated ring.
  • Keyboard: focusing the badge with the keyboard slows the ring and grows the arrow, as hover does; Enter follows the link and plays the press.
  • Touch: there is no hover state to stick. A tap squashes the disc and follows the link, and the ring turns only while the page scrolls.
  • Reduced motion: with prefers-reduced-motion: reduce the ring stands still and is still fitted to the circle. Changing the setting while the page is open rebuilds the badge.
  • No JavaScript, or GSAP blocked: the badge is a static SVG with the real text you wrote in the <textPath>.

Dependencies

Required:

  • GSAP 3.13+ (the demo is pinned to 3.15.0)
  • ScrollTrigger plugin
  • InertiaPlugin (free with GSAP since 3.13)

Browser Support

Current Chrome, Edge, Firefox and Safari. The fit uses SVG letter spacing, which every current engine supports.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.