GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 Activity Feed UI Widgets — Sidebar-Ready Lists

· Godrich · 9 items · 17 min read

EmbedsVanilla JSSCSSAutoplayNotificationsDashboard

An activity feed ui is a list that keeps stacking in a screen corner, not a toast that flashes and fades.

Team activity stream where new work lands on top01 feed-team-activity-stream Change history diff that puts values back02 feed-change-history-diff Notification list that splits read from unread03 feed-notification-center-list Social mention cards that roll in from the side04 feed-social-mention-roll Mini comment thread with folding replies05 feed-comment-thread-mini Status badge timeline that lights up stage by stage06 feed-status-badge-timeline System log filtered by level chips07 feed-log-level-filter The moment an empty feed meets its first activity08 feed-empty-first-activity Summary counter that tallies today in hourly bars09 feed-summary-counter-bars

Auto-plays · click a tile to jump to its section · all nine in one zip

The order follows what a list goes through, not what a builder builds first. Team activity stacks in from the top (01), edits leave their before-and-after behind (02), read and unread split apart (03). Mentions roll in from outside (04), replies fold into a bundle (05), a document climbs from submit to approve (06). That is the stacking half. Next comes the picking half: log lines get picked by level (07), a brand-new feed wakes up at its first activity (08), and a summary counter folds the whole day into one number with hourly bars (09). That is where a news feed ui and this one part ways, because the feed keeps what already scrolled by so it can be read again. Other fixtures that share the same sidebar column are code block UI patterns and weather widget design, and all three were cut to the same 320px cell used here.

01Team activity stream where new work lands on top

What you see

Each entry is one line of who did what and when, with an avatar and a timestamp.

Team activity stream where new work lands on top
Open in a new tab

01 · Team activity stream where new work lands on top — Measured area 22.602% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

role="log"aria-livetranslateY

Where to look in the code

The list itself carries role="log" and aria-live, and pressing Add activity grows a new row into place at the top while the rest slide down a row.

document.getElementById('ts-add').addEventListener('click', function () {
  ts.classList.remove('is-demo');
  var row = document.getElementById('ts-tpl').content.firstElementChild.cloneNode(true);
  row.classList.add('is-shut');
  tsList.insertBefore(row, tsList.firstChild);
  void row.offsetWidth; // two passes so the grid transition actually animates
  row.classList.remove('is-shut');
  tsCountUp();
});

02Change history diff that puts values back

How an activity feed ui design shows a change history on screen

The old value is struck through with del and the new one underlined with ins, so the before-and-after reads at a glance.

Change history diff that puts values back
Open in a new tab

02 · Change history diff that puts values back — Measured area 2.813% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

delinssteps(1, end)

How to read the code

Each row's Undo button snaps that one row back to its previous value and updates the count of remaining edits.

b.addEventListener('click', function () {
  dh.classList.remove('is-demo');
  var row = b.closest('.dh__row');
  var back = row.classList.toggle('is-back');
  b.setAttribute('aria-pressed', back ? 'true' : 'false');
  dhLeft += back ? -1 : 1;
  dhCount();
});

03Notification list that splits read from unread

What moves

Unread rows keep a blue dot pulsing on a white card; opening one makes the dot vanish and the row cut to its read color in a single frame.

Notification list that splits read from unread
Open in a new tab

03 · Notification list that splits read from unread — Measured area 15.917% · moving frames 19/23Original by GODRICH · SCSS and React ship in the zip · See the password

scalesteps(1, end)aria-live

What to change

Mark all read flips every remaining row, and the leftover count is announced out loud.

function ncSync() {
  var left = ncRows.filter(function (r) {
    return !r.classList.contains('is-read');
  }).length;
  ncBadge.textContent = ncBadge.getAttribute('data-t')
    .replace('{n}', left);
}
document.getElementById('nc-all').addEventListener('click', function () {
  nc.classList.remove('is-demo');
  ncRows.forEach(function (r) { r.classList.add('is-read'); });
  ncSync();
});

04Social mention cards that roll in from the side

What you see

Every fresh mention rolls in from the right edge, tilts a touch, then settles upright.

Social mention cards that roll in from the side
Open in a new tab

04 · Social mention cards that roll in from the side — Measured area 30.385% · moving frames 20/23Original by GODRICH · SCSS and React ship in the zip · See the password

translateXrotaterole="log"

Where to look in the code

Mentions only arrive and never scatter away, and because the list is a role="log", each newcomer is read out in order.

