Mobile message text conversation animation

This site is absolutely stellar. So smooth, and no video from what I can see with inspect they animated this and I can’t figure out how for the love of my life. Anyone got a clue?

Link: https://plus.u-aid.org/

@ColinxDean - if you watch the inspector while this is running you can see these divs being added to the DOM:

image

They are using JavaScript in this case to add these in. If you look at their scripts.js file you can see a few functions handling different things like the content and sounds.

You could do this with Webflow Interactions to some degree (not the sounds) - might be a lot of work to set up and maintain.

If you’re interested here is a sample someone mocked up creating an iMessage like layout in CSS: