---
name: "[up-transition]"
area: "API"
kind: "HTML attribute"
parent: "up.motion module"
url: "https://unpoly.com/api/up-transition"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.motion module](https://unpoly.com/api/up.motion.md)</nav>

# [up-transition]

Swaps a fragment with an animated transition.

You can use a [predefined transition](https://unpoly.com/learn/transitions.md#available-transitions) or [define your own](https://unpoly.com/api/up.transition.md).

> <nav aria-label="Guides">
>
> - [Learn: Transitions](https://unpoly.com/learn/transitions.md)
>
> </nav>
>
> #### Note
>
> Transitions are not possible when replacing the `<body>` element. To transition the entire page, wrap it in a container element.

<nav aria-label="Contents">

#### Contents

- [Following a link with animation](#following-a-link-with-animation)
- [Submitting a form with animation](#submitting-a-form-with-animation)
- [Modifying attributes](#attributes)

</nav>

## Following a link with animation {#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.

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

## Submitting a form with animation {#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.

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

---

## Modifying attributes {#attributes}

> #### Info
>
> All modifying attributes for [`[up-follow]`](https://unpoly.com/api/up-follow.md) (links) or [`[up-submit]`](https://unpoly.com/api/up-submit.md) (forms) may also be used.

### [up-transition] {#up-transition}

(optional)

The [name of a transition](https://unpoly.com/learn/transitions.md#available-transitions).

### [up-duration] {#up-duration}

(optional)

The duration of the transition in milliseconds.

### [up-easing] {#up-easing}

(optional)

The [timing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) that controls the acceleration of the transition.

### [up-fail-transition] {#up-fail-transition}

(optional)

The transition to use when the server responds with an error code.

See [Handling error responses](https://unpoly.com/learn/error-responses.md).