How to add rotating text to your Squarespace 7.0 & 7.1 website

PIN TO SAVE FOR LATER!

Elevate your Squarespace website with this quick and easy Squarespace tutorial

In this tutorial, we'll show you how to elevate your website's design by incorporating rotating text elements. Whether you want to highlight key messages, showcase testimonials, or simply add a fun twist to your site's content, rotating text can be an engaging and eye-catching addition. You don't need to be a coding expert to achieve this effect – we'll guide you through the steps to make it happen effortlessly.

Example of the rotating text:

TEXT 1 HERE TEXT 2 HERE TEXT 3 HERE TEXT 4 HERE

Step 1:

Add code block to page section

1. In Edit Mode, go to the section you would like to add rotating text

2. Add a Code Block

3. Copy and paste the code below

4. Replace “TEXT 1/2/3/4 HERE” with personalized copy

 <h2>
    <div class="rotatingtext">
      <span>TEXT 1 HERE</span>
      <span>TEXT 2 HERE</span>
      <span>TEXT 3 HERE</span>
      <span>TEXT 4 HERE</span>
    </div>
  </h2>

IMPORTANT NOTE:

To change text to a different heading size, update <h2> and </h2> to h1, h2, h3 or h4

For example, to change the text size to heading 1, use <h1> and </h1>

EXAMPLE

Step 2:

Add custom CSS

1. From your Squarespace dashboard, go to:
   Website > Scroll down to Website Tools > Custom CSS

2. Copy and paste the CSS below

3. Save & refresh!

// ROTATING TEXT

.rotatingtext{
	display: inline;
  }

  .rotatingtext span{
	animation: fadeEffect 20s linear infinite 0s;
	-ms-animation: fadeEffect 20s linear infinite 0s;
	-webkit-animation: fadeEffect 20s linear infinite 0s;
	color: #000000;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.rotatingtext span:nth-child(2){
    color: #000000;
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
} 
.rotatingtext span:nth-child(3){
    color: #000000;
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}
.rotatingtext span:nth-child(4){
    color: #000000;
	animation-delay: 15s;
	-ms-animation-delay: 15s;
	-webkit-animation-delay: 15s;
}

// CROSS DISSOLVE ANIMATION
@-moz-keyframes fadeEffect{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: translateY(0px); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-webkit-keyframes fadeEffect{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: translateY(0px); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes fadeEffect{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: translateY(0px); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

IMPORTANT NOTE:

To change color of rotating text — change #000000 in CSS to HEX code of choice

Repeat 4x or use different HEX for a multicolor effect

All set!

USE DISCOUNT CODE STYLEDSQUARE10 TO SAVE 10% OFF YOUR SQUARESPACE SUBSCRIPTION

* Disclaimer: This post contains affiliate links. We may earn a commission should you chose to sign up for Squarespace using our link. Affiliate links are a great way to show your support for our content with no additional cost to you!

More Squarespace tutorials