Create a typewriter effect for headings in Squarespace (7.0, 7.1 CE & 7.1 FE) | Day 12 of 12DOC

[@beatrizecaraballo]

Hey everyone! Just leaving a quick note here to let you know that the code inside the post has been updated to work with the new version of the typed.js plugin as of June 2023! 🥳 www.beatrizcaraballo.com/blog/typewriting-effect-heading-squarespace

[@CloudjumperOfficial]

literally the only channel which actually works on me. I havent run one script of another one except of this. I dont know if thats a sign of my stupidity or ur genius and at this point i dont care :D

[@beatrizecaraballo]

Lol! I'm thrilled to hear you've found my content helpful 🙌 Code sometimes doesn't work because of small differences between the settings being used in the tutorial example vs. the ones used on the site that's being worked on. Plus, updates made by Squarespace to the backend can also affect how things work. So, don't beat yourself up! And, if you ever come across code that doesn't work, don't hesitate to ask the creator about it. It can be difficult to stay on top of all the snippets we've written so we appreciate it when our audience brings issues to our attention that we weren't aware of. Anywho, thanks again for your comment! 💕

[@biaalvarez]

Exactly what I needed ;] Thank you from a Beatriz to another

[@beatrizecaraballo]

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

[@MakeupByFavi_O]

Such a great tutorial! Worked perfectly for me

[@beatrizecaraballo]

So glad to hear it! 🙌

[@NorthWriter]

Great tutorial! Just added this to my own site. For anyone interested, with I added a to keep the cursor from going back up to the second line at the beginning of each word.

[@beatrizecaraballo]

Thank you and thanks for sharing that helpful tip! 🙌

[@candlelockett6468]

This worked perfectly! Thank you so much!

[@beatrizecaraballo]

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

[@sophiegale9947]

This is SO cool! Thank you so much for sharing this Beatriz 🥺 I would love to have this effect in two places on my site. The first instance works perfectly, but when I copy the code exactly (apart from the class which I updated to separate the two) and then copy the footer injection also, it doesn't work on the second instance at the bottom of my page. Do you know if there's anything obvious I'll be doing wrong? 🥺

[@sophiegale9947]

I've been trying to figure this out for hours and I knew as soon as I left this comment that it would work 🤣 Thank you again for such a great tutorial.

[@beatrizecaraballo]

Hey Sophie! I'm thrilled to hear you found the tutorial helpful. You're very welcome! And lol, that's how it always goes. Sometimes you just gotta freak out the code a little by putting it on the spot. Glad to hear everything worked out in the end 🙌 If anything else comes up, don't hesitate to reach out through beatrizcaraballo.com/contact so I can point you in the right direction!

[@jooper3545]

This doesn't seem to be working anymore. The coding on the github website is all different to what you copied and pasted

[@juliecronin2871]

yes, same for me as well!

[@beatrizecaraballo]

Thanks for letting me know! I've updated the code inside the post to reflect the change needed to work with the new version: www.beatrizcaraballo.com/blog/typewriting-effect-heading-squarespace Hope that helps! 🙌

[@tfp6031]

Such a good tutorial thank you so much! 💥

[@beatrizecaraballo]

Oh yay! I'm thrilled to hear you liked the tutorial. You're very welcome 🙌

[@CarmelloVision]

Hi! Thank you for sharing this! Love it. Quick question, is there a way to stop the continual content push that happens after each text is loaded? Is there a way to contain it from pushing other content like the background image and text below?

[@beatrizecaraballo]

Heya! You're most welcome, I'm glad you loved it 😊 There may be a way to stop the content push from happening by floating the entire code block inside the section, but that may create unwanted overlaps and reduce the height of the area significantly, depending on the settings you're using. You may want to try this other text effect to see if it works best for your project! kzbin.info/www/bejne/o3K1qIt8rK-gpNU If you still need help with this, feel free to send a link to the site you're working on to [e-mail] so I can check out what could be done!

[@CarmelloVision]

@@beatrizecaraballo thanks! Will def consider that other link for other things, appreciate it! :) I was actually able to figure it out somehow. I threw in a at the end, and have the line text appear under the title and it flows perfect!

[@beatrizecaraballo]

@@CarmelloVision oh that's fantastic! I'm glad you were able to solve the issue. Thanks so much for sharing what you did! I'm sure others will find the trick helpful 🙌

[@alextailordesign]

Hi Beatriz! Thank you so much for this brilliant tutorial. My desktop animation works perfectly, but when on mobile, I don't see anything appear where my code block is. How might I be able to troubleshoot this? Thanks in advance!

