Looping rotating words effect for headings in Squarespace (7.0, 7.1 CE & 7.1 FE) | Day 7 of 12DOC

[@beatrizecaraballo]

UPDATE AUG 2024: there's a new FAQs & Troubleshooting section, at the end of the blog post, that addresses the most common questions that come up from this tutorial + the fixes you can implement to solve those issues! You can check it out here: www.beatrizcaraballo.com/blog/looping-rotating-words-heading-squarespace

[@joelatkinson3573]

This might be the first ever website editing tutorial where nothing messed up and I got the exact thing I wanted, thanks so much!

[@beatrizecaraballo]

You're very welcome! I appreciate that. I'm glad the code worked the way you needed it to 🙌

[@MelanieFinke]

I just had a client ask for this option on his site last week. I'm so thankful that you posted this tutorial today!

[@beatrizecaraballo]

Oh, that's awesome! It's my pleasure ☺

[@daxedd]

Thank you so much! You explained everything so clearly, so I was able to follow along perfectly.

[@beatrizecaraballo]

I'm so happy to hear that! You're most welcome 🙌

[@EpartnersMarketing]

Thanks so much for sharing this tutorial! It was very easy to follow. Enjoyed the blog post too. Your website is really good!!

[@beatrizecaraballo]

It's my pleasure! I'm happy to know you liked both the content and my site. I really appreciate the love 🙌

[@jacksonparkerstewart7835]

This was such a great tutorial! Quick Q - how would you take out the bounce/sliding from top effect and instead just have the words flash in? Is this a simple tweak in the code? Thanks!

[@beatrizecaraballo]

Thanks so much! I'm glad you liked it. And that's a great question, you can absolutely do that. You'll need to: 1. Modify the original CodePen CSS code and remove aaaaaall the instances of the transform property (both with and without the -moz-, -webkit- and other prefixes) from every single @keyframes snippet. 2. Look for the top offset property inside the .sp-headline.slide b { } snippet and set it to 0 instead of .2em. 3. Adjust the padding: 15px included in the post code: www.beatrizcaraballo.com/blog/looping-rotating-words-heading-squarespace as needed, if applicable. Hope that helps!

[@oneninedesign]

Tremendous tips as usual!!! Thank you!

[@beatrizecaraballo]

Thanks so much Andrea! I appreciate that. I'm glad you found this helpful ☺

[@govbradford]

Excellent lesson!!

[@beatrizecaraballo]

I appreciate that, thank you!

[@govbradford]

You're my new favorite resource for special CSS! @@beatrizecaraballo

[@beatrizecaraballo]

That's really kind of you! Thank you!

[@govbradford]

Hi B. I used this but am having a issue with my works getting cut off. At around 8:30 in your vid you mention it but don't show the fix. If I am having that issue is there a remedy?@@beatrizecaraballo

[@beatrizecaraballo]

Heya! In the tutorial I simply had to refresh the page to fix the glitch since that's what it was. However, if you've done that and still have the issue, you may need to stretch out the block inside the editor to allow more room for the words to sit in. If that still doesn't work, there may be something else going on. Feel free to send over a link to your page to [e-mail] (with the trial password if the site isn't live) so I can take a look and let you know what could be done!

[@peterclamp5781]

Excellent video - so helpful and relatively simple! I love this effect, and want to add it in multiple places... However in some places it needs to be left aligned and in other places centre aligned... is this possible? I see you can change the fonts per code box, but the alignment all happens in the global coding? Hopefully there is a way to do this!

[@beatrizecaraballo]

Thanks so much! I appreciate that. And that's a great question. You can totally make that happen fairly easily. You can add an extra class of your choice to the headings that you want to align differently, to counteract the alignment set through the global CSS. If you're working with an h4, for example, instead of the original structure that only has 2 clases: You can add a third one that can be called anything you want. I'll just call it sp-headline-left: Then, inside the Custom CSS Window, you can target the headings that have that class and change the alignment: .sp-headline.sp-headline-left { text-align: left; } And of course, you can use the exact same method if you want to center-align the blocks instead, and keep the left alignment global. Just modify the name of your class and/or the value of the text-align property accordingly. Hope that helps!

