Typewriter & delete effect? TypeIt or something similar

On 9/27/2020 at 5:16 AM, tuanphan said:

Can you share link to page where you inserted typewriter

Thanks!

https://grape-bobcat-8kb2.squarespace.com/config/pages 

PW trial

Also, is there a snippet for varying the font weight in the sentence?

On 9/27/2020 at 2:37 PM, martelil said:

Thanks!

https://grape-bobcat-8kb2.squarespace.com/config/pages 

PW trial

Also, is there a snippet for varying the font weight in the sentence?

Hi @tuanphan, have you had a chance to look at this? Thanks a lot!

On 8/5/2020 at 11:14 AM, tuanphan said:

Just solved for 3 members. Add all to Code Block

<div class="container">
  <h1>
    typewriter01 |
    <!-- 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>
<style>
/* CSS RESET */

/* ALIGN CONTENT */
.container {
  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);
  }
}
  #page .section-background {background: white;}
  #page section * {color: black !important;}
  #page .content {
    width: 100%;
}
</style>
<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>

Notes: Haven't tested with SS 7.0

On 4/4/2020 at 12:45 AM, tuanphan said:

Add to Code Block

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>
<script>
$('#ssforum).typeIt({
     strings: ["Small businesses.","Entrepreneurs.","Go-getters." ,"Visionaries." ,"Creatives."],
     speed: 150,
     breakLines: false,
     autoStart: false,
  loop: true,
  startDelay: 250,
  loopDelay: 750,
  startDelete: false,
});
</script>
<h1 id="ssforum" class="type2">
  <i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i>
  <span style="display:inline;position:relative;font:inherit;color:inherit;" class="ti-container">Small businesses</span>
  <span style="display: inline; position: relative; font: inherit; color: inherit; opacity: 0.993343;" class="ti-cursor">|</span>
</h1>

 

@tuanphanJust add these two to code blocks? Nothing to put into Code Injection or Custom CSS?

4 hours ago, Wanderdoll said:

Just add these two to code blocks? Nothing to put into Code Injection or Custom CSS?

Code blocks are just another place where CSS and Javascript can be stored. It just depends on the task at hand and how you want to organize your code.

I was able to use the code but my page is not full width, I took out the piece of code the previous person said but it did not work. Any suggestions?  

8 hours ago, virtuallyadventurous said:

I was able to use the code but my page is not full width, I took out the piece of code the previous person said but it did not work. Any suggestions?  

Can you share link to page where you inserted the code? We can check with fullwidth problem.

I was having a similar issue with full width page being changed to not be full width.

I changed the .container name and it fixed the issue.

Thanks @tuanphan for the great solution to the original question.

@tuanphan anyone have any luck with this? I have tried this and removed the section and it's also breaking the full-width background... Any help much appreciated! Link: www.amplifyvocalstudio.com/homenew

@tuanphan It is also breaking the full width background for the whole page now. Any way to fix this? Is there also a way to justify the text to center on mobile for the typewriter since it goes onto a second line of text? Thanks for your help!!

I've added the code to my homepage, and looks great but the cursor doesn't blink and the formatting is off on mobile. can you check it out? 

--> yolevski.com 

9 hours ago, yolevski said:

I've added the code to my homepage, and looks great but the cursor doesn't blink and the formatting is off on mobile. can you check it out? 

--> yolevski.com 

Hi
Please use this plugin to solve your problem!

Please use the like button if it helps you!

Best,
Leopold

@tuanphan — Thank you for this code! When I navigate away from the homepage, onto the contact page for instance, and back the script no longer runs. Here's my site: https://www.blackfishgoldstudios.com/

Is there something I need to be doing to manually re-load the page?

@BFGS

I'm thinking that Ajax Loading strikes again!

Please see Enable or disable Ajax.

Let us know how it goes.

Thanks -- this code is exactly what I needed. However,

• It broke my site width also, and removing the code suggested in this thread didn't help when I tried.
• It looks like the code makes the text flow beyond the width of the mobile view instead of wrap.

** UPDATED: BOTH SOLVED! All I had to do was delete .container under align content. Not sure what that did, but it did the job. 💯

A little help for those trying to add color / bold to their typewriter words, as well as how to add extra text around the typewriter text. Here is what I did (example code):

<div class="container">
    We partner with
    <!-- The words that we want to have typerwriter effect -->
   <b> <p1 style=color:#ffffff;><span class="txt-type" data-wait="3000" data-words='["unicorns", "clowns", "rainbows"]'></span></p1> </b>
  to make the world a better place.
</div>
<style>

Hey! So I just tried using these codes above. But it was affecting the site styles I set for my header text...

Can anyone tell me how to add the code without it messing up those font color site styles?

17 hours ago, katslocum said:

Hey! So I just tried using these codes above. But it was affecting the site styles I set for my header text...

Can anyone tell me how to add the code without it messing up those font color site styles?

On 4/25/2021 at 12:59 PM, niccosays said:

Thanks -- this code is exactly what I needed. However,

• It broke my site width also, and removing the code suggested in this thread didn't help when I tried.
• It looks like the code makes the text flow beyond the width of the mobile view instead of wrap.

** UPDATED: BOTH SOLVED! All I had to do was delete .container under align content. Not sure what that did, but it did the job. 💯

