דילוג לתוכן הראשי
Overview|Storytelling|Entrances|Depth on Scroll|WOW|Section Transitions|Page Transitions|Loaders|Mouse & Hover|Infrastructure|How it works
<Component />page transitionOn click

לאיזה תוכןסוכנות, פורטפוליו, אתר חוויתי / כל לינק פנימי באתר, או רק לינקים שמבקשים

השאלההמעבר בין הדפים הוא חלק מהחוויה של האתר (סוכנות, פורטפוליו, אתר חוויתי)?

Classic transitions

שלושה מעברים על כל לינק פנימי באתר, בסגנון Barba: Curtain, Wipe ו-Fade. הדף הישן יוצא, הדף מתחלף מתחת לכיסוי, הדף החדש נכנס. רק דמו שמבקש, בשורה אחת ב-layout שלו; שאר הפרויקט לא טוען את זה בכלל.

שלושה מעברים

Curtain

data-transition="curtain"

פאנל עולה על הדף עם שם הדף החדש, הדף מתחלף מתחתיו, והפאנל יוצא למעלה.

לנסות

Wipe

data-transition="wipe"

אותו פאנל, מהצד, בכיוון הקריאה: נכנס מימין בעברית ויוצא שמאלה.

לנסות

Fade

data-transition="fade"

המסך דוהה לצבע הרקע של הדף וחוזר. השקט מבין השלושה.

לנסות

הכפתורים מובילים לשני עמודים מדומים, A ו-B, בעימודים שונים. בכל אחד מהם כפתור לכל מעבר אל העמוד השני. הטקסט של הדף החדש נכנס אחרי שהכיסוי יורד, מול העיניים.

שימוש

// the demo's layout.tsx: once
import UkPageTransitions from '@/components/uikit/UkPageTransitions'

<div data-demo="agency_27_09">
  <UkPageTransitions effect="curtain" />
  …
</div>

// one link with another effect, or none
<Link href="/work/3" data-transition="fade">
<Link href="/contact" data-transition="none">

// the curtain's text (default: the link's own text, up to 28 characters)
<Link href="/works" data-transition-label="העבודות">

// no effect prop: only the links that ask animate (this tab works that way)
<UkPageTransitions />

// a demo's own effect, registered from one of its client components
import { registerPageTransition } from '@/components/uikit/UkPageTransitions'
registerPageTransition('plate', {
  leave: ({ panel }) => gsap.to(panel, { … }),   // return the tween: it is awaited
  enter: ({ panel }) => gsap.to(panel, { … }),
})
PresetWhat it does
curtainA panel rises over the page with the link's label, the route changes under it, then it leaves upward (0.65s each way, power2.inOut).
wipeThe same, sideways, in the reading direction (in from the right in Hebrew, out to the left).
fadeThe screen fades to the page's ground and back.

The same engine has a fourth preset, expand: a card's picture flies into its place on the next page. It is a different kind of transition, with its own card and page: Expand.

איך זה עובד

(components/uikit/UkPageTransitions)

  1. Next already swaps pages without a reload (Barba's AJAX half). What it lacks are the hooks around the swap; the component is them, and it exists only where a layout mounts it.
  2. It picks the effect: the link's data-transition, else the component's effect, else nothing.
  3. It owns the click (preventDefault + stopPropagation), so neither a <Link> nor a component's own router.push navigates first. leave() runs, then the router, then enter() on gsap:init (the new page is ready).
  4. The new page's own entrance (trigger_box, split) waits for the cover: every animation the page built is wrapped in one paused timeline (gsap.exportRoot()), the cover lifts off a page still in its "before" state, and then the entrance plays in view. Otherwise an above-the-fold entrance would be over before the cover is gone. trigger_box and split don't know about it.
  5. The presets move a fixed overlay only, never the page, so a fixed or sticky navbar cannot jump. Colours come from the page's wrapper: --uk-page-transition-bg (default --foreground), --uk-page-transition-fg (default --background).
  6. While a run is on, <html data-uk-pt-running> is set and every click is held (the page that mounted the component may be gone by the arrival). A page can keep things back with it: UkLiveFrame waits with its iframe, play button and loader, so expand lands on a bare poster. Back pressed while the old page leaves cancels the run where it is.
  7. Left alone: new tabs, other sites, #hash links, the current page, reduced motion. Back/forward get no effect: the browser has swapped the page before anyone hears of it.