[@TheRealRyanMickens]

Hey Beatriz! This code is amazing, appreciate the vid! Is there any way to make the whole entire line shift to the center of the page on desktop, when the words are shorter? For instance, I have written: - For Brand Activations - For Expos But on the "For Expos", I'd like that centered in the middle, instead of off to the left

[@beatrizecaraballo]

Hey Ryan! Thanks so much 🙌 From what you're describing, you'll most likely need to make a small adjustment to the HTML portion of your code, so that the distance between the fixed and looping words change based on the width of the latter. In general, the modification depends on a few factors so I need to see the structure before being able to point you in the right direction. Feel free to send over a link to your site by getting in touch through beatrizcaraballo.com/contact, so I can take a look!

[@TheRealRyanMickens]

@@beatrizecaraballo hey Beatriz 👋, Thanks for replying so quickly! I'll send it over through your contact form right now

[@michaelstartzman5122]

Hello, and thank you so much for this fantastic tutorial! I have it working flawlessly! Would you be willing to help me figure out how to make the rotating text "scalable" - that newish feature on SQSP that adjusts the text based on the word size? In any case, I've subscribed to your channel and have bookmarked your website! Thank you again for all the amazing SQSP customizations!

[@beatrizecaraballo]

Hey Michael! I'm happy to hear you found the tutorial helpful and thanks so much for the support, I really appreciate it 🙌. That's a really great question, I love the idea. I'll look into it and see if I can cover it in an upcoming vid! In the meantime, you can check out this tutorial on creating "responsive" text with the clamp() function: kzbin.info/www/bejne/h6u1eItom7WrfMUsi=MQLKWc2gei88omx-

[@michaelstartzman5122]

@@beatrizecaraballo My absolute pleasure! Thank you for the quick reply and helpful link! I'm watching so many of your videos and learning so much!

[@thearistrag]

great help, thank you!

[@beatrizecaraballo]

My pleasure! 🙌

[@rsvpevents6780]

this is so amazing. Thank you!!!

[@beatrizecaraballo]

Thank you! It's my pleasure 🙌

[@nybcp]

Wauw the only real tutorial out there that is actually helping me out !!! One question though... I get how to change the color of the rotating words, but not the fixed part of the sentence. I want my text to be white. (the rotating word are already white)

[@nybcp]

