How To Create An Animated Fake Chat Conversation

Hey! I’m new to the Webflow community and platform and I’m looking for some guidance.

I’m trying to create an animated conversation on my website to illustrate the conversations our members has with each other and our coaches in our exercise-program community.

I have animated it so the messages slide in from left and right as you scroll down, but I would also like to have a bubble appear before the message gets revealed.

I have managed to make it look the way I want to on desktop by using grids, but when I scale to mobile view, the whole thing looks wack. I would also like to add names of the “people” chat are chatting.

I have attached a screenshot of desktop and mobile view of my project, as well as a desktop and mobile view of how I want it to look.

Project link:
https://preview.webflow.com/preview/chat-animation-test?utm_medium=preview_link&utm_source=designer&utm_content=chat-animation-test&preview=1ae14955afc206f8a5196825d54140b5&workflow=preview