Tilt Grid Content Reveal

This is a Tilt Grid Content Reveal. It transforms a standard masonry image gallery into a highly interactive, spatial experience. Its function is to provide an engaging browsing interface where hovering induces physical 3D tilt, and clicking smoothly expands the thumbnail into a full-screen presentation, completely immersing the user in the selected content.

Specs

• Weight: Heavy. Requires GSAP (TweenMax), Masonry, ImagesLoaded, and Charming.js.
• Performance: High, but computationally demanding. The 3D tilt calculates cursor position relative to element bounds every mouse move. Expanding the grid item relies on getBoundingClientRect() to calculate scale and translation matrices natively in the GPU.
• Theming / Customization: CSS variables control core colors (--color-text, --color-bg). The grid layout parameters (column width, gutter) are defined in the Masonry JS configuration.
• Responsiveness: Fluid. Masonry handles the reflow of columns based on window width. The expansion animation calculates viewport dimensions (winsize.width, winsize.height) on the fly to ensure perfect full-screen coverage.
• Graceful Degradation: [!] Heavily reliant on JavaScript. Without it, the grid remains hidden (display: none without the .js class on the root). Requires CSS variables support (includes an explicit fallback alert).

Anatomy

The structure separates the initial grid view from the expanded content view.

• HTML (The Skeleton): The .grid contains .grid__item links holding thumbnails, titles, and numbers. Completely separate from the grid is the .content container, holding .content__item blocks corresponding directly (by array index) to the grid items.
• CSS (The Skin): Sets up the base z-indexing and grid styling. Uses a continuous @keyframes animation for the background SVG star pattern. The .js class controls the initial visibility of the expanded content sections.
• JS (The Nervous System): An Object-Oriented architecture using ES6 Classes (GridItem, Content, Grid). It calculates relative mouse positions for the 3D tilt, handles the complex FLIP (First, Last, Invert, Play) animation to expand the background box (item.DOM.bg), and triggers Charming.js for letter-by-letter typography animations.

Logic

The core illusion is the “Calculated Background Expansion”:

const itemDim = this.getSizePosition(item.DOM.el);
item.DOM.bg.style.position = 'fixed';

const d = Math.hypot(winsize.width, winsize.height);

TweenMax.to(item.DOM.bg, 1.2, {
	x: winsize.width/2 - (itemDim.left+itemDim.width/2),
	y: winsize.height/2 - (itemDim.top+itemDim.height/2),
	scaleX: d/itemDim.width,
	scaleY: d/itemDim.height,
});

Instead of simply fading a full-screen div in, the script takes the specific white background of the clicked grid item (.grid__item-bg), changes it to fixed, and animates its scale and translation. It uses the Pythagorean theorem (Math.hypot) to calculate the diagonal distance of the screen. By scaling the small white box to this massive diagonal length, it guarantees the entire screen is covered, creating a seamless transition from a small card to a blank canvas for the incoming content.

Feel

Spatial, weighty, and highly polished. The tilt effect is responsive but constrained by easing (Expo.easeOut), making the cards feel heavy and tactile rather than hyper-sensitive. The transition from grid to full-screen is cinematic; the background scales out, the original image scales and moves to its new position, and the text staggers in letter-by-letter, turning a simple click into an orchestrated event.