...ok one more thingy 🫣 I have 2 lines of alternating text, so I simply made another code block and entered the HTML code and edited the words. It works (apart from getting them all to be white text) the only thing is I would love for them to have their own timing. So I would like to rotate the bottom text (code block) to animate just about 500ms slower than the top code block/text) Is there a way to edit something in the JS File (code injection to do this) Sorry I am a coding noob, apart from your tutorial I have never worked with css etc. ( i am already really proud to have made this work #greattutorial)

[@nybcp]

Ok I also managed to get the beginning text white... (h1 { color: WHITE; } The delayed timing on the second row is still mission impossible for me 😅

[@beatrizecaraballo]

​@@nybcp I'm thrilled to hear you've been able to get so far not having experience with code, that is AMAZING! 🎉 As far as modifying the timing, the problem is that you would need to 1st, differentiate the second row from the first one by using a different class inside the HTML structure of the Code Block, and 2nd modify the JS accordingly to match that new class to be able to have a separate delay applied to it. This would also involve adjusting the CSS accordingly to keep the necessary styles to the font, if you're controlling them through there. I'm afraid I can't provide support with that kind of changes through here but, if you're interested, feel free to send over a link to your site (and trial password) to [e-mail] so we can take it from there.

[@Mark-kn7zr]

Great video! Really useful! One problem, when I change the html code from h4 to h1, the text doesn't appear correctly and is no longer aligned. Any idea why this is happening? I just want a larger text.

[@simp4_jesus953]

I've been a developer for awhile now. You'll need to change any reference to the h4 in the other parts of the code as well, meaning the CSS and JS. If you just put all of the code into a text editor, hit CTRL or CMD and F, then just type h4, then replace all of those with h1. That should fix everything after you put the code back where it belongs. If you're going to edit a fair bit of code, I'd recommend Visual Studio Code or Sublime Text as a text editor for this particular purpose. Hope this helps!

[@hannahbeing487]

Thank you... Though I'm having issues writing the HTML. Is there an example of the code you wrote?

[@beatrizecaraballo]

You're welcome! You can see how I made small tweaks to the original Codepen HTML during this timestamp: 03:52 I hope that helps!

[@marcososa1986]

Thank you so much Beatriz! this was just what I was looking for :) BTW, when I click on the arrow on the upper right corner in the Squarespace editor, in order to see the full extent of the website, my words get cut off :/ . this only happens when I hit the arrow to extend the site to full view. Also, is there a way to use this same technique, but for a looping clicking button? it would be a mock button, since I'll be using a text box (or code box?) and just edit the CSS to make it look like a button.

[@beatrizecaraballo]

You're most welcome, Marco! I'm glad to hear it 🙌 If your text is getting cut off, the block may not be big enough, so you'll need to manually stretch it out inside the editor to make sure everything fits. I love the idea of the looping button! You could use the same HTML structure from the CodePen but remove the and lines that aren't needed. Then, you can style the entire .sp-intro container to make it look like a button! If you need more help with the cut-off issue or making the code adjustment for the looping button, feel free to send me an email at [e-mail] so I can see how I can help you!

[@MatthewChung-v3j]

Hey what do we do if the looping words are getting cut off horizintally (the whole word won't show)

[@beatrizecaraballo]

Great question! You have two options: 1. Extend the code block until the longest word fits fully. 2. Or, remove the line inside the CodePen code that says "white-space: nowrap;" That declaration forces the text to stay in one line. If you delete it, the text will be allowed to drop into a second line once it stops fitting the space. Hope that helps!

[@MatthewChung-v3j]

@@beatrizecaraballo Thanks! Any ideas why the code wouldn't be showing up on mobile at all?

[@tobywinn2255]

Thank you!

[@beatrizecaraballo]

You're most welcome!

[@raudhahrahman4056]

Hi there! Thank you so much for this. I was able to follow along so easily :) When you get a chance, could you let me know why the bottom of the y is a bit cut off and the text is getting cut off?

[@beatrizecaraballo]

Hey Raudhah! I'm happy to hear you found the tutorial easy to follow! Usually that happens when the container holding the text is not big enough, but there could be other factors involved depending on how you have things set up. Assuming you're working in 7.1 with Fluid Engine, try expanding the block inside the editor to see if that helps the cut off. If not, you may need to add padding via CSS to the looping words like so: .sp-headline.slide .sp-words-wrapper { padding-right: 20px; } And if that doesn't help either, I'll need to see the site to check what's going on. Feel free to send a link (and the password if it's a trial site) to [e-mail] so I can take a look!

[@raudhahrahman4056]

@@beatrizecaraballo thank you so much for this! I tried both of these options but neither worked. I will send you a link soon, appreciate you!

[@RealRyanDeLuca]

What is that little piece of code you pasted into the header section of the Code Injection? It doesn't appear there in my version of Squarespace. And it's too small for me to read it off of your video.

[@beatrizecaraballo]

That's the jQuery library! You can grab it from the code section at the end of the blog post: www.beatrizcaraballo.com/blog/looping-rotating-words-heading-squarespace

[@RealRyanDeLuca]

@@beatrizecaraballo Ah I see it now... Thank you!

[@designsbybrook]

Instantly followed when I saw the cat trees. ;)

[@beatrizecaraballo]

Lol! Thank you! We appreciate your support 😸

[@oksanapavlowsky8676]

This is amazing, I never coded in my life and figured it out with your tutorial!! One question: I have more text after the rotating words and I can't figure out how to decrease spacing between the rotating words and the following words. When the text wraps, the distance between the lines is off. Thank you!

[@beatrizecaraballo]

Thank you! I'm happy to hear you were able to follow along! 🙌 To avoid big gaps between the rotating words and the following static ones, you'll need to modify your HTML to make sure that the static words are part of the same heading type, like this: Specializing in Squarespace websites Shopify stores Skyward forms much more! YOUR POST-LOOPING PHRASE GOES HERE Hope that helps!

