Animate letter removal and container size-CodePudding

I'm trying to create a little intro animation for a website. I want it to smoothly transition to a white BW logo after the animation plays out.

What i'm struggling with is once the full word is removed, I want the B and W letters to come slide together to form a small BW after the rest of the word fades out. right now I can't seem to get the container to shrink down smoothly and force the BW right next to eachother.

I have a codepen started for reference. https://codepen.io/patstantpen/pen/eYExopN

$(document).ready(function () {
  $(".title").click(function () {
    $(".letter").css("color", "white");

    setTimeout(function () {
      $(".reak, .orld").css("opacity", "0");
    }, 1400);
  });
});

* {
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 35px;
  height: 100%;
}

body {
  text-align: Center;
  height: 100%;
  background-color: #f7a21b;
}
.wrapper {
  display: flex;
  justify-content: center;
  height: 100%;
}
.title {
  height: 100px;
  align-self: center;
  color: #a71e29;
  height: 50px;
  transition: width 1.4s ease;
}
.letter {
  transition: color 1.4s ease;
}
.reak,
.orld {
  transition: opacity 1.4s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">

<body>
  <div class='wrapper'>
    <div class='title'>
      <span class='letter'>B</span><span class='reak'>REAKFAST</span> <span class='letter'>W</span><span class='orld'>ORLDWIDE</span>
    </div>
  </div>

</body>

I guess another more broad question is would this be better made as a mp4 or gif and played instead of doing it with js?

CodePudding user response：

You need to use animate() to bring both the width AND the opacity to 0.

https://api.jquery.com/animate/

And you need to use vertical-align rule to top to fix you text on top.

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

$(document).ready(function () {
  $(".title").click(function () {
    $(".letter").css("color", "white");

    setTimeout(function () {
      $(".reak, .orld").animate({'width': 0, 'opacity': 0}, 1000, function () {
        $(this).hide(); 
      });
    }, 1400);
  });
});

* {
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 35px;
  height: 100%;
}

body {
  text-align: Center;
  height: 100%;
  background-color: #f7a21b;
}
.wrapper {
  display: flex;
  justify-content: center;
  height: 100%;
}
.title {
  height: 50px;
  align-self: center;
  color: #a71e29;
  transition: width 1.4s ease;
}
.letter {
  transition: color 1.4s ease;
}
.reak,
.orld {
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">

<body>
  <div class='wrapper'>
    <div class='title'>
      <span class='letter'>B</span><span class='reak'>REAKFAST</span> <span class='letter'>W</span><span class='orld'>ORLDWIDE</span>
    </div>
  </div>

</body>

CodePudding user response：

You actually can do pretty much everything just with CSS:

$(document).ready(function () {
  $('.title').click(function () {
    $('.title').addClass('join');
  });
});

* {
  font-family: "Montserrat";
  font-weight: bold;
  font-size: 35px;
  height: 100%;
}

body {
  text-align: center;
  background-color: #f7a21b;
  margin: 0;
}

.wrapper {
  display: flex;
  justify-content: center;
}

.title {
  align-self: center;
  color: #a71e29;
  height: 50px;
  cursor: pointer;
}

.letter,
.reak,
.orld {
  white-space: pre;
  display: inline-block;
  max-width: 500px;   /* needs to be set manually to a sensible value =( */
  transition: color 1.4s ease, 
    opacity 1.4s ease 1.4s, 
    max-width 1.4s ease 2.8s;
}

.join .letter {
  color: white; 
}

.join .reak, 
.join .orld {
  opacity: 0;
  max-width: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">

<body>
  <div class="wrapper">
    <div class="title">
      <span class="letter">B</span><span class="reak">REAKFAAAST </span><span class="letter">W</span><span class="orld">ORLDWIDE</span>
    </div>
  </div>

</body>

I added more As to make the effect of the two letters joining together a bit more visible.