FLIP Modal

FLIP Modal is a grid where clicking a tile sends it flying out of its slot to become the panel, then back to the exact slot it came from when you close it.

FLIP Modal is a grid where clicking a tile sends it flying out of its slot to become the panel, then back to the exact slot it came from when you close it. The tile is carried, not copied. Most expanding galleries draw a second copy inside the overlay and fade between the two, which restarts whatever was inside: a video jumps back to zero, an embed reloads. This moves the original layer, so everything inside keeps playing through the transition. It is keyboard complete. Tab reaches every tile, Enter opens, focus stays inside the panel while it is open and returns to the tile on close, and Escape always closes. Visitors who ask their system for reduced motion get the panel without the flight. Fourteen property controls cover columns, gap, tile shape, corner radius, open size, whether the panel keeps the tile's shape, travel time and easing, backdrop colour and blur, the close button, and click outside to close. Setting up Paste the component link into your Framer project's Insert panel. Nothing to install. Leave the Items slot empty to tune it on placeholders first. Good to know Every layer in the Items slot needs to sit at the top level of your page, alongside the breakpoint frame. That is how Framer slots work. Because the panel is the tile itself, design each tile to look right both small and large. Keep Aspect on for photos so nothing stretches; turn it off for cards of text.

Tiles that fly out into a modal