Morph

Used to morph one element into another. Different Morph components with the same group property can morph into eachother, based on whichever show property is true.

A list of AnimatableKey properties that the Morph component will animate can be specified using the cachable property. By default Morph will animate 7 different properties, that are the default properties specified in the Animatable component. The translate and scale properties also take into account the rendered size and position of an element.

Importing

1 
import { Morph } from '@infinityfx/lively/layout';

Usage

Properties

The Morph component inherits all properties from the Animatable component in addition to the following.

group:string

Morph components with the same group property will animate between eachother. This value is unique for the whole page.

transition?:{ duration?: number; easing?: Easing; reverse?: boolean; } = { duration: 0.5, easing: 'ease' }

The animation config to use for layout change animations.