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

In this tutorial, we'll guide you on how to enhance your website's design by integrating rotating text elements. Whether you aim to emphasize important messages, display testimonials, or inject a playful element into your site's content, incorporating rotating text can bring an engaging and visually appealing dimension. The best part? You don't have to be a coding expert to achieve this effect; we'll walk you through the steps to effortlessly bring dynamic and rotating text to your website.

Step 1:

• To begin, navigate to the section of your page where you want to incorporate rotating text while in Edit Mode.

• Next, add a Code Block to this section.

• Copy the code provided below and paste it into the Code Block.

• Remember to replace "TEXT 1/2/3/4 HERE" with your personalized copy to customize the rotating text according to your preferences.

Code:

<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>

Step 2:

Now, head over to your Squarespace dashboard and follow these steps:

• Navigate to Website.

• Scroll down to Website Tools.

• Find and select Custom CSS.

Copy the CSS code provided below and paste it into the Custom CSS section.

After that, save your changes and refresh your page to see the rotating text effect in action!

Code:

// 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; }
}