Edit this page

up.motion up.animate(element, animation, [options])
JavaScript function

Applies the given animation to the given element.

Example

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

You can pass additional options:

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

Named animations

Unpoly ships with a number of predefined animations

You can define additional named animations using up.animation().

Animating CSS properties directly

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

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

CSS properties must be given in kebab-case, not camelCase.

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

element ElementorjQueryorstring

The element to animate.

animation stringorFunction(element, options): PromiseorObject

Can either be:

  • The name of a registered animation
  • A function performing the animation (same contract as a function passed to up.animation())
  • An object of CSS attributes describing the last frame of the animation (using kebeb-case property names)
[options.duration=300] number optional

The duration of the animation, in milliseconds.

[options.easing='ease'] string optional

The timing function that controls the animation's acceleration.

See MDN documentation for a list of pre-defined timing functions.

Return value

A promise for the animation's end.