A little help for those trying to add color / bold to their typewriter words, as well as how to add extra text around the typewriter text. Here is what I did (example code):

<div class="container">
    We partner with
    <!-- The words that we want to have typerwriter effect -->
   <b> <p1 style=color:#ffffff;><span class="txt-type" data-wait="3000" data-words='["unicorns", "clowns", "rainbows"]'></span></p1> </b>
  to make the world a better place.
</div>
<style>

Can you share link to page where you use the code? We can check easier

On 3/18/2021 at 9:35 PM, creedon said:

@BFGS

I'm thinking that Ajax Loading strikes again!

Please see Enable or disable Ajax.

Let us know how it goes.

I have the same issue as @BFGS. And I try enable or disable Ajax which did not fix it. Any other suggestions? @tuanphan also thank you so much for this code, it works really well!

On 8/5/2020 at 5:14 PM, tuanphan said:

Just solved for 3 members. Add all to Code Block

<div class="container">
  <h1>
    typewriter01 |
    <!-- 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>
<style>
/* CSS RESET */

/* ALIGN CONTENT */
.container {
  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);
  }
}
  #page .section-background {background: white;}
  #page section * {color: black !important;}
  #page .content {
    width: 100%;
}
</style>
<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>

Notes: Haven't tested with SS 7.0

Hi @tuanphan thank you so much for providing this code. 
I am using it on a website I am building. It has worked very well on some of the pages like "who we are" or "what we do", but on the homepage it breaks the responsiveness of my site, making a lot of horizontal scroll appear.

The url is : https://brightness.squarespace.com/
Password : brightness

If you could take a look that would be very appreciated !

3 minutes ago, Deliciouss_Services said:

Hi @tuanphan thank you so much for providing this code. 
I am using it on a website I am building. It has worked very well on some of the pages like "who we are" or "what we do", but on the homepage it breaks the responsiveness of my site, making a lot of horizontal scroll appear.

The url is : https://brightness.squarespace.com/
Password : brightness

If you could take a look that would be very appreciated !

Think I found the solution. I removed this bit from the code and it seems to work fine now. Maybe an incompatibility with some other code I used on the page ? It was working fine until I added other plugins on my site.

Bit of code I removed : 
 

/* ALIGN CONTENT */

.container {

  display: flex;

  /* Remove horizontal 'justify-content' center if you want the base text not to move */

  justify-content: left;

  align-items: left;

}

For anyone who is still having trouble with the width of their site background/sections, just replace the class ID (

<div class="container">

with "typewriter", and under ALIGN CONTENT, change

.container {

to .typewriter. This should fix the issue. 

On 6/8/2021 at 3:38 PM, Deliciouss_Services said:

Think I found the solution. I removed this bit from the code and it seems to work fine now. Maybe an incompatibility with some other code I used on the page ? It was working fine until I added other plugins on my site.

 

Bit of code I removed : 
 

/* ALIGN CONTENT */

.container {

  display: flex;

  /* Remove horizontal 'justify-content' center if you want the base text not to move */

  justify-content: left;

  align-items: left;

}

SS has a class name: .container

So the typewriter .container conflict with SS .container.

The solution I usually use is to change .container to .t-container.

@tuanphanHey I'm just having an issue with this code pushing the rest of my site downwards. Is there any solution that would keep it from moving everything down? thanks.

17 hours ago, ezraez said:

@tuanphanHey I'm just having an issue with this code pushing the rest of my site downwards. Is there any solution that would keep it from moving everything down? thanks.

Hi
Please use this plugin to make it easy to build the typewriter!

Please use the like button if it helps you!

Best,
Leopold

@tuanphan my website is: https://ricardomusicstudio.com 

It works but its not centered and it moves my homepage image. I'd like the typewriter H1 titled to not move any other elements. Just for it to type my H1 and then restart like its doing. I'll also be copying and pasting this code for each H1 of every page but I assume your code solution will work for all. 

I used this Code: 

<div class="typewriter">
  <h1>
    <span class="txt-type" data-wait="3000" data-words='["Composer.", "Producer.", "Sound Designer."]'></span>
  </h1>
</div>
<style>
/* CSS RESET */

/* ALIGN CONTENT */
.typewriter {
  display: flex;
  align-items: center;
}

/* ADD CURSOR */
.txt-type > .txt {
  border-right: 0.08rem solid #fff;
  padding-right: 2px;
  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);
  }
}

</style>
<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>

7 hours ago, RicardoRMS said:

@tuanphan my website is: https://ricardomusicstudio.com 

It works but its not centered and it moves my homepage image. I'd like the typewriter H1 titled to not move any other elements. Just for it to type my H1 and then restart like its doing. I'll also be copying and pasting this code for each H1 of every page but I assume your code solution will work for all. 

I used this Code: 

<div class="typewriter">
  <h1>
    <span class="txt-type" data-wait="3000" data-words='["Composer.", "Producer.", "Sound Designer."]'></span>
  </h1>
</div>
<style>
/* CSS RESET */

/* ALIGN CONTENT */
.typewriter {
  display: flex;
  align-items: center;
}

/* ADD CURSOR */
.txt-type > .txt {
  border-right: 0.08rem solid #fff;
  padding-right: 2px;
  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);
  }
}

</style>
<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>

Add this to Design > Custom CSS

/* Typewriter height */
.typewriter {
    height: 50px !important;
}