Looping rotating words effect for headings in Squarespace (7.0, 7.1 CE & 7.1 FE)

• 00
• 01
• 02
• 99

I think we can both agree: rotating headings look pretty awesome on a website.

The annoying part is creating the actual animation!

CSS – when cleverly used – can help achieve the illusion of a rotating effect with the right properties and keyframes in place.

But, more often than not, and even when it pains me to say it… JavaScript can do the job a lot better, even when it’s much more complicated to set up.

The good news is that, today, we won’t need to rack our brains creating the code to apply this effect to client sites.

There’s an AWESOME PLUGIN out there ready for us to use.

And in this tutorial, I’ll be showing you exactly how to implement and tweak it.

Let’s get started!

Tutorial

Overview & timestamps

Setting up this plugin in Squarespace is super easy, but we will take additional steps to modify things here and there to adapt it to our design!

1. 00:00 - Intro

2. 00:48 - Overview of the plugin we'll be using
   We’ll start out looking at the CodePen that we’ll be implementing on the site to see where each part of the code needs to go and what the different snippets take care of.

3. 01:40 - Implementing the plugin as is inside Squarespace
   Next, we’ll add the corresponding parts to the Code Block, Custom CSS window and Code Injection section without making any changes to it, to make sure that everything’s set up correctly.

4. 03:52 - Changing the phrases and the type of heading
   Once we have everything in place, we’ll begin modifying the HTML part inside the Code Block, to replace the original phrases with our own, and swap the type of heading the plugin is using by default with one that works better with our project.

5. 05:10 - Modifying the CSS styles
   Moving onto the CSS, we’ll remove some of the styles of the original plugin that don’t work for us and add in any extra snippets necessary to modify the look of our new rotating heading.

6. 08:47 - Modifying CSS styles for mobile devices
   After we check how everything looks on mobile, we’ll get rid of some of the original tweaks for smaller devices and add in our own under a media query.

7. 11:51 - Wrapping longer phrases into multiple lines
   With those modifications out of the way, we’ll take a few minutes to see what we need to change in the original plugin to make sure that the longer rotating phrases are able to split into multiple lines – instead of keeping everything in one single line – to make things more responsive.

8. 14:03 - Stopping bottom of words from getting cut off
   Before calling it a day, we’ll make a small adjustment to the containers holding the rotating words to make sure that the whole text fits vertically and doesn’t get cut off.

9. 16:15 - Modifying the speed of the looping effect
   And, last but not least, we’ll take a quick look at where we can adjust the timing of the whole looping effect inside the Code Injection section.
   

And that’s it!

You can make more or less tweaks to your heading depending on the style that you’re going for, but for the most part, once you make these basic changes you should be ready to go with this part of your project!

Until next time,

B.

---

Full code

Note: make sure to implement the original code first from Ken’s CodePen.

jQuery Library (if needed)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Additional CSS

/*LOOPING ROTATING WORDS EFFECT FOR HEADINGS IN SQUARESPACE (7.0, 7.1 CE & 7.1 FE) - ADDITIONAL CODE*/
//To style the looping phrases
.sp-intro b {
  font-weight: 900;
  padding-bottom: 15px;
}

//To style the heading on mobile
@media screen and (max-width: 767px) {
  .sp-intro * {
    font-size: 50px;
  }
}