Stop custom 'typewriter' code animation running on mobile

Site URL: https://www.thecontentcreator.co.uk/

Hi!

I've added a piece of custom HTML code to the homepage of my site to run an animated typewriter effect on my H1 title.

It works perfectly, but I'm having a slight issue with it on mobile devices. Because of the sizing of the screen and the H1 title words, the animation runs onto a second line every now and then, meaning the whole page content shifts down and back up again during the animation - which makes it a bit tricky to read the page on mobile!

Is there a piece of code I could add to the HTML to either stop it running at all on mobile or reduce the size of the H1 on mobile so that it can animate on a single line?

The code currently is:

<div class="container">
  <h1>
    <span class="txt-type" data-wait="3000" data-words='["creative", "ingenious", "magical", "SEO-ed"]'></span>
    copywriting
  </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 = 2000) {
    this.txtElement = txtElement;
    this.words = words;
    this.txt = "";
    this.wordIndex = 0;
    this.wait = parseInt(wait, 5);
    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 = 60;

    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>

Hi,

You can set fixed height for typing text on mobile, add this to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-73cfdd2186fd85f224e1 h1 {
    height: 100px !important;
}
}

I've just seen your site, it looks beautiful! i'm looking to get this desired typewriter effect on my site, but it's just not working at all.  I wondered if you could help me maybe, like where did you put the code etc?

i've tried multiple things and the only thing that animates is:

HTML IN MARKDOWN:

<div class="typewriter">
    <div class="typewriter-text">
      <h1>
      STAND OUT WITH
     </h1>
  </div>
</div>

CSS IN DESIGN > CUSTOM CSS

.typewriter {
    font-family: ogg-regular;
    display: flex;
}

.typewriter-text {
    display: flex;
      overflow: hidden;
     animation: typing 4s steps(20, end), blink 1s step-end infinite;
    white-space: nowrap;
  color: #006373;
    border-right: 3px solid #bdbdbd;
      box-sizing: border-box;
margin: auto;
}

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

@keyframes blink {
    from, to { 
        border-color: transparent 
    }
    50% { 
        border-color: #bdbdbd; 
    }
}

but it doesn't work how I desire it to. 

I want STAND OUT WITH to be static, and portraits, stock imagery, in-action shots, to be typewriter effect

Site URL: http://www.moonlitdesign.uk/photography

i'm looking to get this desired typewriter effect on my site, but it's just not working at all as seen similarly to here:

https://www.thecontentcreator.co.uk/

i've tried multiple things and codes from the forums and the only thing that i can get to work and animates is:

HTML IN MARKDOWN:

<div class="typewriter">
    <div class="typewriter-text">
      <h1>
      STAND OUT WITH
     </h1>
  </div>
</div>

CSS IN DESIGN > CUSTOM CSS

.typewriter {
    font-family: ogg-regular;
    display: flex;
}

.typewriter-text {
    display: flex;
      overflow: hidden;
     animation: typing 4s steps(20, end), blink 1s step-end infinite;
    white-space: nowrap;
  color: #006373;
    border-right: 3px solid #bdbdbd;
      box-sizing: border-box;
margin: auto;
}

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

@keyframes blink {
    from, to { 
        border-color: transparent 
    }
    50% { 
        border-color: #bdbdbd; 
    }
}

but it doesn't work how I desire it to. 

I want STAND OUT WITH to be static, and portraits, stock imagery, in-action shots, to be typewriter effect

On 12/10/2021 at 6:31 PM, moonlitdesign said:

Site URL: http://www.moonlitdesign.uk/photography

i'm looking to get this desired typewriter effect on my site, but it's just not working at all as seen similarly to here:

https://www.thecontentcreator.co.uk/

i've tried multiple things and codes from the forums and the only thing that i can get to work and animates is:

HTML IN MARKDOWN:

<div class="typewriter">
    <div class="typewriter-text">
      <h1>
      STAND OUT WITH
     </h1>
  </div>
</div>

CSS IN DESIGN > CUSTOM CSS

.typewriter {
    font-family: ogg-regular;
    display: flex;
}

.typewriter-text {
    display: flex;
      overflow: hidden;
     animation: typing 4s steps(20, end), blink 1s step-end infinite;
    white-space: nowrap;
  color: #006373;
    border-right: 3px solid #bdbdbd;
      box-sizing: border-box;
margin: auto;
}

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

@keyframes blink {
    from, to { 
        border-color: transparent 
    }
    50% { 
        border-color: #bdbdbd; 
    }
}

 

 

but it doesn't work how I desire it to. 

I want STAND OUT WITH to be static, and portraits, stock imagery, in-action shots, to be typewriter effect

You mean this typewriter?

yes! if you take a look at this page: 

https://www.moonlitdesign.uk/photography

i've managed to achieve a version of it... but the bordering of the italics cuts the edges of the letters off, and i couldn't for the life of me get it all centered correctly, so have left it left aligned for now. 

If you could take a look and potentially improve whats going on that would be amazing! 

thank you 😄

On 12/16/2021 at 5:12 PM, daniellemoonlit said:

yes! if you take a look at this page: 

https://www.moonlitdesign.uk/photography

i've managed to achieve a version of it... but the bordering of the italics cuts the edges of the letters off, and i couldn't for the life of me get it all centered correctly, so have left it left aligned for now. 

If you could take a look and potentially improve whats going on that would be amazing! 

thank you 😄

I see you used <left> tag, this tag doesn't exist in code world. First, remove it (<left> & </left>)

Then add this to DESIGN > CUSTOM CSS to center text + fix text cut off

span.type {
    display: flex !important;
    justify-content: center;
    overflow: visible !important;
}

Apparently we have multiple threads on the same issue. 😞