Scroll Chat Story — Free HTML CSS JS Snippet

The scroll chat story tells a narrative — a testimonial, a support win, a product pitch — as a messaging thread whose bubbles arrive one at a time as you scroll. Each bubble first appears as typing dots, then resolves into its message with a springy pop, exactly like watching a live conversation. It's one of the most persuasive scroll patterns because readers process dialogue almost involuntarily. This snippet builds it with vanilla HTML, CSS, and an IntersectionObserver — no libraries.

Bubbles reveal in a reading band, not at the viewport edge

The observer uses rootMargin: '0px 0px -22% 0px' with threshold: 0.4, so a bubble fires when 40% of it is visible above the bottom 22% of the screen — comfortably inside the reading zone. Trigger-at-edge implementations reveal messages the reader can't see yet; pulling the trigger line up means each bubble pops exactly where eyes are focused.

One-shot reveals: conversations don't unhappen

After a message shows, observer.unobserve() releases it. Scrolling back up leaves the thread intact — re-reading a conversation where bubbles vanish and re-pop would break the "this already happened" fiction. This is a deliberate contrast with scrubbed effects: chat is narrative state, not scroll state, so the reveal is a ratchet rather than a scrub.

Typing dots via stacked pseudo-elements

Each bubble carries its own typing indicator with zero extra markup: ::before clones the bubble's background as a cover layer, and ::after renders pulsing dots on top. The message text underneath is present the whole time (real layout, real height — so nothing shifts when it "arrives"). When is-shown lands, both pseudo-elements fade out on a 0.35s delay — the bubble pops in *as dots*, and a beat later the dots dissolve into the message. Two transitions, one class.

The pop is a CSS spring from the bubble's tail

Bubbles animate from translateY(18px) scale(.86) with cubic-bezier(.34,1.56,.64,1) — an overshooting curve that reads as a message "landing." transform-origin is set to each bubble's tail corner (bottom-left for them, bottom-right for me), so the pop grows from where a chat app anchors its bubbles, matching iMessage/WhatsApp physics.

Sides are semantic classes

.scs-them and .scs-me handle alignment, color, tail radius, and origin — the message flow stays a flat list, so writing a new story is editing text, not layout. A min-height on each row prevents late-loading rows from collapsing the scroll distance the reveals depend on.

Why IntersectionObserver over scroll math

Seven bubbles at document-flow positions are exactly what IO was built for: the browser fires callbacks only at crossings, there's zero per-frame JS, and the pattern scales to a 50-message story without any performance thought.

Row min-height keeps the scroll distance the reveals need

Each .scs-msg has min-height: 70px even though its content is a single short bubble. Without a reserved minimum, short messages would occupy very little vertical space, compressing the scroll distance between reveals until several bubbles' trigger points landed inside the same viewport at once — breaking the one-at-a-time pacing the observer relies on. The fixed minimum guarantees each message gets enough scroll runway to read as its own beat in the conversation.

Customizing it

Write your own thread (alternate the two classes), add timestamps or avatars per row, or slow the dots-to-text delay for longer "typing." Related: the full chat UI component, the typing indicator on its own, reveal on scroll for generic entrances, and a scroll pin story for pinned narratives.