API Animation

module up.motion

When you update a page fragment you can animate the change.

Transitions

When we morph between an old and a new element, we call it a transition.

For instance, you may add an [up-transition] attribute to your links or forms to smoothly fade out the old element while fading in the new element:

<a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Fusers"
  up-target=".list"
  up-transition="cross-fade">
  Show users
</a>

Animations

In contrast, when we animate a new element without simultaneously removing an old element, we call it an animation.

An example for an animation is opening a new overlay. We can animate the appearance of the dialog by adding an [up-animation] attribute to the opening link:

<a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Fusers"
  up-target=".list"
  up-layer="new"
  up-animation="move-from-top">
  Show users
</a>

Which animations are available?

Unpoly ships with a number of predefined transitions and predefined animations.

You can define custom animations using up.transition() and up.animation().