Need help adding a typing-text animation to my portfolio site

Hi all!

I'm new to SquareSpace and I'm currently trying to edit the header text on the homepage of my portfolio. Someone else posted a related question and they referred to the animation at the top of this website: https://www.innovativeink.ca/ which is exactly what I'm going for.

I found this animation code: https://codepen.io/arbak/details/MWaqPJK which is perfect! However, after adding in all the HTML, CSS, and Javascript, I still don't see the typing-text animation. All I see is the non-typing text portion (the first half of the sentence). I'd love some advice on what I can do to make this work! This is the entire code here:
 

HTML (Insert into code block on page)

HTML CSS JSResult
<div class="container">
  <h1>
    &samhoud | 
    <!-- The words that we want to have typerwriter effect -->
    <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></span>
  </h1>
</div>



Resources1×0.5×0.25×Rerun

CSS (Insert into Custom CSS)

/* CSS RESET */
* {
  margin: 0;
  padding: 0;
  /* Set background and text color */
  background-color: #424242;
  color: #fff;
  font-family:Helvetica;
  font-weight:normal
    
}

/* ALIGN CONTENT */
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  /* Remove horizontal 'justify-content' center if you want the base text not to move */
  justify-content: center;
  align-items: center;
}

/* ADD CURSOR */
.txt-type > .txt {
  border-right: 0.08rem solid #fff;
  padding-right: 2px;
  /* Animating the cursor */
  animation: blink 0.6s infinite;
}

/* ANIMATION */
@keyframes blink {
  0% {
    border-right: 0.08rem solid rgba(255, 255, 255, 1);
  }
  100% {
    border-right: 0.08rem solid rgba(255, 255, 255, 0.2);
  }
}

JavaScript (Insert into Code Injection)

class TypeWriter {
  constructor(txtElement, words, wait = 3000) {
    this.txtElement = txtElement;
    this.words = words;
    this.txt = "";
    this.wordIndex = 0;
    this.wait = parseInt(wait, 10);
    this.type();
    this.isDeleting = false;
  }

  type() {
    // Current index of word
    const current = this.wordIndex % this.words.length;
    // Get full text of current word
    const fullTxt = this.words[current];

    // Check if deleting
    if (this.isDeleting) {
      // Remove characters
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      // Add charaters
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }

    // Insert txt into element
    this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

    // Initial Type Speed
    let typeSpeed = 50;

    if (this.isDeleting) {
      // Increase speed by half when deleting
      typeSpeed /= 2;
    }

    // If word is complete
    if (!this.isDeleting && this.txt === fullTxt) {
      // Make pause at end
      typeSpeed = this.wait;
      // Set delete to true
      this.isDeleting = true;
    } else if (this.isDeleting && this.txt === "") {
      this.isDeleting = false;
      // Move to next word
      this.wordIndex++;
      // Pause before start typing
      typeSpeed = 500;
    }

    setTimeout(() => this.type(), typeSpeed);
  }
}

// Init On DOM Load
document.addEventListener("DOMContentLoaded", init);

// Init App
function init() {
  const txtElement = document.querySelector(".txt-type");
  const words = JSON.parse(txtElement.getAttribute("data-words"));
  const wait = txtElement.getAttribute("data-wait");
  // Init TypeWriter
  new TypeWriter(txtElement, words, wait);
}

Please share your current site url so we can help checking

Hi @bangank36, the url is https://queenie-dang.squarespace.com/ - thanks!

5 minutes ago, daangqueenie said:

Hi @bangank36, the url is https://queenie-dang.squarespace.com/ - thanks!

and password too

Oh I'm so sorry, password is 1234

1 minute ago, bangank36 said:

and password too

Oh I'm so sorry, password is 1234 

7 minutes ago, daangqueenie said:

Oh I'm so sorry, password is 1234 

Wrap your script code inside

<script></script>

2 minutes ago, bangank36 said:

Wrap your script code inside

<script></script>

Hmm, sorry I'm not much of a coder - where exactly do I put the<script> and </script>? It's a bit hard to see from that screen shot

<script>
	class TypeWriter {
      constructor(txtElement, words, wait = 3000) {
        this.txtElement = txtElement;
        this.words = words;
        this.txt = "";
        this.wordIndex = 0;
        this.wait = parseInt(wait, 10);
        this.type();
        this.isDeleting = false;
      }

      type() {
        // Current index of word
        const current = this.wordIndex % this.words.length;
        // Get full text of current word
        const fullTxt = this.words[current];

        // Check if deleting
        if (this.isDeleting) {
          // Remove characters
          this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
          // Add charaters
          this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        // Insert txt into element
        this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

        // Initial Type Speed
        let typeSpeed = 50;

        if (this.isDeleting) {
          // Increase speed by half when deleting
          typeSpeed /= 2;
        }

        // If word is complete
        if (!this.isDeleting && this.txt === fullTxt) {
          // Make pause at end
          typeSpeed = this.wait;
          // Set delete to true
          this.isDeleting = true;
        } else if (this.isDeleting && this.txt === "") {
          this.isDeleting = false;
          // Move to next word
          this.wordIndex++;
          // Pause before start typing
          typeSpeed = 500;
        }

        setTimeout(() => this.type(), typeSpeed);
      }
    }

    // Init On DOM Load
    document.addEventListener("DOMContentLoaded", init);

    // Init App
    function init() {
      const txtElement = document.querySelector(".txt-type");
      const words = JSON.parse(txtElement.getAttribute("data-words"));
      const wait = txtElement.getAttribute("data-wait");
      // Init TypeWriter
      new TypeWriter(txtElement, words, wait);
    }
</script>

Oh amazing!! It works perfectly! Thank you so much @bangank36.

I also realized that the word "wait" on the last line was cut off. Thanks again 🙂

I advise that even as you are running at the page and need to hold it enabled, pass it to the unlinked segment of your internet site and spot if that works for you.