[@Saltandstarsxvanessa]

Hi! Where is the script CSS that you added to the footer? Am I just not seeing it?

[@beatrizecaraballo]

Hey Vanessa! You can find the link to Ken's code at the end of the post, as well as the additional snippets implemented: www.beatrizcaraballo.com/blog/looping-rotating-words-heading-squarespace Hope this helps!

[@marco-sosa]

Thank you Bea! This works so well on my trial version website. Is there a way to do this without the code injection? like just with CSS? The personal plan on squarespace doesnt allow code injection.

[@beatrizecaraballo]

My pleasure, Marco! 🙌 I'm thrilled to hear that works for you. If you want to use only CSS, you'll need a slightly different approach. The problem is that it needs manual calculation in terms of the animation itself if you'll be using a different number of words than the original code provides, or if you want to modify the timing. This is a good tutorial you can follow to try it out: tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/ And if you need more support with this, don't hesitate to reach out via email at [e-mail] with a link to the site so I can see how I can help!

[@marco-sosa]

@@beatrizecaraballo Thank you so much! Im going to try out the tutorial :)

[@marco-sosa]

@@beatrizecaraballo Thank you for the link! I found this other link on youtube, he just uses CSS with a delay trick. It works like a charm in squarespace: kzbin.info/www/bejne/nGHUiWCioNBrj5o

[@morganseel]

Hi Beatriz! I've got everything (almost setup perfectly). My rotating word is on a single line and when I add padding to the bottom to prevent letters from being cut off, it has the side effect of bumping the word too high out of alignment with the rest of the sentence. Is there a way to remedy this?

[@beatrizecaraballo]

Hey Morgan! Depending on how things are set up inside the Code Block, if instead of adding padding to the rotating words you alter the original line-height of 46px under the snippet that reads: .sp-intro h4, .sp-intro b, .sp-intro i, .sp-intro p, .sp-intro span {...........} You'll be able to add an equal amount of space at the top and bottom of your words, on both the static and looping areas. I'm afraid I can't quite offer more advice without seeing the way things are laid out so, if that doesn't work, feel free to send over a link to your site to [e-mail] If it's not live yet, set it to Password protected under Settings > Website > Site Availability > Password Protected and share the password you create in the same email so I can check things out!

[@amandahendy]

How do you remove the line break between the static text and the moving text?

[@beatrizecaraballo]

Hey Amanda! If you use the HTML and CSS portions of the CodePen as is, both things should sit in the same line. However, keep in mind this may change if the width of the block isn't big enough to hold both things next to each other, or if there's additional code changing the original setup. I'm happy to check out what may be going on, but I have to see the site in order to do so. Feel free to send over a link to it to [e-mail] if you'd like me to take a closer look!

[@VirginiaJenkins-ee2mc]

Hello! This tutorial has been a great help. I am having an issue where the text is wrapping, but instead of the end of the changing words wrapping and dropping down to another line, it is pushing down the rest of the sentence with it (I don't know if that's making sense?).

[@beatrizecaraballo]

Heya! I'm happy to hear that! 🙌 And I believe I understand what's happening. You may want to try using the HTML restructuring I suggested to another commenter here (oksanapavlowsky8676) to see if that helps! If that doesn't do it, feel free to send over a link to your site to [e-mail] along with the trial password (if the site isn't live yet) so I can take a look at your particular case.

[@VirginiaJenkins-ee2mc]

@@beatrizecaraballo Thank you for your reply! I was able to make a chanage to align the text to the top rather than the bottom of the line. That made it so that the whole sentence isn't dropping down. However, the words all stay grouped in a box together rather than filling out the sentence and then dropping down to the start of the next line. I don't know if there's a way to fix that part. I will send along the site link for you to take a look. Thank you so much!

[@ThePoisonedArtist]

Hi there! Did you ever find out how to fix this issue? I'm facing the same thing, my longer text is getting crammed on multiple short lines instead of just pushing the remaining words on a second line... EDIT because I found the solution; the other lines will follow the first line you put in, so if your first line was only 2 words, the other lines will get cut off every two words. Use the longest line you have as your first line that will loop

