Typewriter & delete effect? TypeIt or something similar

creedon · February 28, 2022

18 minutes ago, hecinthecity said:

but the dots are still happening on mobile after the second and third text lines get deleted.. any ideas on why?

It sounds like a rendering error in the browser which we can't fix with code.

creedon · February 28, 2022

2 minutes ago, creedon said:

which we can't fix with code.

I should clarify. We can't fix a browser issue with code but it may be possible to minimize or work around the issue.

hecinthecity · March 3, 2022

On 2/27/2022 at 9:24 PM, creedon said:

It sounds like a rendering error in the browser which we can't fix with code.

Thank so much! Would you be able to help me with code to limit the repeated typing and deleting? Since the text is not rendering well on mobile I need to just use one sentence and I'd like it to remain static after it's typed out. Thanks again! @tuanphan on CC since they helped with the other code too..

studiohms.com

PW: comingsoon

Edited March 3, 2022 by hecinthecity
forgot to add website

whereisscott · March 16, 2022

@tuanphan

This code is amazing, Tuan! Thank you so much for this. I have one question - I'm using this on a website in the very first headline of the homepage and it looks great on desktop. Here's the site: https://www.trulypoisedyou.com/

Since I'm using the delete effect on the last word of a line of text, the effect on mobile is that everything bumps down every time the animation rolls out that new word. It ends up being very distracting.

Is there any way that I can make the animation start on that new line on mobile? I tried adding spaces, etc. to force this, but it hasn't work.

I made a quick video explaining: click here.

Thanks so much!

Best,

-Scott

tuanphan · March 16, 2022

4 hours ago, whereisscott said:

@tuanphan

This code is amazing, Tuan! Thank you so much for this. I have one question - I'm using this on a website in the very first headline of the homepage and it looks great on desktop. Here's the site: https://www.trulypoisedyou.com/

Since I'm using the delete effect on the last word of a line of text, the effect on mobile is that everything bumps down every time the animation rolls out that new word. It ends up being very distracting.

Is there any way that I can make the animation start on that new line on mobile? I tried adding spaces, etc. to force this, but it hasn't work.

I made a quick video explaining: click here.

Thanks so much!

Best,

-Scott

Add to Design > Custom CSS

/* Mobile typewriter */
@media screen and (max-width:767px) {
span.txt-type {
    display: block;
}
}

whereisscott · March 17, 2022

Thank you @tuanphan! This worked perfectly. Such an elegant way of fixing the issue, too - it didn't even cross my mind. Thanks again!

tuanphan · March 19, 2022

On 3/4/2022 at 2:24 AM, hecinthecity said:

Thank so much! Would you be able to help me with code to limit the repeated typing and deleting? Since the text is not rendering well on mobile I need to just use one sentence and I'd like it to remain static after it's typed out. Thanks again! @tuanphan on CC since they helped with the other code too..

studiohms.com

PW: comingsoon

Did you solve it?

KatieBullied · June 23, 2022

Hello! Ive just tried this code and it works beautifully - thank you @tuanphan Just wondering if there's a way to make the typewriter text italic?

tuanphan · June 24, 2022

On 6/23/2022 at 12:32 PM, KatieBullied said:

Hello! Ive just tried this code and it works beautifully - thank you @tuanphan Just wondering if there's a way to make the typewriter text italic?

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

OwlWoodStudio · June 29, 2022

Thank you @tuanphan for the code. I've just about fumbled my way through adding it to the website and making minor adjustments. What I'm struggling with is the spacing between text blocks and on tablet the alignment goes the opposite way and plays in reverse!? Does anyone have any ideas, I'm a complete novice.

Many thanks

www.owlwoodstudio.co.uk

BrandonH · July 11, 2022

On 8/5/2020 at 10: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

@tuanphan this is phenomenal. Thank you so much 🙌. Is there a way to make the typing stop after you scroll past the section that it's on?

The problem I'm having is that the text that's being "typed out" takes up 2 lines. So, each time the second line is created, it expands the size of the section that the code is in, which causes the entire page to shift down. Then when the text is deleted, the entire page shifts back up. So, after you scroll down past this typing section, the web page is shifting up and down a lot.

