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().

oldElement

required

The old element to transition away from.

It will be removed from the DOM when the transition finishes.

Type: Element | jQuery | string

newElement

required

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

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

Type: Element | jQuery | string

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())

Type: Function(oldElement, newElement, options) | string

[options.duration=175]

optional

The duration of the transition, in milliseconds.

Type: 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.

Type: string

A promise that fulfills when the transition ends.

Type: Promise