document.getElementById('mn-more').addEventListener('click', function () {
  mn.classList.remove('is-demo');
  var row = document.getElementById('mn-tpl').content.firstElementChild.cloneNode(true);
  mnList.insertBefore(row, mnList.firstChild);
  row.addEventListener('animationend', function () {
    row.classList.remove('is-in');
  }, { once: true });
});

05Mini comment thread with folding replies

What happens on screen

The reply bundle folds and unfolds as grid-template-rows travels between 0fr and 1fr, and the toggle carries aria-expanded.

Mini comment thread with folding replies
Open in a new tab

05 · Mini comment thread with folding replies — Measured area 16.678% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

grid-template-rowsaria-expandedtranslateY

How to read the code

Pressing Reply lifts a new comment in from the bottom of the bundle.

function ctOpen(on) {
  ctRe.classList.toggle('is-open', on);
  ctTg.setAttribute('aria-expanded', on ? 'true' : 'false');
  ctTg.classList.toggle('is-open', on);
}
ctTg.addEventListener('click', function () {
  ct.classList.remove('is-demo');
  ctOpen(!ctRe.classList.contains('is-open'));
});

06Status badge timeline that lights up stage by stage

What moves

Submit, review, and approve stack vertically, and the connector fills up to whichever stage is current.

Status badge timeline that lights up stage by stage
Open in a new tab

06 · Status badge timeline that lights up stage by stage — Measured area 1.622% · moving frames 18/23Original by GODRICH · SCSS and React ship in the zip · See the password

scaleYsteps(1, end)aria-current

What to change

Pressing Next stage hands aria-current to the new stage, and the phase chip rewrites itself to match.

function stGo(i) {
  stAt = (i + stRows.length) % stRows.length;
  stRows.forEach(function (r, n) {
    r.classList.toggle('is-now', n === stAt);
    r.classList.toggle('is-done', n < stAt);
    if (n === stAt) { r.setAttribute('aria-current', 'step'); }
    else { r.removeAttribute('aria-current'); }
  });
  stPhase.setAttribute('data-at', String(stAt));
}

07System log filtered by level chips

What you see

Info, warning, and error chips remember their pressed state with aria-pressed, and only the pressed levels keep their rows on screen while the rest drop out through hidden.

System log filtered by level chips
Open in a new tab

07 · System log filtered by level chips — Measured area 29.574% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-pressedhiddensteps(1, end)

Where to look in the code

Turning every chip off means no filtering at all, so every line comes back.

function lgFilter() {
  var on = lgChips.filter(function (c) {
    return c.getAttribute('aria-pressed') === 'true';
  }).map(function (c) { return c.getAttribute('data-k'); });
  var showAll = on.length === 0 || on.length === lgChips.length;
  lgRows.forEach(function (r) {
    r.hidden = !(showAll || on.indexOf(r.getAttribute('data-k')) >= 0);
  });
}

08The moment an empty feed meets its first activity

What happens on screen

A freshly opened service spends most of its life with an empty feed.

The moment an empty feed meets its first activity
Open in a new tab

08 · The moment an empty feed meets its first activity — Measured area 18.88% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

steps(1, end)translateYaria-live

How to read the code

The empty-state notice steps aside in one cut, the first activity rises from below, and the region is marked aria-live so screen readers hear what just arrived.

function efSync(on) {
  ef.classList.toggle('has-act', on);
  efPhase.textContent = on
    ? efPhase.getAttribute('data-t1').replace('{n}', efCount)
    : efPhase.getAttribute('data-t2');
}
document.getElementById('ef-add').addEventListener('click', function () {
  ef.classList.remove('is-demo');
  var row = document.getElementById('ef-tpl').content.firstElementChild.cloneNode(true);
  efList.insertBefore(row, efList.firstChild);
  efCount++;
  efSync(true);
});

09Summary counter that tallies today in hourly bars

What moves

When today's count moves, the number is announced, and the hourly bars grow from their roots on an even grid.

Summary counter that tallies today in hourly bars
Open in a new tab

09 · Summary counter that tallies today in hourly bars — Measured area 7.003% · moving frames 21/23Original by GODRICH · SCSS and React ship in the zip · See the password

aria-livescaleYtransform-origin

What to change

Pressing Recount actually raises the number and actually stretches the last bar.

