Typing animation custom font

Hello, 

I wan to put an animation in that looks as if the words for a heading are being typed. Does anyone have the code for this? I've tried one I found on google but the spacing of the words is weird, it puts them on top of each other. 

Thanks for the help in advance!

Insert this into the CSS Panel:

/*CSS Written Text*
.statictext{
  color: white;
    font-size: 55px;
    padding: 15px;
    font-family: sans-serif;
}
.writtentext{
  color: white;
    border-right: 2px solid red;
    font-size: 55px;
    font-family: sans-serif;
    color: rgb(255, 30, 0);
}

/*END CSS Written Text*

Insert this into the Page Injection area of the Header:

/*Insert Into header - Written Text*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js" integrity="sha512-BdHyGtczsUoFcEma+MfXc71KJLv/cd+sUsUaYYf2mXpfG/PtBjNXsPo78+rxWjscxUYN2Qr2+DbeGGiJx81ifg==" crossorigin="anonymous"></script>

Insert this into a codeblock on the page where you would like the text to appear.  It's recommended that you use a Classic Editor Section instead of Fluid Engine:

<div class="statictext">I'm</div>
    <div class="writtentext"></div>

<script>
   var typing=new Typed(".writtentext", {
       strings: ["", "Youtuber", "Freelancer", "Graphics Designer", "Web Designer", "Web Developer"],
       typeSpeed: 100,
       backSpeed: 40,
       loop: true,
   });
</script>

I don't have Squarespace business. So I can only use CSS not the page injection 😞

On 8/15/2023 at 5:22 PM, ejh said:

I don't have Squarespace business. So I can only use CSS not the page injection 😞

With <script code, you try edit your Site Footer > Add a Markdown Block > then paste script code