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

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:

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

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.