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

# up.animate(element, animation, [options])

Applies the given animation to the given element.

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Named animations](#named-animations)
- [Animating CSS properties directly](#animating-css-properties-directly)
- [Multiple animations on the same element](#multiple-animations-on-the-same-element)
- [Parameters](#parameters)
- [Return value](#return-value)

</nav>

## Example {#example}

```js
up.animate('.warning', 'fade-in')
```

You can pass additional options:

```js
up.animate('.warning', 'fade-in', {
  duration: 250,
  easing: 'linear'
})
```

## Named animations {#named-animations}

Unpoly ships with a number of [predefined animations](https://unpoly.com/learn/animations.md#available-animations)

You can define additional named animations using [`up.animation()`](https://unpoly.com/api/up.animation.md).

## Animating CSS properties directly {#animating-css-properties-directly}

By passing an object instead of an animation name, you can animate the CSS properties of the given element:

```js
let warning = document.querySelector('.warning')
warning.style.opacity = 0
up.animate(warning, { opacity: 1 })
```

CSS properties must be given using `kebab-case` keys.

## Multiple animations on the same element {#multiple-animations-on-the-same-element}

Unpoly doesn't allow more than one concurrent animation on the same element.

If you attempt to animate an element that is already being animated, the previous animation will instantly jump to its last frame before the new animation begins.

---

## Parameters {#parameters}

### Element {#parameters-element}

#### element {#element}

(required)

The element to animate.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | [jQuery](https://learn.jquery.com/using-jquery-core/jquery-object/) | string

### Animation {#parameters-animation}

#### animation {#animation}

(required)

Can either be:

- The name of a [registered](https://unpoly.com/api/up.animation.md) animation
- A function performing the animation (same contract as a function passed to [`up.animation()`](https://unpoly.com/api/up.animation.md))
- An object of CSS properties describing the last frame of the animation (using kebab-case property names)

Type: string | Function(element, options): [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) | [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

#### [options.duration=175] {#options.duration}

(optional)

The duration of the animation, in milliseconds.

Type: number

#### [options.easing='ease'] {#options.easing}

(optional)

The timing function that controls the animation's acceleration.

See [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) for a list of pre-defined timing functions.

Type: string

---

## Return value {#return-value}

A promise for the animation's end.

Type: [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)