jQuery effect for resizing text

Question

so, I'm trying to make two adjacent divs, such that on mouseover the div on the right is moving left and the div in left is resizing (getting tighter). The div on the left contains text that when div is getting tighter the words in the must go to next line to fit new size, and that's exactly what I want. but the problem is that when words go to next line they just disappear from line and appear in the next. I want them to move to the next line instead of disappearing and appearing, like this: here is the code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {

    $(".SideMenu").mouseout(function() {

      $(".mainTitleDiv").animate({
        width: '900px',
      }, {
        queue: false,
      })


      $(".SideMenu").animate({
        right: '-500px',
      }, {
        queue: false,
      })
    });

  });
  $(document).ready(function() {
    $(".SideMenu").mouseover(function() {
      $(".mainTitleDiv").animate({
        width: '400px',
      }, {
        queue: false,
      })
      $(".SideMenu").animate({
        right: '0px',
      }, {
        queue: false,
      })
    });

  });
</script>

Answer 1

Here are options to achieve Fitting Text to a container

USING CSS vw

<h1>Fit Me</h1>

CSS

@import url('https://fonts.googleapis.com/css?family=Bowlby+One+SC');

h1 {
  text-align: center;
  font-family: 'Bowlby One SC', cursive;
  font-size: 25.5vw;
}

USING jQUERY Library such FitText

Here is a sample after including the library in your HTML file

jQuery("h1").fitText(0.38);

Here are link to other library

• textFit