Typewriter & delete effect? TypeIt or something similar

martelil · September 27, 2020

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?

Edited September 28, 2020 by martelil

martelil · October 2, 2020

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!

Wanderdoll · October 10, 2020

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?

creedon · October 10, 2020

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.

virtuallyadventurous · October 26, 2020

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?

tuanphan · October 27, 2020

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.

lcoon · October 27, 2020

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.

pgcreativedesigns · December 20, 2020

@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

pgcreativedesigns · December 20, 2020

@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!!

yolevski · December 22, 2020

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

IXStudio · December 23, 2020

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

BFGS · March 19, 2021

@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?

creedon · March 19, 2021

@BFGS

I'm thinking that Ajax Loading strikes again!

Please see Enable or disable Ajax.

Let us know how it goes.

niccosays · April 25, 2021

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

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

Edited April 25, 2021 by niccosays

katslocum · May 13, 2021

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?

tuanphan · May 14, 2021

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

<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

FionaFong · May 16, 2021

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!

Edited May 16, 2021 by FionaFong

Square_Design · June 8, 2021

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 !

Square_Design · June 8, 2021

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;

}

cheltongomez · June 9, 2021

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.

tuanphan · June 10, 2021

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.

ezraez · June 12, 2021

@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.

IXStudio · June 13, 2021

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

RicardoRMS · June 17, 2021

@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>

tuanphan · June 17, 2021

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;
}

Typewriter & delete effect? TypeIt or something similar

Recommended Posts

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

creedon

Posted Images

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources