up.motion up.animation(name, animation)

JavaScript function

Defines a named animation.

Example

Here is the definition of the pre-defined fade-in animation:

up.animation('fade-in', function(element, options) {
  element.style.opacity = 0
  return up.animate(element, { opacity: 1 }, options)
})

Callback contract

For animations that can be expressed through CSS transitions, we recommend that your definitions end by calling up.animate() with an object argument, passing along your options and returning the result.

If you choose to not use up.animate() and roll your own animation code instead, your code must honor the following contract:

1. It must honor the options { duration, easing }, if given.
2. It must not remove any of the given elements from the DOM.
3. It returns a promise that is fulfilled when the animation has ended.
4. If during the animation an event up:motion:finish is emitted on the given element, the animation instantly jumps to the last frame and resolves the returned promise.

Calling up.animate() with an object argument will take care of all these points.