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?


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


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: