FLIP Animated Responsive Grid Switcher

This is an Animated FLIP Grid Switcher. It bridges the gap between two distinct visual states — Card and List — by mathematically calculating the delta of motion. The component ensures that interface elements do not simply “jump” during a layout change but glide organically into their new coordinates, maintaining spatial continuity for the user.

Specs

• Weight: ~2.5 KB (Code only). No dependencies.
• Performance: Ultra-high. All animations are handled via the GPU using transform and opacity.
• Theming / Customization: Easily controlled via :root CSS variables for duration and easing.
• Responsiveness: Fluid. Uses CSS Grid for layout management.
• Graceful Degradation: If JavaScript is disabled, the layout still switches instantly via the toggle, but without smooth interpolation.

Anatomy

The system operates like a calculated physical transition.

• HTML (The Skeleton): A parent container .articles with a data-view attribute. Interactive nodes are marked with data-flip to signify participation in the transition.
• CSS (The Skin): Defines two rigid states: a two-column grid for “cards” and a horizontal flex-like layout for “list.” Transition properties are applied to specific attributes to avoid animating properties that cause reflow.
• JS (The Nervous System): The FLIP coordinator (First, Last, Invert, Play). It records positions before the state change, triggers the change, calculates the inverse transform, and lets CSS variables handle the “return” to the final state.

Logic

The core mechanism is “Coordinate Inversion”.

const dx = lastRect.x - firstRect.x;
const dy = lastRect.y - firstRect.y;
const dw = lastRect.width / firstRect.width;
const dh = lastRect.height / firstRect.height;
// ...
lastEl.style.setProperty("--dx", dx);

Instead of animating an object from Point A to Point B (which is hard to predict in a grid), the script calculates the physical difference between where the element was and where it is. It then applies a negative translation to the element at the exact moment it moves to its new position. This makes the element appear as if it never moved, allowing the CSS transition to smoothly play back to zero.

Feel

Elastic and intentional. The use of cubic-bezier(0.6, 0, 0.4, 1) provides a professional, “heavy” feel to the movement. The way the images and content containers independently rescale and reposition creates a sense of high-end mechanical assembly. It removes the digital barrier by providing a clear, logical explanation of where elements go during a layout shift.