Page Transitions

Simulate route transitions with Motion.timeline — outgoing content exits, incoming content enters.

animation ds-anim-transition

Usage

// Out → In page transition pattern
async function navigate(href) {
    // 1. Animate current page out
    await Motion.animate('#page-content',
        { opacity:[1,0], y:[0,-20] },
        { duration:0.2 }
    ).finished

    // 2. Fetch and swap content (or use Datastar @get)
    await loadNewContent(href)

    // 3. Animate new page in
    Motion.animate('#page-content',
        { opacity:[0,1], y:[20,0] },
        { duration:0.25, easing:'ease-out' }
    )
}

// With Datastar:
data-on:click="
  await Motion.animate('#view',{opacity:0,y:-16},{duration:0.15}).finished;
  @get('/view/'+$tab);
"