<!-- 
CSS Animation Version: https://codepen.io/petersonby/full/JBrYKG
Author: @Alexey Peterson 
-->

<div class="card">
  <div class="card__header">
    <a href="#"><span class="circle figure"></span></a>
    <button class="card__menu burger btn">
      <span class="line burger__line figure"></span>
      <span class="line burger__line burger__line_second figure"></span>
      <span class="line burger__line figure"></span>
    </button>
  </div>
  <div class="card__main">
    <div class="card__message">
      <div class="card__message-box"></div>
      <span class="card__message-time line figure"></span>
    </div>
    <div class="card__message card__message_my">
      <div class="card__message-box card__message-box_my"></div>
      <span class="card__message-time line figure"></span>
    </div>
    <div class="card__message">
      <div class="card__message-box"></div>
      <span class="card__message-time line figure"></span>
    </div>
    <div class="card__message card__message_my">
      <div class="card__message-box card__message-box_my"></div>
      <span class="card__message-time line figure"></span>
    </div>
  </div>
  <div class="card__footer">
    <div class="loader">
      <span class="loader__element"></span>
      <span class="loader__element"></span>
      <span class="loader__element"></span>
    </div>
    <form action="" class="form">
      <input type="text" class="form__input" required="">
      <button class="btn form__send"><span class="line figure"></span></button>
    </form>
  </div>
</div>
:root {
  --main-color: #3f51b5;
  --bg-color: #fbc02d;
  --second-color: #e0e0e0;
  --my-messages-color: #9fa8da;
  --size: 2px;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card {
  background: #fff;
  width: 350px;
  height: 500px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  opacity: 0;
}

.card__header {
  height: 80px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: var(--main-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
}

.card__main {
  padding: 40px 20px;
}

.card__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--second-color);
  opacity: 0;
}

.figure {
  display: block;
  background: var(--second-color);
}

.line {
  width: 50px;
  height: 10px;
  border-radius: 10px;
}

.line_small {
  height: 1px;
  width: 100%;
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 100%;
}

.burger {
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
}

.form__input {
  border: none;
  padding: 5px 10px;
  border-radius: 20px;
  transform: scaleX(0);
}

.form__send {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: var(--main-color);
  color: #fff;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  transform: scale(0);
}

.burger__line {
  height: 3px;
  width: 35px;
}

.card__message {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 20px;
  transform: scale(0);
}

.card__message_my {
  align-items: flex-end;
}

.card__message-box {
  background: var(--second-color);
  height: 40px;
  width: 200px;
  border-radius: 5px;
  margin-bottom: 5px;
}
.card__message-box_my {
  background: var(--my-messages-color);
}

/* Animations */

.loader {
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader__element {
  border-radius: 100%;
  border: var(--size) solid var(--second-color);
  margin: calc(var(--size) * 2);
}
View Compiled
function body() {
  var bodyTimeline = gsap.timeline();

  bodyTimeline.to("body", {
    ease: "ease",
    duration: 1,
    backgroundColor: "#fbc02d"
  });

  return bodyTimeline;
}

function card() {
  var cardTimeline = gsap.timeline();

  cardTimeline.to(".card", {
    ease: "ease",
    duration: 1,
    opacity: 1
  });

  return cardTimeline;
}

function cardHeader() {
  var cardHeaderTimeline = gsap.timeline();

  cardHeaderTimeline.to(".card__header", {
    opacity: 1,
    ease: "ease",
    duration: 1
  });

  return cardHeaderTimeline;
}

function cardFooter() {
  var cardFooterTimeline = gsap.timeline();

  cardFooterTimeline.to(".card__footer", {
    ease: "ease",
    duration: 1,
    opacity: 1
  });
}

function formInput() {
  var formInputTimeline = gsap.timeline();

  formInputTimeline.to(".form__input", {
    ease: "ease",
    duration: 0.5,
    scaleX: 1
  });

  return formInputTimeline;
}

function formSend() {
  var formSendTimeline = gsap.timeline();

  formSendTimeline.to(".form__send", {
    ease: "ease",
    duration: 0.5,
    scale: 1
  });

  return formSendTimeline;
}

function burgerLineSecond() {
  var burgerLineSecondTimeline = gsap.timeline();

  burgerLineSecondTimeline.to(".burger__line_second", {
    duration: 0.5,
    scaleX: 0.5,
    x: 15
  });
  return burgerLineSecondTimeline;
}

function cardMessage() {
  var cardMessageTimeline = gsap.timeline();
  cardMessageTimeline.to(".card__message", {
    ease: "ease",
    duration: 1,
    scale: 1
  });
  return cardMessageTimeline;
}

function loaderElement() {
  var loaderElementTimeline = gsap.timeline({
    repeat: -1,
    defaults: {
      duration: 0.9,
      ease: "ease-in-out"
    }
  });

  const loaders = document.querySelectorAll(".loader__element");

  loaders.forEach((loader, index) => {
    const delay = index * 0.3;
    loaderElementTimeline.to(
      loader,
      {
        borderWidth: "2px",
        borderColor: "#3f51b5",
        scale: 2
      },
      `-=${delay}`
    );
  });

  return loaderElementTimeline;
}

var master = gsap.timeline();

master
  .add(body())
  .add(card())
  .add(cardHeader())
  .add(burgerLineSecond())
  .add(cardMessage())
  .add(cardFooter())
  .add(loaderElement())
  .add(formInput())
  .add(formSend());

GSDevTools.create();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.1/gsap.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js