function tick(ts) {
  if (!t0) { t0 = ts; }
  var p = Math.min(1, (ts - t0) / 400);
  var v = Math.round(from + (to - from) * p);
  scN.textContent = String(v);
  if (p < 1) { requestAnimationFrame(tick); }
}
requestAnimationFrame(tick);
w.style.setProperty('--f', '.85'); // the bar itself actually grows

Where it breaks — the trap

The first thing that breaks is stacking two animations that move the same property onto one element. The unread dot in 03 needed both a vanishing cut and a pulse, both written against transform, and whichever animation came later in the list simply won, so the cut never happened at all. The cut moved to opacity, and the pulse kept transform. The bars in 09 hit the same wall with a grow animation and a fold animation side by side; the fold won forever, and the bars never grew, so both ended up merged into one animation that grows and folds inside a single cycle.

The second is splitting a sentence into fragments. Slicing an activity line into name, particle, and object looks tidy in Korean, but the moment the page ships in English or Japanese, the word order collapses. The fix was to keep every line as a name node plus one plain sentence node, and move emphasis from inline words to the row's background and its left bar. That is why the sentences survive a language swap.

The third is resetting a transform that was doing layout work. The stage dots in 06 sit on the rail with translate(-50%, -50%), and a motion-off block that wipes transforms wholesale flings every dot into the corner of its rail. Dots keep their positioning transform, and only the animation is switched off.

A related habit worth keeping: thin elements report small areas. The connector in 06 stayed at the smallest cumulative area of the nine, 1.62%, while the average difference inside its changed pixels reached 92.6. The diff rows in 02 sat at 2.81% area while holding an intensity of 72.3. A thin part speaks through intensity rather than area, so the two numbers are always read separately.

The last one is the narrow screen. A phone gives these widgets 174px of vertical room inside a 320px cell, which is not enough for every row, so the row-dropping widgets drop their oldest rows first (01, 03, 04, 05), the log drops its last line (07), and the remaining four shrink type and spacing only. Trimming row counts to fit that cell gets tighter once the copy is swapped per language, and that length drift is measured separately in i18n JSON checks. The archive holding all nine vanilla and React versions asks for the password sub453jm, and everything shown in this article is inside it.

Accessibility

With reduced-motion turned on, all nine loops stop, and only the result states remain. The new row stays grown, read items keep their read color, and the approval timeline rests past review, so what got decided is still on screen when the motion is gone.

For feed widgets, accessibility comes down to how a newcomer gets announced. Stacking lists are wrapped in role="log" with aria-live="polite" (01, 04, 05), and the numbers and hints that refresh are read at the same time (03, 08, 09). Pressed states go through aria-pressed (02, 07), folding through aria-expanded (05), and the current stage through aria-current (06).

Item On screen With a screen reader Operated by
01 activity stream new row lands on top role="log" reads the row Add activity
02 change history struck value → underlined value undo via aria-pressed Undo
03 notification list dot pulse → read color leftover count in aria-live open item · mark all
04 social mentions card rolls in from the side mention read via role="log" Fetch mentions
05 comment thread reply bundle folds aria-expanded toggle · Reply
06 status timeline connector fills aria-current="step" Next stage
07 log filter chip press, rows drop chips via aria-pressed chip toggle
08 empty feed switch empty state → first activity first activity in aria-live New activity · Clear
09 summary counter bars grow in stagger count in aria-live Recount

When to reach for role="log" instead of a status role is laid out in the MDN log role document. Screens that actually use these widgets live under the notifications category and the dashboard category, and the parts driven by real JavaScript sit in the JS category.

FAQ

How do I split work between toasts and a notification list ui?

If losing the message in three seconds is fine, use a toast; if it is a record someone might scroll back to, use a list. Toasts erase themselves, while the lists in this article keep their rows on screen so past activity stays readable. The roles split the same way: a toast is a role="status", a stacking list is a role="log".

Won't a screen reader get chatty if items keep arriving?

That is why aria-live sits on the list itself and each update adds exactly one row. Only the fresh row is read, and rows already read once stay silent. When a count changes, the small hint announces just the number instead of repeating the whole list.

What happens when the feed grows to hundreds of rows?

Show less instead of more, in three moves. Old rows fold away (05), only the wanted level stays visible (07), and the day's volume compresses into bars (09). Put those three together in a sidebar and the day still reads without ever unfolding the long list. When the numbers themselves have to move every second rather than the rows, stock ticker UI answers the same refresh problem from the value side.

Enter the archive password

The password is inside this article. You will find it as you read.