[@jawadiqbal7457]

Hello! Thank you for the great tutorial. I have a question Can we add different url to each word? I have tried this code MEDIA MARKETING ENTERTAINMENT But all the words leads to entertainment page on click

[@beatrizecaraballo]

Heya! Oh, this is a great question. I love the idea! Setting a z-index for the VISIBLE word by modifying this existing snippet should do the trick: .sp-words-wrapper b.is-visible { position: relative; z-index: 5; } Hope that helps!

[@TheoGraham-y8o]

Hi Bea! Thanks for the great tutorial. One question: I'm able to edit the line-height for the span element successfully, but not the scrolling b element. This is causing the text to have different line heights. Is there a way to edit the line height for the b element? Thanks again!

[@TheoGraham-y8o]

Nevermind! It's just a weird way its rendering in the site editor.

[@NickSteinCC]

Great video, thanks! How can I keep the animation infinitely cycling smoothly? Currently, when it's cycled through all the words, the animation stops and restarts, which causes content to move on the page at the end of each loop.

[@beatrizecaraballo]

You're most welcome, Nick! From what you're describing it sounds like there may be an empty element inside the HTML. Make sure that there's text in all of them and remove the ones you don't need to avoid any jumps in the section's height! Hope that helps! If you still need support with this, don't hesitate to reach out at [e-mail]

[@mcflymedia]

If I am on a business plan, is there any reason the JS wouldn't be working? It doesn't animate even with the code injection first step...

[@beatrizecaraballo]

For this specific customization, you'll need to make sure to have all 3 parts of the code in place so that the whole effect is visible! Check that the HTML, JS and CSS are all present. If it's still not working, feel free to send me an email at [e-mail] so I can take a closer look!

[@manuelsaballa]

Thanks , this is super helpful

[@beatrizecaraballo]

I'm glad to hear it! You're welcome 🙌

[@dennislangenbach4386]

Great video, thank you so much! I have one question though. I want the looping text to be in the middle of a sentence. I was able to simple add text behind it, but the text after the looping words doesn't move along with the looping words. So if there is a shorter word there is a bigger gap after. Would you know how I can fix this? I would love to know. And again, great video. It helped me out a lot! :)

[@beatrizecaraballo]

Heya! I'm thrilled to hear you found my vid helpful! Unfortunately, the way that effect works doesn't really allow for the browser to calculate when words are shorter or longer. You could consider one of two routes: 1. Adding a right after the looping words so that the rest of your phrase sits in the next line. 2. Using a different effect to change the words. I have a tutorial on creating a typewriter effect that does take into consideration the space the switching words or phrases occupy, so it may be a solution for your project! kzbin.info/www/bejne/mn_JiXiulsqMaq8 Hope this helps!

[@TheoGraham-y8o]

Is there a way to edit the code so that the animation stops rotating on the last word? Thanks!

[@beatrizecaraballo]

Hey Theo! There's most likely a way to do that but it requires tinkering with the original animation so I'd recommend getting in touch with the code's developer to get that sorted out!

[@dylansimmons8380]

Thanks for this tutorial! I just sent you an email because I'm still having some issues with my code, including the text getting cut off.

[@beatrizecaraballo]

You're most welcome! I replied to your email earlier 🙌

[@JHoops-qj9gs]

Thanks so much for this code! I'm having a small problem with it though - I've aligned mine to the center yet when the words are rotating, they glitch left briefly before dissappearing. Do you have a fix for this please?

[@beatrizecaraballo]

You're most welcome! ☺ I'd need to see how the text is being aligned and what the problem looks like in order to check what's going on and provide a possible fix. Feel free to send over a link to your page to [e-mail] so I can take a closer look!

[@Anthony-yi9pl]

@@beatrizecaraballothis tutorial was amazing, but I'm having the same exact issue. What was the fix?

[@beatrizecaraballo]

Thank you! And I don't believe I got a link to that site so I haven't been able to inspect the issue. You can go ahead and send yours to that same email so I can take a look! Please make sure to include the password if it's a trial site.

[@KMHFC]

