Typewriter effect using CSS - adjusting margin and tablet view

Site URL: https://type-a-professionals.squarespace.com

https://type-a-professionals.squarespace.com

password: verbatim

Hello experts!

I'm using a typewriter effect on my redesigned site and I've gotten it close to the way I want it to look, but I need some help with the finishing touches, please!

• How do I get the cursor to finish "typing" after the last period and not continue on to the end of the code block?
• I have the display set to "flex" but the tablet view still cuts off the A and the period. How do I fix that? (It looks fine on mobile.)
• And while we're at it, if it's possible to make the cursor a little shorter top-to-bottom, I'd love for it to be the same height as the letters.

Here's my current code, many thanks in advance!

HTML:

<div class="typewriter">
    <div class="typewriter-text">
      <h1>
      Hi, we're Type A.
     </h1>
  </div>
</div>

CSS:

.typewriter {
    font-family: Rubik, monospace;
    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; 
    }
}

Q2. Add to Design > Custom CSS

/* Typer on tablet */
@media screen and (max-width:991px) and (min-width:768px) {
.typewriter-text {
    overflow: visible;
}
}

Hi tuanphan, thanks for responding! Unfortunately, adding this code didn't fix the tablet view problem. It's still cutting off the A and the period in tablet view.

And it's still "typing" all the way to the end of the code block, rather than stopping after the period.

Any other suggestions on how to fix these two issues?

Thank you!

Okay, I played around with width and margin and was able to get it looking great in desktop and tablet view. Hooray!

However, now it's not centered in mobile view. Are you able to figure this last part out for me?

Here's my revised CSS:

//typing effect//

.typewriter {
    font-family: Rubik, monospace;
    display: flex;
  width: 34em;
  margin: 0 auto;
}

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

// tablet view //
@media screen and (max-width:991px) and (min-width:768px) {
.typewriter-text {
    overflow: hidden;
}
}

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

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

I suggest replacing, make a copy somewhere, the current CSS for this effect with the following.

/* based on code from CSS Tricks < https://css-tricks.com/snippets/css/typewriter-effect/ > */

/* typewriter cursor effect */

@keyframes blink-caret {

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

/* typing effect */

@keyframes typing {

  from { width : 0 }
  
  to { width : 100% }

  }

.typewriter h1 {

  animation : typing 3.5s steps( 40, end ), blink-caret 0.75s step-end infinite;
  border-right : 0.15em solid #bdbdbd; /* typwriter cursor */
  color : #006373;
  font-family : Rubik, monospace;
  font-size: 7vw; /* size relative to the width of the viewport */
  letter-spacing : 0.10em; /* adjust as needed */
  margin : 0 auto; /* gives that scrolling effect as the typing happens */
  overflow : hidden; /* ensures the content is not revealed until the animation */
  white-space : nowrap; /* keeps the content on a single line */
  
  }

My small contribution is to make the font size dynamic to the viewport width. That could be refined with some media queries if needed. The key is that a statically sized font just isn't workable for this effect across all screen sizes.

I did consider another option. That was to use Javascript to check if the text was overflowing and then make the font size smaller until it no longer overflowed. I didn't develop a solution based on that idea but tested some aspects of how the code might work. It seemed like it could be done. 😀

Let us know how it goes.

Thank you so much for the effort! Unfortunately, when I try vw, I can't get the font sizes to look right across the devices and then they're all left justified instead of centered. I added margin and width to mobile view and that fixed the centering problem, but it also added extra space above and below the text. It's weird because it doesn't show up in the Squarespace mobile view, but it's showing up on my actual phone (attached screenshot).

If I can now just get rid of the extra space in mobile so it looks like the other headers, I can live with the cursor going too far off to the right in mobile only. Here's my current CSS, including the header CSS I added in case that now needs to be adjusted to get rid of the extra spacing on mobile:

//typing effect//

.typewriter {
    font-family: Rubik, monospace;
    display: flex;
  width: 34em;
  margin: 0 auto;
}

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

// mobile view //
@media screen and (max-width:480px) {
.typewriter-text {
    overflow: hidden;
margin: 2.75em;
  width: 13.5em;
  }
}

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

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

//fixed header navigation//

.Header.Header--top {
  position: fixed;
  top: 0px;
  z-index:1000;
  width:100%;
}
.Intro {padding-top:100px;}
.Index {padding-top:100px;}
.Main {padding-top:100px;}
.Main.Main--page {padding-top:100px !important;}
.Main.Main--blog-item {padding-top:0px !important;}

@media only screen and (max-width: 480px) {
  .Main {padding-top:0px !important;}
  .Intro {padding-top:0px !important;}
  .Index {padding-top:0px !important;}
  .Main.Main--page {padding-top:0px !important;}
}

The code I posted does center. Granted the font sizing may not be perfect but perhaps the 7vw can be pushed up a .25 or .5. The font-weight might be upped.

The blinking caret can be changed to be closer to what you have now.

The cursor is there just that my screenshots happen to snap at the off cycle! 🙂

The code is really very close to what you have but doesn't use display : flex. Which I think is part of your alignment problem.

I'll play around with it some more to see if I can get it looking just right. Thanks, creedon!