Circular text elements using CircleType.js in Webflow

Circletype.js

Circletype is a Javascript package that lets you create dynamic circles and arches using plain HTML text elements. To get a better understanding of what it can do, take a look at the examples on Circletype's documentation site.

1 — Import

Let's start by importing CircleType.js. It should be imported before your closing body tag.

<script src="https://cdn.jsdelivr.net/npm/circletype@2.3.0/dist/circletype.min.js"></script>

2 — Usage

Now add any kind of text element and give it a unique class. This class will be used in order for the package to know what element you want to type circles with.

Let's begin by first referencing the text element in Javascript.

const circledTextTelement = document.querySelector(".your-text-element-class");

Now let's create a new CircleType object and send in our text element.

new CircleType(textElement);

The default radius will be calculated to make a full circle. However, you're also able to manually give it a specific radius in order to create other types of arches.

Here's an example of a custom radius.

new CircleType(textElement).radius(180);

3 — Performance tip

Note: this is a fairly unimportant package, so make sure to make use of async or defer while importing it in order to keep your page performance as high as possible. Read more about this by clicking here

Conclusion & video

Take a look at CircleType.js's documentation for more information about the package, and feel free to take a look at the video below if you get stuck.