Are you looking to create an animated circle text in Elementor? Rotating circle text is a typographic effect where a phrase curves along a circular path and spins continuously, making it a strong visual focal point on hero sections and landing pages.
With the Advanced Typography widget from The Plus Addons for Elementor, you can create animated rotating circle text without writing any CSS or JavaScript.
To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, click here.
Best Used For:
- Agency and creative studio landing pages that want animated typographic accents around a hero image or CTA
- Portfolio websites where rotating circle text draws attention to a key phrase or service tagline
- Event and product launch pages where animated text creates visual emphasis around a countdown or headline
Requirement – This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.
To do this, add the Advanced Typography widget to the page and follow the steps.
1. In the Advanced Typography tab, select Normal from the Select Option dropdown. This sets the base text display mode that you will then convert into a circular layout in the following steps.
2. Then add the text in the Text field.
3. Select Center from the Alignment section to keep the circle text centered on the canvas. Use this when placing the circular text inside a column or container so it stays properly positioned within the layout.
4. Enable the Enable/Disable toggle from the Circular Text tab. This activates the circular path so your text curves along a circle. If you prefer animated headings without the circular path, see How to Add Heading Animation in Elementor.
5. Go to the Style tab and enable the Continuous Animation toggle from the Continuous Animation tab. This starts the perpetual rotation effect so the circle text spins without stopping.
6. From the Animation Effect dropdown, select an animation. Select Rotating to make the text spin continuously around its center point.
Now the circle text will rotate continuously.
Enable the Hover Animation toggle to show the animation only on hover. This is useful when you want the text to remain static by default and only animate when a visitor moves their cursor over it, reducing distraction on content-heavy pages.
From the Transform Origin dropdown, set the point around which the text rotates.
Note: You’ll see the Transform Origin option only for the Rotating animation.
From the Duration Time field, control the animation speed by setting a duration. Set a lower value for a faster, high-energy rotation, or a higher value for a slower and more refined motion. You can set different durations for different responsive devices. To apply animation effects to a standard text block instead, see How to Add Text Animation in the Text Block Widget.
