CircleType

noun · JavaScript library · element 65 of 117

A small open-source JavaScript library that sets text on a circle, the trick behind rotating badge text.

My levelProficientComfortable in production. I ship with it without supervision.

Projects: 1
Earliest project: 2022
Family: Motion and data

What is CircleType?

CircleType splits a line of text into letters and places each one on an arc or a full circle, with a set radius and direction. Combined with a little scroll or animation code, the circle can turn.

How I use CircleType

On Mentor Harbor Yachting Club I used CircleType for the scroll-to-top ring: the text circles the button, turns as the page scrolls and changes colour with the section behind it.

Where I have used itCircleType by company and year, from the projects on this site and the rest of my career.

Jonas Club Software1 project · 2022 to 2024

Projects with CircleType

Mentor Harbor Yachting ClubJonas Club Software

What CircleType connects to

GSAPThe GreenSock Animation Platform: a JavaScript library for smooth, precisely timed animation, with ScrollTrigger for scroll-driven motion.
ScrollMagicA JavaScript library for scroll interactions: pin elements, toggle classes and play animations as the visitor scrolls.
JavaScriptThe programming language of the browser. It makes pages interactive, and through Node.js it runs on servers too.
CSSThe language that controls how web pages look: layout, colour, type, spacing and motion.

Type	JavaScript library
Does	Text on a circle
Licence	MIT