Which website platform is best for your business? Take the Quiz!

How to Add an Amazing Spinning Text Animation to Your Website in Showit

If you’re a website designer, one of the best ways to impress your clients is to go above and beyond with finishing touches, like this cool spinning text animation in Showit!

Spinning Text Animation

While Showit is an amazing no-code website-building platform, it does come with limitations. Thankfully, you can overcome them with a few simple coding tricks.

Follow the steps below to create this eye-catching effect in just a few minutes. It’ll push your design over the edge and make your clients excited to refer you!

Special thanks: this is an adaptation of code by Tyler Lastovich on Codepen for Showit.

If you’re a WordPress user, check out my tutorial on how to add a rotating text animation to your website using Elementor Pro!

Showit Tutorial - Add a Cool Spinning Text Animation to your Website in Showit

How to Add an Amazing Spinning Text Animation to Your Website in Showit

To follow this tutorial, you (or your client) will need an active Showit subscription.

Got that? Navigate to the page where you want to add the spinning text animation and let’s get started.

Step 1: Add an Embed Code to the Page

We’ll be adding the spinning text animation using Showit’s Embed Code element.

Make sure you’ve selected the canvas on the page where you want the animation to appear.

To add an Embed Code, hover over the rectangle at the bottom of your screen in the Showit builder. Then, click “Embed Code.” This will add an Embed Code element to your canvas.

Add an embed code to your page in Showit

Step 2: Copy and Paste This Code

Next comes the “hard” part – adding the code to create the rotating text animation. But actually, it’s not hard because I’ve got the code for you! All you need to do is copy and paste it.

Making sure the Embed Code element is selected, click the “Custom Code” section of the properties panel in Showit (located in the “Embed Info” section). 

Copy and paste HTML and CSS into the Showit embed code

This will bring up a pop-up window where you can paste the following code.

First, copy and paste this HTML:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 1000">
<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="textcircle">
<animateTransform attributeName="transform" begin="0s" dur="30s" type="rotate" from="0 250 250" to="360 250 250" repeatCount="indefinite"></animateTransform>
<text dy="70" textLength="1220">
<textPath xlink:href="#textcircle">Your text goes here!</textPath>

Second, copy and paste this CSS into the SAME Embed Code element (right below the HTML you just added). Don’t forget the opening and closing <style> and </style> tags.

svg { width: 100%; }
svg textPath {
  font-size: 60px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  fill: #C17C4E;

If you’ve done this correctly, you should see something like this on your screen, and it should spin!

Spinning text animation after CSS code has been added

Note that if you do not have the Montserrat font installed in your Showit account, the text will look slightly different.

Step 3: Adjust the Code to Style your Spinning Text Animation

To style this text to fit your website design, you’ll need to change a few areas of the code. Be careful when editing the code not to accidentally delete any surrounding text or punctuation – this could cause the code to break.

To change what the text says:

Find this line of code near the bottom of the HTML:

<textPath xlink:href="#textcircle">Your text goes here!</textPath>

Replace “Your text goes here!” with whatever text you want.

To change the diameter or length of the text:

Find this line of code, just above the previous line of HTML:

<text dy="70" textLength="1220">

The “text dy” property controls the diameter of the circle. Increasing this number will make the circle wider, and decreasing it will make the shape smaller. If you want to adjust the amount of space for longer or shorter amounts of text, change the “textLength” property’s value.

You can also experiment with increasing and decreasing the size of the Embed Code module in the Showit editor. This will change the overall size of the circular text.

To change the speed of the rotation:

Find this line of code in the middle of the HTML: 

<animateTransform attributeName="transform" begin="0s" dur="30s" type="rotate" from="0 250 250" to="360 250 250" repeatCount="indefinite"></animateTransform>

The property called “dur” controls the duration of the spin in seconds. Increasing this number will slow the rotation down, while decreasing the number will speed it up.

Moving onto the CSS, here are a few more elements you can change to alter how the spinning text looks.

To change the size of the text:

Change the font size using this line of CSS:

font-size: 60px;

To change the font:

Use these lines of code:

font-family: 'Montserrat', sans-serif;  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5em;

Using the “font-family” property, replace ‘Montserrat’ with the name of your desired font. You will need to make sure the font you choose is uploaded and installed in your Showit media library and design settings.

The “font-weight” property controls how bold the font appears. For this to work properly, you’ll need to have the corresponding font weights installed in Showit. In this example, Montserrat Semibold was installed in my Showit account, so the “font-weight” property works!

The “text-transform” property controls whether the text is all-caps, title case, or normal. If you want your text to appear exactly as you typed it, you can delete this line entirely.

Finally, adjusting the “letter-spacing” value will affect how much space is between each letter around the circle.

To change the color:

Update the hex value in this line of code to match one of your brand colors:

  fill: #C17C4E;

Keep playing around with these settings until your spinning text animation looks just right!

Step 4: Style the Spinning Text Animation on Mobile

After you’ve gotten your rotating text animation looking perfect on desktop, don’t forget to adjust it on the mobile version of your website!

You can adjust the size of the circle by dragging the length and width handles on the Embed Code element. You shouldn’t have to use a separate Embed Code module on mobile if you want the animation to look the same across devices.

If, however, you want the mobile version of the animation to have different text or color, duplicate the original Embed Code element. Then, hide one Embed Code on desktop and hide the other on mobile by clicking the device icons next to each element in the canvas settings.

That’s all there is to it! Save and share this tutorial as a reference to make all your future website development projects easier!

Are you a web designer looking to streamline your client projects?

Download my free shortcut – the Web Design Project Plan.

You May Also Like:

Pin It on Pinterest

Share This