transition - Metabind

.transition(
    type:
        | "opacity" | "slide" | "scale" | "identity" | "blurReplace"
        | { move: "top" | "bottom" | "leading" | "trailing" }
        | { push: "top" | "bottom" | "leading" | "trailing" }
        | { scale: number; anchor?: UnitPoint }
        | { offset: { x?: number; y?: number } }
        | { blurReplace: "downUp" | "upUp" }
        | { asymmetric: { insertion: SimpleTransition; removal: SimpleTransition } }
        | { combined: SimpleTransition[] }
): Component

type

Transition

required

The transition to apply when the component is inserted or removed. Can be a built-in string or a configuration object.Built-in transitions:

"opacity" — fades in/out
"slide" — slides in from the leading edge and out to the trailing edge
"scale" — scales from zero to full size
"identity" — no animation (instant)
"blurReplace" — cross-fades with a blur effect

Directional transitions:

{ move: edge } — slides in/out from the specified edge
{ push: edge } — pushes the old content out as the new content pushes in from the specified edge

Parameterized transitions:

{ scale: number, anchor?: UnitPoint } — scales from a specific value, optionally around an anchor point
{ offset: { x?, y? } } — slides in/out by a specific offset
{ blurReplace: "downUp" | "upUp" } — blur replace with a directional style

Composite transitions:

{ asymmetric: { insertion, removal } } — different transitions for insertion and removal
{ combined: [...] } — multiple transitions applied simultaneously

Support

Usage

Opacity (fade)

const body = () => {
    const [isVisible, setIsVisible] = useState(true)
    return VStack([
        Button("Toggle", () => setIsVisible(!isVisible)),
        isVisible ? Text("Hello").transition("opacity") : Empty()
    ])
}

Slide

const body = () => {
    const [show, setShow] = useState(false)
    return VStack([
        Button("Toggle", () => setShow(!show)),
        show ? Text("Sliding text").transition("slide") : Empty()
    ])
}

Scale

const body = () => {
    const [show, setShow] = useState(false)
    return VStack([
        Button("Toggle", () => setShow(!show)),
        show ? Circle()
            .frame({ width: 50, height: 50 })
            .foregroundStyle(Color("blue"))
            .transition("scale") : Empty()
    ])
}

Move from edge

const body = () => {
    const [show, setShow] = useState(false)
    return VStack([
        Button("Toggle", () => setShow(!show)),
        show ? Text("From bottom")
            .transition({ move: "bottom" }) : Empty()
    ])
}

Push from edge

const body = () => {
    const [show, setShow] = useState(false)
    return VStack([
        Button("Toggle", () => setShow(!show)),
        show ? Text("Pushed in")
            .transition({ push: "leading" }) : Empty()
    ])
}

Scale with anchor

const body = () => {
    const [show, setShow] = useState(false)
    return VStack([
        Button("Toggle", () => setShow(!show)),
        show ? Text("Scale from top")
            .transition({ scale: 0, anchor: "top" }) : Empty()
    ])
}

Offset transition

const body = () => {
    const [show, setShow] = useState(false)
    return VStack([
        Button("Toggle", () => setShow(!show)),
        show ? Text("Offset")
            .transition({ offset: { x: 100, y: 0 } }) : Empty()
    ])
}

Blur replace

const body = () => {
    const [show, setShow] = useState(false)
    return VStack([
        Button("Toggle", () => setShow(!show)),
        show ? Text("Blur")
            .transition({ blurReplace: "downUp" }) : Empty()
    ])
}

Asymmetric transition

Use a different animation for insertion and removal.

const body = () => {
    const [show, setShow] = useState(false)
    return VStack([
        Button("Toggle", () => setShow(!show)),
        show ? Text("Asymmetric")
            .transition({
                asymmetric: {
                    insertion: "slide",
                    removal: "opacity"
                }
            }) : Empty()
    ])
}

Combined transitions

Apply multiple transitions simultaneously.

const body = () => {
    const [show, setShow] = useState(false)
    return VStack([
        Button("Toggle", () => setShow(!show)),
        show ? Text("Combined")
            .transition({
                combined: ["opacity", "scale"]
            }) : Empty()
    ])
}

Notes

Transitions only play when a component is conditionally inserted or removed from the view hierarchy.
The "identity" transition can be used to explicitly disable animations on insertion/removal.

​Support

​Usage

​Opacity (fade)

​Slide

​Scale

​Move from edge

​Push from edge

​Scale with anchor

​Offset transition

​Blur replace

​Asymmetric transition

​Combined transitions

​Notes