Is this CSS filter, the blur?

No. Filter here means picking a category.

What about multiple filters?

Keep the logic boring: a tile matches or it does not.

Does keyboard still work?

Yes, if the tiles and the filter buttons are real controls. After a filter, do not dump focus into nowhere.

What does reduced motion do?

The grid updates. The tiles do not travel.

Flip filter

A flip filter rearranges a grid when someone picks a category, so the tiles that remain slide into their new slots instead of popping, and the ones that leave have a short exit.

ScrollBuild difficulty: HardFlip

Also called Filterable grid, Animated filter, Category shuffle, Grid rearrange, Layout filter.

Here it is working.

Filter Text or Scroll. The cards take their new seats.

For designers

This is a click, not a scroll. The reader asked to see less, and the page should not punish them with a jump. It works when the set is small enough to hold in the head: a dozen projects, a handful of plans. A catalogue of 200 tiles is a job for search or a still list. The live Card page still owns what a tile is. You are animating a layout change on a real grid, with real buttons for the categories. Keyboard has to land somewhere after a filter, and the empty state has to be a real empty state.

Use this when

Someone is narrowing a small set of tiles by category, tag or a couple of filters.
The remaining items should keep their identity as they move.
You can fade or scale the ones that leave, rather than snapping them out.
Reduced motion can apply the new grid in one frame.

Reach for something else when

The set is a long list of names or a table of values. Stay still, or use Hoverable list.
One image should morph through frames as the page scrolls. Use Flip zone.
The reader is opening a panel of extra content. Use Accordion.
You wanted a block to arrive on scroll. Use Element reveal.

How to build it

Render the full set. Category buttons set a filter. Record the tiles state with Flip, hide or show the ones that do not match, then Flip.from so the survivors travel to their new slots. Absolute positioning during the flip stops the grid fighting itself. Give leaving and entering tiles a short fade or scale. If no tile matches, show an empty state. On reduced motion, apply the filter with no Flip.

Official GSAP

Flip.

const state = Flip.getState('.item');
// hide or show items
Flip.from(state, { duration: 0.45, ease: 'power2.inOut' });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Is this CSS filter, the blur?: No. Filter here means picking a category.
How many tiles?: A dozen is comfortable.
What about multiple filters?: Keep the logic boring: a tile matches or it does not.
Does keyboard still work?: Yes, if the tiles and the filter buttons are real controls. After a filter, do not dump focus into nowhere.
What does reduced motion do?: The grid updates. The tiles do not travel.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Image trail