Highlighted

Chat Animation Issue

Explorer ,
Jul 22, 2020

Copy link to clipboard

Copied

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.

TOPICS
Announcement, Crash on mac, Crash on windows, Data loss, Design, Download install and licensing, How to, Import and export, Known Issue, Missing feature, Open and save docs, Plug-ins, Product performance, Prototyping, Share or publish

Views

65

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Chat Animation Issue

Explorer ,
Jul 22, 2020

Copy link to clipboard

Copied

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.

TOPICS
Announcement, Crash on mac, Crash on windows, Data loss, Design, Download install and licensing, How to, Import and export, Known Issue, Missing feature, Open and save docs, Plug-ins, Product performance, Prototyping, Share or publish

Views

66

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 22, 2020 0
Adobe Community Professional ,
Aug 21, 2020

Copy link to clipboard

Copied

if you are using the same pop ups, in animation, please check the easing options. that gives you nice smooting animation options.

Screen Shot 2020-08-21 at 7.09.50 PM.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 21, 2020 1
Spas K. LATEST
Adobe Community Professional ,
Aug 21, 2020

Copy link to clipboard

Copied

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 🙂

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 21, 2020 1