Mobile Conversating - iPhone X Chat

🎬Learn how to animate a UI Motion Flow from start to finish
Watch this tutorial and more

I'm so excited to show you this one!
I've been working hard to create an intensive and interesting interaction animation of the mobile version of conversations.

FLOW
- User gets started in the conversations list
- Tapping to chat with Ophelia about an upcoming camping trip
- Scrolling up the chat to see previous messages and then back down
- Taps the text input to write a message, thinking it's going to be awesome to go camping
- Tapping send and closing the input field collapses it to the previous actions component
- Tapping back button to return to conversations
- Phones transform to two showing both screens until they fade out

DETAILS EXPLAINED
- Dimensional/spacial interactions where you dive in/out of views instead of traditional flat one-leveled
- The top bar in the conversation view works as a mask to the top which prevents the content to scroll into the "notch" which is something I feel isn't that great nor visually appealing
- Actions in the button along with the back button hides when the content is in motion to give more discoverability

Stay tuned and follow for further updates!
@wellgraf

Download work files, resources & more

–
Follow me for the latest on
Instagram | Youtube | Website