@@beatrizecaraballo Great tutorial! I am having the exact same issue. Do you maybe know how to fix it? Or can I send you my page if the commenters above didn't send theirs? Thank you!

[@KMHFC]

@@beatrizecaraballo Also, I have one-word and two-word elements rotating. The two-word elements seem perfectly centered, but the one-word ones are not. Do you know what could cause this? Thanks

[@MadisonTerry-t8e]

Thank you so much for this! How do I make it so the loop word is in line with the rest of the sentence? It automatically breaks to a new line on mine

[@beatrizecaraballo]

You're most welcome! To have the looping word in line with the text, you'll need to make sure your block is wide enough for everything to fit. You may also want to modify the vertical-align: bottom value in this part of the CSS: .sp-headline.slide .sp-words-wrapper { overflow: hidden; vertical-align: bottom; } to either "middle" or "top" if your text looks vertically misaligned. Hope this helps!

[@AmyKrasin]

I am aiming to keep the last word in the heading constant while having the first words loop. How should I approach this?

[@beatrizecaraballo]

You can simply change things up inside your HTML structure to place the text in the order you want it, and wrap the corresponding part inside the "looping container". For example, you can do something like this: First word Second word Third word Fourth word YOUR POST-LOOPING STATIC WORD(S) GO HERE Hope that helps!

[@AmyKrasin]

Thank you - this works great!@@beatrizecaraballo

[@beatrizecaraballo]

I'm glad to hear it 🙌. It's my pleasure.

[@maXimum847]

Thanks for this great tutorial and code example. My text gets cut off at the bottom for letters like p and g. How can I fix this?

[@maXimum847]

Solved it! :D Just had to make the line height bigger

[@beatrizecaraballo]

Awesome!! 💪 I'm thrilled to hear you were able to fix the issue, that's the perfect solution so thanks for sharing it!

[@karamears3527]

When I go to put in the custom code injection, the code itself shows on my header and footer, respectively. What am I missing?

[@beatrizecaraballo]

It depends on which part of the code you're pasting in there! The script parts can go as is. The HTML needs to go inside a Code Block on the page. And the CSS can go as is inside the Custom CSS Window OR, wrapped within tags inside a Code Injection Section. This last route would look like this: //CSS for the looping words goes here Hope this helps!

[@karamears3527]

I put everything in the section it said to put it in but it shows in the header and footer… ? Do I need to add the last part (third code block) for it to disappear?

[@beatrizecaraballo]

Gotcha! Perhaps there's a missing tag somewhere, so double-check that everything has its corresponding tags ( and ) - including any other plugin that may already be in place. The code shouldn't show anywhere on the screen, regardless of if you've added all the different snippets or not. I'm happy to look into the issue further to see how I can help! Feel free to send over a link to your site and the trial password to [e-mail]

[@karamears3527]

@@beatrizecaraballo I'm trying but not succeeding. Sending you an email now. Thank you!

[@MeganMarieSinger]

I tried to make a modification where it's one word within a sentence that scrolls like: From (scrolling word) To Relief. But the scrolling word ends up above the From To Relief...any tips?

[@beatrizecaraballo]

Hey Megan! Saw your email today and replied back, hope my answer helps 😊

[@yoa333]

Can this work for a website built on Hostinger?

[@beatrizecaraballo]

No part of the code is associated to Squarespace elements, so as long as you're able to add HTML, CSS and JS to your site, you should be able to use it!

[@nataliamartinez6586]

What can one do if the code stops looping and appears in the footer? I tested implementing the source code again and it doesn't work.

[@beatrizecaraballo]

Hey Natalia! If the code appears in the footer, there's likely a problem with the HTML tags added to the Code Injection section, so definitely double-check that. Since I don't know how/where all the parts of the code have been implemented, I'm afraid that without being able to see the problem I can't give you a clearer answer. Feel free to send a link to the site via email at [e-mail] so I can take a look and point you in the right direction.

[@RealRyanDeLuca]

You make this look so easy but my gosh, I am struggling to make it work.

[@beatrizecaraballo]

Oh, I'm sorry to hear that! Feel free to send over a link to the site you're working on (and trial password if not live) to [e-mail] and I'll point you in the right direction!