up.motion up.morph(oldElement, newElement, transition, [options])

JavaScript function

Performs an animated transition between two elements.

Transitions are implemented by performing two animations in parallel, causing oldElement to disappear and newElement to appear.

• newElement is inserted before oldElement
• oldElement is removed from the document flow with position: absolute. It will be positioned over its original place in the flow that is now occupied by newElement.
• Both oldElement and newElement are animated in parallel
• oldElement is removed from the DOM

Named transitions

Unpoly ships with a number of predefined transitions.

You can define additional named transitions using up.transition().

Implementation details

During a transition, both the old and new element occupy the same position on the screen.

Since the CSS layout flow will usually not allow two elements to overlay the same space, Unpoly does the following:

• The old and new elements are cloned
• The old element is removed from the layout flow using display: hidden
• The new element is hidden, but still leaves space in the layout flow by setting visibility: hidden
• The clones are absolutely positioned over the original elements.
• The transition is applied to the cloned elements. At no point will the hidden, original elements be animated.
• When the transition has finished, the clones are removed from the DOM and the new element is shown. The old element remains hidden in the DOM.