Back to Pack GalleryMotion Pack 09 · Change
Filter results
When a filter changes, update the result count and visible items together.
Issues3 visible
- Homepage audit
- Motion glossary
- Release notes
Build a filter-results switch: after a filter is clicked, clearly move the active filter, fade qualifying cards in with slight upward travel over 180ms, fade non-matches out, and update the count in sync.
Motion rules
Update count, active condition, and grid content as one event.
Reduced motion
Replace visible results directly while retaining count and active filter.
Implementation
Copy HTML, CSS, and the JavaScript required for behavior together.