Animated Fluid Grid Product Filter

This is an Animated Fluid Grid Product Filter. It structures a dynamic catalog where elements don’t just disappear but physically slide into their new positions. Its function is to solve the jarring layout shifts common in standard filtering by using the Web Animations API to interpolate container height and element coordinates simultaneously.

Specs

• Weight: 6.2 KB (Vanilla JS + CSS).
• Performance: GPU-accelerated. Uses transform (translate/scale) to avoid layout recalculations during active animation frames.
• Theming / Customization: Synchronizes logic with CSS. It reads transition-duration and easing directly from the stylesheet to ensure JS and CSS stay in lockstep.
• Responsiveness: Inherits behavior from CSS Grid (auto-fill, minmax). Re-calculates element dimensions on window resize.
• Web APIs: Web Animations API (element.animate), DOMRect API.
• Graceful Degradation: If JS fails, products filter instantly via class toggles.

Anatomy

The component operates like a digital sorting machine.

• HTML (The Skeleton): A flat list of cards inside a grid container. Every card has an .product__inner wrapper to facilitate inverse scaling.
• CSS (The Skin): Defines the grid layout and the visual states for “hidden” items. It sets the master timing variables that the JS consumes.
• JS (The Nervous System): The engine. It captures the “Start” state, applies changes, captures the “End” state, and then calculates the delta to animate the journey between the two.

Logic

The intelligence lies in the “Inverse Scaling” and “Height Interpolation”.

const duration = parseFloat(computedStyle.transitionDuration) * 1000;
const gridAnimation = grid.animate([
  { height: `${grid.__start}px` },
  { height: `${grid.__end}px` }
], animationSettings);

While the outer card scales down, the .product__inner container scales up at the same rate. This cancels out the distortion of the text and images, making it look as though the border is shrinking around the content rather than squashing the entire object. Simultaneously, the parent grid animates its own height to match the new content flow, preventing the “jumping” of footer elements.

Feel

Structural and cohesive. The interface feels like a physical shelf being rearranged. The logic respects the laws of motion; cards don’t just vanish — they yield space to others. It bridges the gap between static web pages and high-end native application motion.