Expand

Click a card: its picture lifts off, the page fades to its ground, the route changes, and the picture flies to the same picture on the new page, at the size and crop it has there. Then the page comes up around it. Here the target sits in a column at 4/5, not full screen. Live on the site: /works, a card into the demo's frame.

1 · To a picture in a column

מסעדה

תיירות

פורטפוליו

2 · To a full-screen cover

The same effect, the same three cards: the next page opens on the picture at the full screen under the bar, the copy over it. The target is just the cover's img with data-transition-to.

מסעדה, מסך מלא

תיירות, מסך מלא

פורטפוליו, מסך מלא

Recipe

// 1. the list page: the engine, links only (or once in the layout)
import UkPageTransitions from '@/components/uikit/UkPageTransitions'
<UkPageTransitions />

// 2. the card: the link asks for expand, the picture box is the source
<Link href="/projects/3" data-transition="expand">
  <div data-transition-from="">          {/* optional: else the link's img */}
    <img src="/p/3.jpg" alt="…" />
  </div>
</Link>

// 3. the item page: the same picture, marked as the target
<img src="/p/3.jpg" alt="…" data-transition-to="" />

// …or a full-screen cover: the cover's picture is the target
<section className="cover">                {/* min-height: 100svh */}
  <img src="/p/3.jpg" alt="…" data-transition-to="" />
  <h1>…</h1>
</section>

• The target is measured on the new page, after it renders: any size, any place, any crop (object-position is tweened to the target's).
• When the target is the same picture, loaded, at the same box, the clone simply goes: no crossfade to see. Anything else (a box, another picture) fades.
• The card is cloned as it looks at the click (hover scale and shade written in, then eased away), so a hover zoom is fine.
• The overlay sits under the navbar, so the bar stays. A card cut by a sticky bar starts cut and opens in flight.
• While it runs, <html data-uk-pt-running> is set: the new page can hold things back until it lands (UkLiveFrame keeps its loader and play button).
• No target on the new page: the picture fades where it is. No picture in the card: a plain fade.

Timing: the page fades to its ground (0.35s) while the card's hover eases out, the route changes, the picture flies (0.65s, power2.inOut), the page comes up around it (0.35s). Source: components/uikit/UkPageTransitions/page-transitions.ts.