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

# `up.motion`

Features to animate fragment updates.

A _transition_ morphs an old element into its new version. Set an [`[up-transition]`](https://unpoly.com/api/up-transition.md) attribute on a link or form, or pass a `{ transition }` option to [`up.render()`](https://unpoly.com/api/up.render.md). An _animation_ shows or hides a single element without a counterpart, for example when an overlay opens with an [`[up-animation]`](https://unpoly.com/api/up-layer-new.md#up-animation) attribute, or when [`up.destroy()`](https://unpoly.com/api/up.destroy.md) removes a fragment.

Unpoly ships with [predefined transitions](https://unpoly.com/api/up.morph.md#named-transitions) and [predefined animations](https://unpoly.com/api/up.animate.md#named-animations). Define your own with [`up.transition()`](https://unpoly.com/api/up.transition.md) and [`up.animation()`](https://unpoly.com/api/up.animation.md). To play an effect outside a render pass, call [`up.animate()`](https://unpoly.com/api/up.animate.md) or [`up.morph()`](https://unpoly.com/api/up.morph.md) directly.

<nav aria-label="Guides">

- [Learn: Motion](https://unpoly.com/learn/motion.md)

</nav>

---

## Features {#features}

- ### [up.animate(element, animation, [options])](https://unpoly.com/api/up.animate.md) (JavaScript function)

  Applies the given animation to the given element.

- ### [up.animation(name, animation)](https://unpoly.com/api/up.animation.md) (JavaScript function)

  Defines a named animation.

- ### [up.morph(oldElement, newElement, transition, [options])](https://unpoly.com/api/up.morph.md) (JavaScript function)

  Performs an animated transition between two elements.

- ### [up.motion.config](https://unpoly.com/api/up.motion.config.md) (Configuration object)

  Sets default options for animations and transitions.

- ### [up.motion.finish([element])](https://unpoly.com/api/up.motion.finish.md) (JavaScript function)

  Completes animations and transitions.

- ### [up:motion:finish](https://unpoly.com/api/up:motion:finish.md) (DOM event)

  This event is emitted on an animating element by `up.motion.finish()` to request the animation to instantly finish and skip to the last frame.

- ### [up.motion.isEnabled()](https://unpoly.com/api/up.motion.isEnabled.md) (JavaScript function) (deprecated)

  Returns whether Unpoly will perform animations and transitions.

- ### [up.transition(name, transition)](https://unpoly.com/api/up.transition.md) (JavaScript function)

  Defines a named transition that morphs from one element to another.

- ### [[up-transition]](https://unpoly.com/api/up-transition.md) (HTML attribute)

  Swaps a fragment with an animated transition.