Adding transition animation in chat ui

i was working on a chat ui in my react js project, So now as i am done with the basics implementation , I am struggling to add an animation to it.

here is my basic codesanbox repo for the same

As you can see here, as soon as user type in input box and press enter the chat gets added and shown in the ui part to the user and immediately the response comes back from server (this as of now is hardcoded).

The animation here i wanted to add is that as soon as user presses “enter”, his chat comes from bottom of screen to its actual location in nice smooth way (everytime he sends a chat). Have struggled, but yet not able to achieve this. Hope you all Help, Thank you ๐Ÿ™‚

Answer

1

  1. Make a keyframe animation, like this:

    @keyframes slideUp {
      from {
        transform: translateY(100vh);
      }
      to {
        transform: translateY(0);
      }
    }
    

  1. Add the animation to the .bubbleContainer. Like this:

    .bubbleContainer {
      width: 80%;
      display: flex;
      padding: 10px 20px;
      animation: slideUp 0.5s ease-in-out;
    }
    

๐Ÿ‘‰ Check it in action on Code Sandbox




2

If you want to add variation in the timing of the messages to make it look like a real chat, then at the place of adding the animation to the .bubbleContainer, add it to both sides separately, Like this:

.bubbleContainer {
  width: 80%;
  display: flex;
  padding: 10px 20px;
  opacity: 0;
}

.bubbleContainer.right {
  justify-content: flex-end;
  animation: slideUp 0.3s ease-in-out forwards;
}

.bubbleContainer.left {
  justify-content: flex-start;
  animation: slideUp 0.3s ease-in-out 1s forwards;
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100vh);
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


๐Ÿ‘‰ Check it in action on Code Sandbox