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 🙂

@TrueNatureDreams Glad it worked. I sent you an email through your website. Thank you! 

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