up.motion [up-transition]

HTML attribute

Swaps a fragment with an animated transition.

You can use a predefined transition or define your own.

Note

Transitions are not possible when replacing the <body> element. To transition the entire page, wrap it in a container element.

Following a link with animation

The link will load the fragment #story from the URL /page2. Once the response is received, the old fragment version will fly out to the left, while the new version will fly in from the right.

<a href="/page2"
  up-target="#story"
  up-transition="move-left">
  Next page
</a>

Submitting a form with animation

The form will load the fragment .content from the URL /tasks. Once the response is received, the old fragment version will fade out, while the new version will fade in.

<form action="/tasks"
  up-target=".content"
  up-transition="cross-fade">
  ...
</form>