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.

page.tsx

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
import { useState } from 'react';
import { Morph } from '@infinityfx/lively/layout';

export default function Page() {
    const [state, setState] = useState(false);

    return <>
        <Morph group="example" show={!state} deform={false}>
            <div style={{
                width: 100,
                height: 100,
                borderRadius: 8,
                backgroundColor: 'var(--clr-accent)',
                cursor: 'pointer'
            }} onClick={() => setState(!state)} />
        </Morph>

        <Morph group="example" show={state} deform={false}>
            <div style={{
                position: 'absolute',
                width: 200,
                height: 200,
                borderRadius: 100,
                backgroundColor: 'var(--clr-primary-100)',
                cursor: 'pointer'
            }} onClick={() => setState(!state)} />
        </Morph>
    </>;
}

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.

show: boolean

Whether the component is visible, should only be true for one component in a group at a time.