tuanphan · July 12, 2022

11 hours ago, BrandonH said:

@tuanphan this is phenomenal. Thank you so much 🙌. Is there a way to make the typing stop after you scroll past the section that it's on?

The problem I'm having is that the text that's being "typed out" takes up 2 lines. So, each time the second line is created, it expands the size of the section that the code is in, which causes the entire page to shift down. Then when the text is deleted, the entire page shifts back up. So, after you scroll down past this typing section, the web page is shifting up and down a lot.

Try adding this to Design > Custom CSS

span.txt-type {
	white-space: nowrap !important;
}

tuanphan · July 12, 2022

On 6/29/2022 at 11:10 PM, OwlWoodStudio said:

Thank you @tuanphan for the code. I've just about fumbled my way through adding it to the website and making minor adjustments. What I'm struggling with is the spacing between text blocks and on tablet the alignment goes the opposite way and plays in reverse!? Does anyone have any ideas, I'm a complete novice.

Many thanks

www.owlwoodstudio.co.uk

Hi. Do you still need help?

BrandonH · July 13, 2022

On 7/12/2022 at 4:30 AM, tuanphan said:
Try adding this to Design > Custom CSS
span.txt-type {
	white-space: nowrap !important;
}

@tuanphan thanks for the quick reply! That fixes the problem of the section expanding vertically, but now as the text "type" out, it extends past the screen and the full text can't be seen. Link to page →

tuanphan · July 14, 2022

17 hours ago, BrandonH said:

@tuanphan thanks for the quick reply! That fixes the problem of the section expanding vertically, but now as the text "type" out, it extends past the screen and the full text can't be seen. Link to page →

Remove the code & set fixed height for typing text

@media screen and (min-width:992px) {
span.txt-type {
    height: 90px !important;
    display: block;
}
}

BrandonH · July 19, 2022

On 7/14/2022 at 4:24 AM, tuanphan said:
Remove the code & set fixed height for typing text
@media screen and (min-width:992px) {
span.txt-type {
    height: 90px !important;
    display: block;
}
}

Amazing. Thank you so much @tuanphan! You are the best!

glenbeavis · July 21, 2022

Hi, everyone- this code has been a lifesaver for me on my current project ( thank you @tuanphan your posts have been a huge help to me).

I am having a problem now, hopefully someone might be able to help:

I want to use the typewriter effect in the first two sections of my homepage. When it's just in the first section, it works great. However, when i add the code block into the second section, the typewriter effect doesn't work in that section!

Any thoughts?

I can't share the actual site, but i've recreated the problem here:

https://fish-koala-cj3k.squarespace.com/new-page-1

pw: password

thanks in advance for any help, this forum has been incredible

edit: I'm duplicating the section so that i can show one version on desktop, one on mobile, if that matters

Edited July 21, 2022 by glenbeavis

creedon · July 21, 2022

3 hours ago, glenbeavis said:

When it's just in the first section, it works great. However, when i add the code block into the second section, the typewriter effect doesn't work in that section!

Any thoughts?

The code is not designed to be used more than once on a page.

For those with technical backgrounds. Only one element is being selected.

document.querySelector(".txt-type")

glenbeavis · July 21, 2022

@creedon thank you, i didn't realize that code could only be used once per page. Do you knwo if there's a way to work around that?

