up.motion up.morph(source, target, transition, [options])

JavaScript function

Performs an animated transition between the source and target elements.

Transitions are implement by performing two animations in parallel, causing source to disappear and the target to appear.

• target is inserted before source
• source 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 target.
• Both source and target are animated in parallel
• source 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:

• 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.