Animated type & delete typewriter text custom code

I'm looking to add a typewriter text animation that types a word, deletes and types another word, with the blinking cursor.

Here's an example of what I'm trying to achieve.www.prestonsmiles.com

I've tried an online tutorial - from Beatriz Caraballo, the effect is exactly what I want, but I can't get it to work.

I'm hitting a wall and hoping someone can help me.

Thank you!

Becs. 

Hi, I think I can help. I would need a few things to get this done.

1. First off, insert a code block where you would like the animation to display. Then inside the code block, add the words that you would like to display in the typewriter text animation.

2. Then if you can share your site url, I can write the code needed to implement the animation.

It'll require some javascript code. Let me know if I can help. Thanks!

Hi, thanks for responding here!

It's a client site so I can't share the URL here due to confidentiality. I can share my own website URL and set it up as a test page to try it out.

www.truenaturedreams.com

The text I'd like to appear is as follows:

BECOME A  'Student', 'Master', 'Light' OF THIS REALM

(words in quotes are the variable words I'd like to animate as typewriter text, delete and type the new word on an infinite loop)

Hope this makes sense.

Thanks again, Becs.

Thanks for all the info!

I created a demo site with the typewriter animation using the text you provided.

If you want, I can add you to this site. You can copy everything from the demo site to your site. Let me know. Thanks!

Hi Sam,

Thank you so much for your help and replying here.

I tried the code snippets you sent but unfortunately it's not working for me. There is no animated text appearing at all. 

Your demo site is exactly what I want to achieve.

If you can add me to your demo site that would be great - in case there's any CSS or something I've missed.

If I still can't get it to work do you have an email address to contact you directly with so that I can share my client's site but just in a less public forum due to confidentiality and also buy you a coffee to say thanks!

Thanks again, really appreciate your help.

Becs.

Please ignore my last reply - it is working!

I must have copied something incorrectly!

Thank you so much for your help.

I'm looking for someone who can help with code on my client's sites - would you or anyone you know be interested?

I've tried through Circle/99 Designs not yet found someone.

Thanks again 🙂

Hoping someone might be able to provide some troubleshooting relevant to this!

I'm running a version of Matt Boldt's Typed.js (modified from the code used in Beatriz Caraballo's excellent tutorial) that's working almost perfectly, save for one issue: on mobile only (both Chrome and Safari), the top of my blinking italicised cursor is cut off. When you highlight the cursor on desktop, you can see that the portion that's being cut off is falling outside of the highlighted area (in case this is relevant to the potential fix). 

Page URL: https://www.radicalhealing.ca/therapeuticapproach

Password: RH2024!

Code block:

<h2>
  <center>RADICAL HEALING IS RADICALLY
  <br><em><span class="typed-words"></span><br></em></center>
</h2>

Header code injection:

<script src="https://unpkg.com/typed.js@2.0.132/dist/typed.umd.js"></script>

Footer code injection:

<script>
  var options = {
    strings: ['ethical.', 'relational.', 'embodied.', 'anti-oppressive.', 'experiential.', 'intersectional.', 'empathic.', 'responsive.', 'co-creative.', 'anti-racist.', 'vulnerable.', 'powerful.', 'collective.', 'anti-colonial.', 'present.', 'grounded.', 'emergent.', 'attuned.', 'systemic.', 'fractal.', 'dialectical.', 'integrative.', 'trauma-informed.', 'acceptant.', 'inquisitive.', 'analytical.', 'synthetical.', 'emotional.', '(self-)compassionate.', 'accountable.', 'resonant.', 'loving.', 'whole.^3500'],
  typeSpeed: 70,
  backSpeed: 50,
  backDelay: 500,
  startDelay: 500,
  loop: true,
 
};

  var typed = new Typed('.typed-words', options);
</script>

*Edited to properly credit the original developer of the code.*

On 1/31/2024 at 7:44 AM, cat_not_kitty said:

Hoping someone might be able to provide some troubleshooting relevant to this!

I'm running a version of Matt Boldt's Typed.js (modified from the code used in Beatriz Caraballo's excellent tutorial) that's working almost perfectly, save for one issue: on mobile only (both Chrome and Safari), the top of my blinking italicised cursor is cut off. When you highlight the cursor on desktop, you can see that the portion that's being cut off is falling outside of the highlighted area (in case this is relevant to the potential fix). 

Page URL: https://www.radicalhealing.ca/therapeuticapproach

Password: RH2024!

Code block:

<h2>
  <center>RADICAL HEALING IS RADICALLY
  <br><em><span class="typed-words"></span><br></em></center>
</h2>

Header code injection:

<script src="https://unpkg.com/typed.js@2.0.132/dist/typed.umd.js"></script>

Footer code injection:

<script>
  var options = {
    strings: ['ethical.', 'relational.', 'embodied.', 'anti-oppressive.', 'experiential.', 'intersectional.', 'empathic.', 'responsive.', 'co-creative.', 'anti-racist.', 'vulnerable.', 'powerful.', 'collective.', 'anti-colonial.', 'present.', 'grounded.', 'emergent.', 'attuned.', 'systemic.', 'fractal.', 'dialectical.', 'integrative.', 'trauma-informed.', 'acceptant.', 'inquisitive.', 'analytical.', 'synthetical.', 'emotional.', '(self-)compassionate.', 'accountable.', 'resonant.', 'loving.', 'whole.^3500'],
  typeSpeed: 70,
  backSpeed: 50,
  backDelay: 500,
  startDelay: 500,
  loop: true,
 
};

  var typed = new Typed('.typed-words', options);
</script>

*Edited to properly credit the original developer of the code.*

It looks like you figured it out?

Hi tuanphan – thanks so much for checking in! Yes, I managed to hack a fix by targeting the cursor and adding a tiny bit of padding to the right of it. I added this to the CSS area (in addition to all of the above code) for any future readers:

/*Fixing cut off cursor on mobile */
span.typed-cursor {padding-right: 1px;}

On 8/12/2023 at 10:10 AM, Lesum said:

You can also try to add the code snippets I used:

1. First create a code block where you want to place the animation. Inside the code block, add the code below:

<h1>
  BECOME A <br>
  <span class="typewriter"></span><br>
  OF THIS REALM
</h1>

2. Then on your Squarespace dashboard, go to Settings > Developers Tools > Code Injection

Add this code under Header:

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

Then add this code under Footer:

<script>
    var typed = new Typed('.typewriter', {
      strings: ['Student', 'Master',  'Light'],
      typeSpeed: 120,
      loop: true
    });
</script>

Let me know if you face any issues. Thanks! 

@Lesum I just stumbled across this and it's fantastic! I'm wondering if you could happen to help me accomplish this same thing, but change (just) the color hex AND italicize the animated/type words?

Thanks!

On 4/12/2024 at 3:21 AM, smilebeard said:

 just stumbled across this and it's fantastic! I'm wondering if you could happen to help me accomplish this same thing, but change (just) the color hex AND italicize the animated/type words?

Thanks!

You can use this code to Website > Website Tools > Custom CSS

.typewriter, .typewriter * {
	font-style: italic !important;
	color: #f1f !important;
}

the code is so helpful. i'm wondering if it's possible to have more than 3 words in the typerwriter code, and if there is a way to center the words. i am looking to only have words in the typewriter format. i'd appreciate if the response can have the full code to enter in each section. thanks in advance! 

On 4/26/2024 at 6:27 AM, thecliniciansays said:

the code is so helpful. i'm wondering if it's possible to have more than 3 words in the typerwriter code, and if there is a way to center the words. i am looking to only have words in the typewriter format. i'd appreciate if the response can have the full code to enter in each section. thanks in advance! 

You can edit add word here

something like this

<script>
    var typed = new Typed('.typewriter', {
      strings: ['Student', 'Master',  'Light', 'Design', 'Copywriting'],
      typeSpeed: 120,
      loop: true
    });
</script>

With center, you can share link to page where you added effect, we can check easier

I'm hoping to implement a similar text animation on a client's website but she's not willing to upgrade to the site to be able to inject code into the header/footer. Does anyone have any suggestions for a workaround? I have considered making a GIF, but not sure if that will be as effective. 

On 6/30/2024 at 3:16 PM, lilmoe19 said:

I'm hoping to implement a similar text animation on a client's website but she's not willing to upgrade to the site to be able to inject code into the header/footer. Does anyone have any suggestions for a workaround? I have considered making a GIF, but not sure if that will be as effective. 

You can try adding code in step 2 to Markdown Block instead.

Hey there This thread has been so helpful. I have an additional request.

Is there a way to remove the cursor upon completion of the animation? I am not looping it. 

Thank you!

I found the solution

 onComplete: function(self) { self.cursor.remove() }

Now I have a new question...... What do the numbers refer to when adjusting type speed and start delay? (See my code below.) Is it milliseconds? is it fractional? Just curious here to help educate a client.

      typeSpeed: 75,
      backSpeed: 50,
      backDelay: 500,
      startDelay: 1000,

Hi There,

Re: Single row

I would like to implement a similar typewriter effect with 3 words, but have everything listed on the same row (instead of 2 rows). I would like one word to be fixed, that word is Let's. The other 3 words that follow will have the typewriter effect. I implemented the above code onto a test page of my site, but the fixed word Let's is on one row, and the typewriter effect words are on a row below, I would like this to be all on the same row so it's not stacked looking.

Re: Loop

I want the loop to end after one of the typewriter words has appeared. For example, the word I want the loop to end on is connect. I want the word connect to remain on the page and not disappear. I want the sequence to play the typewriter effect when a visitor lands on the page and then stop playing after the word connect appears.

Many Thanks

Tina