(sorry, i'm not savvy enough to know if the code you posted above was meant as a solution, or illustration of why my problem is happening)

creedon · July 21, 2022

1 minute ago, glenbeavis said:

(sorry, i'm not savvy enough to know if the code you posted above was meant as a solution, or illustration of why my problem is happening)

Illustration of the issue.

creedon · July 21, 2022

1 hour ago, glenbeavis said:

Do you knwo if there's a way to work around that?

There is now! 🙂

The first change you need to make is only install the code once. I suggest a code block at the top or bottom of the first or last page section. You may want to hide that specific code block with CSS so it doesn't take up space on the page.

Remove the code similar to the following. You will install similar code later.

<div class="container">
  <h1>
    We believe the power of listening can transform<br>
    <!-- The words that we want to have typerwriter effect -->
    <b> <p1 style="color:#76b6c4;"><span class="txt-type" data-wait="3000" data-words="[&quot;people&quot;, &quot;lives&quot;, &quot;relationships&quot;, &quot;brands&quot;, &quot;the world&quot;]"><span class="txt">the wo</span></span></p1> </b>
  </h1>
</div>

Now find the following in the code...

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

...and change it to the following...

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

Now in a new code block, wherever you want a typewriter effect, add the code you removed earlier. Of course alter the phrase and words for each.

I haven't tested this extensively but it appears to work.

Let us know how it goes.

glenbeavis · July 21, 2022

@creedon holy crap it worked!
I owe you a beer (or 12)

creedon · July 22, 2022

Over the last year I've made several "one off" enhancements for folks to the oft discussed TypeWriter code in this thread. Some of them were done via private message.

I'm sharing the following unified version plus some additional enhancements.

<!--

  begin TypeWriter for Squarespace
  
  Version           : 0.1.0
  
  SS Versions       : 7.1, 7.0
  
  License           : Copyright (c) 2022 by Arbak  (https://codepen.io/arbak/pen/MWaqPJK)
                      
                      Permission is hereby granted, free of charge, to any
                      person obtaining a copy of this software and associated
                      documentation files (the "Software"), to deal in the
                      Software without restriction, including without limitation
                      the rights to use, copy, modify, merge, publish,
                      distribute, sublicense, and/or sell copies of the
                      Software, and to permit persons to whom the Software is
                      furnished to do so, subject to the following conditions:
                      
                      The above copyright notice and this permission notice
                      shall be included in all copies or substantial portions of
                      the Software.
                      
                      THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
                      KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
                      WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
                      PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
                      OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
                      OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
                      OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
                      SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
   
  Modifications By  : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  -->
  
  <style>
  
    :root {
    
      /*
      
        20220721 TC
        
        add CSS variables so user doesn't have to dig into code as much to
        configure
        
        */
        
       /* use center, end, start, and etc. values for CSS justify-content */
       
      --typewriter-alignment : center;

       /* cursor, use CSS border syntax for values */
       
      --typewriter-cursor : 0.08rem solid black;
      --typewriter-cursor-rgba : 0.08rem solid rgba( 0, 0, 0, 1 );
      --typewriter-cursor-rgba-opacity : 0.08rem solid rgba( 0, 0, 0, 0.02 );
      
      }
      
    </style>
    
  <!-- do not change anything below, there be the borg here -->
  
  <style>
  
    /*
    
      20220721 TC
      
      remove reset to not interfere with SS defaults
      
      */
      
    /*
    
      align content 
      
      20220721 TC
      
      change class name to not interfere with SS defaults and simplify
      
      */
      
    .typewriter-container {
    
      display : flex;
      justify-content : var( --typewriter-alignment );
      
      }
      
    /* add cursor */
    
    .txt-type > .txt {
    
      animation : blink 0.6s infinite; /* animating the cursor */
      border-right : var( --typewriter-cursor );
      padding-right : 2px;
      
      }
      
    /* animation */
    
    @keyframes blink {
    
      0% {
      
        border-right : var( --typewriter-cursor-rgba );
        
        }
        
      100% {
      
        border-right : var( --typewriter-cursor-rgba-opacity );
        
        }
        
      }
      
    </style>
    
  <script>
  
    /*
    
      20220721 TC
      
      change wait to wordWait
      
      */
      
    class TypeWriter {
    
      constructor ( txtElement, words, wordWait = 3000, wordsWait = 3000,
      
        loops = 0 ) {
      
        /*
        
          20220721 TC
          
          add loops and wordsWait parameters
          
          */
          
        this.isDeleting = false;
        this.loops = 0;
        this.maxLoops = parseInt ( loops, 10 );
        this.txt = '';
        this.txtElement = txtElement;
        this.wordIndex = 0;
        this.words = words;
        this.wordsWait = parseInt ( wordsWait, 10 );
        this.wordWait = parseInt ( wordWait, 10 );
        
        this.type ( );
        
        }
        
      type ( ) {
      
        // current index of word
        
        const current = this.wordIndex % this.words.length;
        
        // get full text of current word
        
        const fullTxt = this.words [ current ];
        
        /*
        
          20220721 TC
          
          shorten if removing or adding check
          
          */
          
        const n = this.isDeleting ? -1 : 1;
        
        this.txt = fullTxt.substring ( 0, this.txt.length + n );
        
        // insert txt into element
        
        /*
        
          20210714 TC
          
          add data-word attribute so words can be targeted with CSS
          
          */
          
        this.txtElement.innerHTML =
        
          `<span class="txt" data-word="${ fullTxt }">${ this.txt }</span>`;
          
        // initial type speed
        
        let typeSpeed = 50;
        
        if ( this.isDeleting )
        
          typeSpeed /= 2; // increase speed by half when deleting
          
        // if word is complete
        
        if ( ! this.isDeleting && this.txt === fullTxt ) {
        
          /*
          
            20220721 TC
            
            add isLastWord
            
            */
            
          const isLastWord = current == this.words.length - 1;
          
          // make pause at end
          
          typeSpeed = ! isLastWord ? this.wordWait : this.wordsWait;
          
          this.isDeleting = true; // set delete to true
          
          /*
          
            20220721 TC
            
            count loops
            
            */
            
          if ( isLastWord ) this.loops++;
          
          } else if ( this.isDeleting && this.txt === '' ) {
          
            this.isDeleting = false;
            
            this.wordIndex++; // move to next word
            
            typeSpeed = 500; // pause before start typing
            
            }
            
        /*
        
          20220721 TC
          
          bail when maxLoops reached
          
          */
          
        if ( this.maxLoops && this.loops >= this.maxLoops ) return;
        
        setTimeout ( ( ) => this.type ( ), typeSpeed );
        
        }
        
      } // end class TypeWriter
      
    // init app
    
    const init = ( ) => {
    
      document
      
        .querySelectorAll ( '.txt-type' )
        
        .forEach ( txtElement => {
        
          const loops = txtElement.getAttribute ( 'data-loops' );
          
          const wordWait = txtElement.getAttribute ( 'data-word-wait-ms' );
          
          const wordsWait = txtElement.getAttribute ( 'data-words-wait-ms' );
          
          /*
          
            20220721 TC
            
            simplify data structure for user words input
            
            */
            
          const words = txtElement
          
            .getAttribute ( 'data-words' )
            
            .split ( ',' )
            
            .map ( s => s.trim ( ) );
            
          // init TypeWriter for txtElement
          
          new TypeWriter ( txtElement, words, wordWait, wordsWait, loops );
          
          } );
          
      };
      
    // init on DOM load
    
    document.addEventListener ( 'DOMContentLoaded', init );
    
    </script>
    
  <!-- end TypeWriter for Squarespace -->

The code can be added to a code block, Page Settings > Advanced > Page Header Code Injection (see per-page code injection), or Settings > Advanced > Code Injection > FOOTER. Where you install the code determines the scope of where the code is available to run, basically per page or site-wide.

Next you need to install the following in a code block. I suggest a different code block than the one you may have used above.

<div class="typewriter-container">

  <h1>
  
    &samhoud | 
    
    <!--
    
      data attributes
      
      data-words          : the words that we want to have typerwriter effect,
                            a comma seprated list of words
      
      data-word-wait-ms   : how long to wait between typing each word
      
      data-words-wait-ms  : how long to wait between typing all words
      
      data-loops          : number of times to loop through the words. 0 means
                            infinite
      
      -->
      
    <span class="txt-type" data-words='consultancy, food, creative tech, ranj' data-word-wait-ms="3000" data-words-wait-ms="6000" data-loops="0">
    
      </span>
      
    </h1>
    
  </div>

With the enhancements in this code you should be able to use the above in multiple code blocks if desired.

Clairem25 · September 4, 2022

@tuanphan @creedon thank you for all the work you've already done on this! is there any way to apply this to the header site title?

creedon · September 4, 2022

3 hours ago, Clairem25 said:

is there any way to apply this to the header site title?

It may be possible to do what you want but the code discussed in this thread would not work. The code discussed here is meant to be dropped into a code block which the header does not allow.

Typewriter & delete effect? TypeIt or something similar

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

creedon

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources