Filter Chip Bar
A scrollable row of multi-select filter chips over a results grid: each chip opens a tick, the row carries its own drawn scrollbar, the grid re-flows with GSAP Flip and the results count counts to its new number.
About This Component
The filter row most catalogues and portfolios need, with the re-flow done properly. Chips are multi-select and horizontally scrollable, so a long tag list stays on one line, under a scroll rail drawn by the component rather than the browser. Toggling one opens a tick inside the chip, which pushes its neighbours along instead of popping over them, and the grid below re-flows in a single GSAP Flip pass: cards that no longer match drop away, the survivors slide to their new places rather than jumping, and cards coming back fade up in position.
Read the full effect overview
The results count tweens to its new value instead of snapping, so removing eight cards reads as a change of scale. Clear all collapses the active chips one after another and refills the grid. Every chip is a real button carrying aria-pressed, so the whole thing is operable from the keyboard, and left and right arrows walk the row.
One HTML file, one stylesheet, one script, vanilla JavaScript, GSAP and the Flip plugin, no framework. Ships in three looks, vault, paper and soft, switched with one data-variant attribute.
What's Included
- Multi-select chips in a horizontally scrollable row with fades at both ends
- A drawn scroll rail that sizes itself to the row and drags it
- A tick that opens inside the chip and pushes its neighbours along
- One Flip pass for all three populations: cards leaving, sliding and returning
- Results count that counts to its new number
- Clear all that collapses the active chips in sequence
- Empty state when the picked tags have nothing in common
- Real buttons with aria-pressed; arrow keys walk the row
- Three shipped variants: vault, paper, soft
Perfect For
- Portfolio and case-study grids filtered by discipline
- Product listings filtered by category, material or colour
- Job and directory boards with several tag axes
- Docs and blog indexes filtered by topic
How It Works
One Flip pass, three populations
A toggle records Flip.getState over every card, sets the hidden attribute on the ones that no longer match, then hands the state to Flip.from. Leaving cards are taken out of the grid with absolute:true so the survivors can travel over them, onEnter fades and scales the returning cards up, and onLeave fades the departing ones out. Flip's own scale option is never used, because it would squash the card titles for the whole tween.
Holding the layout still
absolute:true takes every card out of flow, not just the leavers, so the grid would collapse to nothing for the length of the tween and drop the rest of the page up behind the travelling cards. The grid's height is measured before and after the filter runs and tweened between the two, released only once Flip has put the cards back. An absolutely positioned grid item also stretches to fill its grid area, so the cards are set to align-self: start for the duration or each one balloons to the full height of the grid and animates back down.
The chip tick
Each chip carries a tick whose box starts at zero width with overflow hidden. Turning the chip on tweens its width, margin and opacity open, so the chip grows and the row shifts along with it. Only width, margin and opacity move: a CSS transform on the tick would later be read back by GSAP as a pixel offset. Clear all runs the same tween in reverse with a stagger, then re-flows the grid once the row has given its width back.
The scroll rail
The row's native scrollbar is hidden and drawn as a rail of its own, because Chrome drops every ::-webkit-scrollbar rule as soon as scrollbar-width is set, which leaves a browser-default light bar under a dark row. The grip is sized from the visible fraction of the row, positioned from scrollLeft with a quickSetter rather than a tween so it cannot trail the wheel, and drags the row back when pulled. It fades out entirely when the chips fit, and a fade lights at each end only when there is more row that way.
The counting total
The count is tweened through a proxy object rather than written straight out, with the rounded value pushed into the element on every update and the exact number set on completion, so it always lands on the truth. One proxy serves the whole component: a fresh object per toggle left the previous tween alive and writing its own numbers into the same element. Under prefers-reduced-motion the same call writes the final number immediately.