Edit this page

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.


source ElementorjQueryorstring
target ElementorjQueryorstring

The target element that will remain in the DOM once the transition finished.

It should be detached before calling up.morph().

transition Function(oldElement, newElement, options)orstring

Can either be:

  • The name of a registered transition
  • A function performing the transition (same contract as a function passed to up.transition())
[options.duration=300] number optional

The duration of the animation, in milliseconds.

[options.easing='ease'] string optional

The timing function that controls the transition's acceleration.

See MDN documentation for a list of pre-defined timing functions.

[options.reveal=false] boolean optional

Whether to reveal the new element by scrolling its parent viewport.

Return value

A promise that fulfills when the transition ends.