Fix typing animation code

This is the code I have but I need to fix the issue happening with the animation (editing page). I want it to look like it is being typed out. I also need to fix the spacing between the lines so it is normal. I then want to apply this fixed CSS to the heading text on the writing and art pages. Thanks!

URL: emmahearnes.com
 

/* Set up the initial state of the text */
.typed-text {
  overflow: hidden; /* Hide overflowing text */
  white-space: wrap; /* Prevent line breaks */
  width: 0; /* Start with zero width */
}

/* Define the typing animation */
@keyframes typing {
  from {
    width: 0; /* Start with zero width */
  }
  to {
    width: 100%; /* Gradually increase width to show full text */
  }
}

/* Apply the typing animation to the text */
.typed-text.animate {
  animation: typing 3.5s steps(40); /* Adjust animation duration as needed */
}
.typeit {font-family:'Common';
  overflow: hidden; 
  font-size:70px; /* this can be any font size you want */

  border-right: 2px solid #50bdb8; /* change this color in the keyframe too */

  white-space:wrap; 
  margin:1 auto; 
  animation: 
    typeit 3.5s steps(40, end),
    right-border .5s step-end infinite;
}

@keyframes typeit {  
from { width: 0 }
to { width: 100% }
}

@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #50bdb8; /* change this in the CSS above too */ }
}

Where did  you get the code?

12 hours ago, Ziggy said:

Where did  you get the code?

https://insidethesquare.co/squarespace-tutorials/typing-text

@ejh The animation code you're trying to add doesn't work very well on Fluid engine. Here's a customized solution I created that might work for you. 

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

<h1>
  emma can be found<br>
  <span class="typewriter"></span>
</h1>

2. 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: ['editing', 'writing', 'or painting'],
      typeSpeed: 120,
      loop: true
    });
</script>

3. Since your texts are right aligned, you can add this code under Website > Website Tools > Custom CSS

section[data-section-id="64aa39b78a47db6a5eef808e"] h1 {
  text-align: right;
}

On 8/16/2023 at 9:53 AM, Lesum said:

 

@ejh The animation code you're trying to add doesn't work very well on Fluid engine. Here's a customized solution I created that might work for you. 

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

<h1>
  emma can be found<br>
  <span class="typewriter"></span>
</h1>

2. 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: ['editing', 'writing', 'or painting'],
      typeSpeed: 120,
      loop: true
    });
</script>

3. Since your texts are right aligned, you can add this code under Website > Website Tools > Custom CSS

section[data-section-id="64aa39b78a47db6a5eef808e"] h1 {
  text-align: right;
}

Thank you so much. Unfortunately, I don't have a Squarespace business account so it won't allow me to do code injection. Is there a solution just using CSS?

Definitely will buy you a coffee. Been trying to figure this out for ages!

@ejh Just a quick heads-up – could you pinpoint the exact line of text on editing page you're planning to animate with the typewriter animation? I'll create a custom CSS solution for this, but I wanna make sure it's going to work on your site.

Quote

@Lesum

@LesumThe text I want to use the typing animation on is 'So your words need polishing...' (editing page)
'When properly fuelled by crispy m&ms, Emma can string a few words together.' (writing page)
And 'When she's not holding a pen, Emma can be found wielding a paintbrush.' (art page)

If you look at my website now (emmahearnes.com) you can see on the editing page the current issues with the CSS.

I want to make use of my custom font I have added to CSS (code below) in h1 size.
 

@font-face {

    font-family: 'Common';

       src: url('https://static1.squarespace.com/static/64aa41417398e76d5c249b09/t/64aa9028aa15cd74895a821b/1688899624415/Common.otf');

  }
h1, h2, h3, h4 {font-family: 'Common';}
 

Can't thank you enough!

@ejh Use this

@font-face {
    font-family: 'Common';
    src: url('https://static1.squarespace.com/static/64aa41417398e76d5c249b09/t/64aa9028aa15cd74895a821b/1688899624415/Common.otf');
}

h1, h2, h3, h4, h1 *, h2 *, h3 *, h4 *, .typeit, .typeit * {
    font-family: 'Common' !important;
}

16 hours ago, tuanphan said:

@ejh Use this

@font-face {
    font-family: 'Common';
    src: url('https://static1.squarespace.com/static/64aa41417398e76d5c249b09/t/64aa9028aa15cd74895a821b/1688899624415/Common.otf');
}

h1, h2, h3, h4, h1 *, h2 *, h3 *, h4 *, .typeit, .typeit * {
    font-family: 'Common' !important;
}

 

This isn't achieving the typing animation when I put it in the Custom CSS. Is there a particular way I should be doing it?

On 8/24/2023 at 8:14 AM, ejh said:

This isn't achieving the typing animation when I put it in the Custom CSS. Is there a particular way I should be doing it?

This code to change font, not achieve typing animation. You have problem with font or?

On 8/26/2023 at 7:46 PM, tuanphan said:

This code to change font, not achieve typing animation. You have problem with font or?

No problem with font. I just need code to create the typing animation and was adding my font use as additional information

Tried another set of code from https://www.thesquaregenius.com/squarespace-tips/creating-a-typewriter-text-effect-for-squarespace-websites. (option 2) But still having issues as you can see on editing page of emmahearnes.com

Does anyone have solutions? @tuanphan @Lesum @Ziggy

.typeit {

 overflow: hidden; 

 font-size: 60px; /* change to any font size you want */

 border-right: 2px solid #ffffff; /* change in the keyframe too below */

 margin: 0 auto; 

 animation: 

 typeit 3.5s steps(40, end),

 right-border .5s step-end infinite;

}

@keyframes typeit {

 from { width: 0 }

 to { width: 100% }

}

@keyframes right-border {

 from, to { border-color: transparent }

 50% { border-color: #ffffff; /* change in the css above too */ }

}

Hi,

What is problem now? It looks fine to me

https://www.emmahearnes.com/

On 8/30/2023 at 12:04 PM, tuanphan said:

Hi,

What is problem now? It looks fine to me

https://www.emmahearnes.com/

I want it to look like it is being typed. As you can see the animation is not like that.
https://vimeo.com/860776131