Page Transitions: Grid-to-single card expand animation

[georgeolaru]

Parent

Part of #363 (Page Transitions feature)

Summary

Port the grid-to-single transition from Pile: when clicking a project/post card in an archive grid, the card's colored border expands to fill the screen before the new page loads, creating a seamless transition tied to each item's color.

How it works in Pile

Hover effect

Each grid card has an absolutely-positioned .c-pile__item-border div that starts with border-width: 0. On hover, GSAP animates the border inward to ~14px (configurable via CSS font-size hack). The border color matches the project's designated color.

Per-project color

• Stored as post meta: _pile_project_color (portfolio) / _hero_background_color (pages)
• Admin UI: WordPress color picker (iris) in a meta box
• Auto-suggestion: when a featured image is set, an AJAX call uses the Tonesque PHP class (GD-based) to extract the dominant color and pre-populate the picker

Click → expand animation (projectBorderOutTimeline)

1. Position overlay — The global .js-border overlay is positioned exactly over the clicked card using offset() and outerWidth/Height()
2. Step A (0.4s) — Border grows inward until it fills the card solid (borderWidth = half dimensions), then sets backgroundColor to match
3. Step B (0.5s) — Scale + translate the now-solid overlay from the card's position to cover the full viewport
4. Total: ~0.9s before content swap

Enter animation

Standard border collapse (0.6s, quart.inOut) — same as regular page transitions.

Key Pile files

• assets/js/modules/AjaxLoading.js — projectBorderOutTimeline() (lines 177–225), linkClicked dispatcher (lines 46–50)
• assets/js/modules/ArchiveParallax.js — hover animation in bindEvents() (lines 35–94)
• assets/scss/components/_pile.scss — .c-pile__item-border styles (lines 257–276)
• template-parts/content-portfolio.php — inline border-color style output
• inc/extras.php — pile_get_the_hero_background_color() (lines 984–1000)
• inc/activation.php — color picker meta box (lines 221–228)

Considerations for Anima

• Anima uses Nova Blocks collection cards instead of Pile's custom grid. The hover border and color output need to integrate with Nova Blocks' card markup.
• Color source: Anima uses Style Manager palettes (--sm-* variables). Could use the card's palette/variation color instead of a separate post meta field.
• The Barba.js v2 transition system already supports the generic border expand/collapse. This needs a conditional transition that detects grid card clicks and uses the card-specific animation instead.