Edit this page

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

Performs an animated transition between two elements.

Transitions are implement by performing two animations in parallel, causing oldElement to disappear and the 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:

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

Elements

oldElement
required

The old element to transition away from.

It will remain attached when the transition finished, but may be hidden our be located outside the visible viewport.

newElement
required

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

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

Transition

transition
required

Can either be:

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

The duration of the animation, in milliseconds.

number
[options.easing='ease']
optional

The timing function that controls the transition's acceleration.

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

string

Return value

A promise that fulfills when the transition ends.