Jump to content

How To Prevent Text Animation from Changing Block Height?

Go to solution Solved by creedon,

Recommended Posts

Site URL: https://wroteon.com

I just added a typing effect via JS to my home page and love the look on desktop, but when viewing the page on mobile, the animation of the text causes it to wrap to a new line, which expands the size of the block and is quite distracting. Is it possible to keep the block size fixed while using this animation?

I've tried setting a fixed height on the section, but it still ends up moving around the image block below it. Is there a way to keep the text container from changing sizes with animation?

If it helps, the code for the text is below:

<h4> The webpage opens revealing a bespectacled man. This is ALLEN ROUGHTON, a <span id="app"></span></h4>

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<script>
    var app = document.getElementById('app');

    var typewriter = new Typewriter(app, {
        loop: true,
        delay: 75,
    });


    typewriter
        .pauseFor(2000)
        .typeString('screenwriter')
        .pauseFor(1000)
      .deleteChars(12)
      .pauseFor(500)
      .typeString('script reader')
      .pauseFor(1000)
      .deleteChars(13)
      .pauseFor(500)
      .typeString('consultant')
      .pauseFor(1000)
        .start();

</script>

 

Link to comment

As a temporary solution I reduced the font size @media screen so it would all fit on the same line. I'd still prefer it be at the original font size.

I was also able to make it work on mobile by adding a bunch &nbsp; to get things to add spaces until it added another line, but that messed up the spacing for desktop so that it started to bump a line instead.

So I'm still looking for a more elegant solution if there is one.

Link to comment
  • Solution
Quote

So I'm still looking for a more elegant solution if there is one.

Because the typewriter effect is dynamic the height of that element is changing which causes the image to move about on mobile.

I'm thinking the most elegant solution might be to use a CSS variable to set the min-height and adjust it via the typewriter effect. I don't have any code for doing that. It's just a guess on my part for the most elegant solution.

A less elegant solution but perhaps better than the font-size adjustment is the following.

@media screen and ( max-width : 767px ) {

  #block-yui_3_17_2_1_1644293540448_3763 h4 {
  
    min-height : 112px;
    
    }
    
  }

You could try to adjust the min-height value to cover as many cases as possible but it may not work at every window width.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.