Chat Animation Issue

Question

Hi Community,

I am animating my UI design but I have trouble animating the chat part where you are in the chat with that specific person and when you click the type form the keyboard pops up from below and the previous messages are moving up and the type form is expanding. The part that I cannot do is when the messages are moving up. I can't make it smooth and naturally looking (like for example in Messenger when you hit the Type form, the previous messages move up very smooth)

Here is my XD File in order for you to understand it better.

https://drive.google.com/file/d/1S6pXvgu9AnGlFVo7nIIFflgicbXj8arw/view?usp=sharing

Thanks in advance.

Spas K. · Answer

The problem here is that you are using 2 different groups for the 2 "states" of the chat. You are using opacity to hide one and show the other on the pushed-up screen. This way auto-animate is not doing anything, since nothing is really moving.

For it to work, you just need to use the mask, and on the second screen just move the chat bubbles up within the same mask. This way auto-animate will actually move the elements up.

Here's the file with how it should be:

https://www.dropbox.com/s/q635rajlhlow1zs/Social_Media_Animation_Edited.xd?dl=0

It's a late reply, but hopefully it helps you or somebody else at some point 🙂

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.