[@beatrizecaraballo]

Hey Alexandra! I'm glad to hear you found it helpful 🙌 As for your issue, is this happening on the live site (when logged out of Squarespace)? The code from the tutorial shouldn't affect the visibility on mobile screens so I'm thinking there may be something else causing the problem. If you like, you can send over a link to the specific page to my email - [e-mail] - so I can take a closer look and see what can be done!

[@sadiest.germain2292]

This worked great! Is there a way to center the content? Thanks so much!

[@beatrizecaraballo]

I'm glad to hear it 🙌 You can totally center the text by either targeting the block's ID and then the type of heading you're using (h1, h2, h3, etc), or by adding a class of your choice to the heading in your HTML (regardless of if you're using h1, h2, or something else) and then target that via CSS! In either case, you'll need to use text-align: center to center the whole thing. Using the second approach, your HMTL would look something like this: Nulla fascilis And your CSS would look like this: .my-typewriter-text { text-align: center; } Hope that helps!

[@sadiest.germain2292]

​@@beatrizecaraballo Amazing! Success! This wasn't working for me with just the "text-align: center;" ...but after some googling it worked when I added "display: block;" So it now looks like this: My HTML: 9 Years later... they are getting married My CSS: .my-typewriter-text { text-align: center; display: block; }

[@beatrizecaraballo]

Awesome! I'm thrilled to hear you got it working and thank you for sharing the CSS you ended up using, that'll be really helpful for anyone with the same goal! 🙌

[@DianaPepe-n9e]

This is amazing! thank you! what if i want to change the color? how do i do that in the code? THANKS IN ADVANCE

[@beatrizecaraballo]

I'm glad to hear it! You're most welcome 🙌 You can add a little bit of CSS to target the typed part with the class .typed-words, like so: .typed-words { color: red; } Hope that helps!

[@DianaPepe-n9e]

@@beatrizecaraballo i don't know anything about code. but so appreciate your response. i will try it and see. lol

[@ashleypillivant]

Thank you for this!! Very helpful. Is there a way to have the blinking cursor hidden once it's done typing the sentence? For example, I only have 3 words on one line, no additional sentences or loops. So it types those 3 words and then the cursor continues sitting there at the end blinking. Thank you in advance! :-)

[@beatrizecaraballo]

You're most welcome, and that is such a great question! YES! There is a way to make the cursor go away once it reaches the end of the entire group of words by making a small addition to the code. I went ahead and included that alternative version at the end of the post, so you can grab it from there: www.beatrizcaraballo.com/blog/typewriting-effect-heading-squarespace Hope that helps!

[@shiiftcreative3387]

Love this tutorial thank you. Is there a way to make it so the image doesn't jump with it?

[@beatrizecaraballo]

My pleasure! And that's a really good question. It depends on how you have the image and the rest of the content on that section set up, so unfortunately I don't have a straightforward answer for you. However, feel free to send me a link to your page to [e-mail] and I'll try to point you in the right direction.

[@shiiftcreative3387]

Thanks so much, i've pinged over an email! @@beatrizecaraballo

[@khanhnguyen-fj2zm]

Just added this to my own site and it looks amazing! Can I ask if there's a way to change the color of the typing text?

[@beatrizecaraballo]

I'm glad to hear that! And yes, you can totally change that with this: .typed-words { color: red; } Hope this helps!

[@vzqr9043]

@@beatrizecaraballo Hey, just added this to my page as well, and love it. But can't seem to figure out how I change color with this addition.

[@CarmelloVision]

@@vzqr9043 same question, thank you so much! I'm curious where we add as well. :)

[@angussimpson6499]

Hi, this worked a treat. For some reason the blinker stays black when the text has changed colour. Do you know how to target that & change the colour? Thank you @@beatrizecaraballo

[@beatrizecaraballo]

I'm glad to hear that! The .typed-words class only selects the changing words, but you can also target .typed-cursor to modify the color of the cursor separately! .typed-words { color: red; } .typed-cursor { color: blue; } Hope that helps!

[@christinetaylor8460]

i wish there was a way to do it without upgrading to get the code injection :(

[@beatrizecaraballo]

There's an alternative way to create a "rotating" words effect with pure CSS, but the animation is different. I'd still encourage you to check it out to see if that works for your site! www.primitusconsultancy.co.uk/blog/how-to-create-a-rotating-text-on-squarespace Hope that helps!