withAnimation

withAnimation(body: () => void): Component;
withAnimation(animation: AnimationComponent, body: () => void): Component;

const body = () => {
    const [count, setCount] = useState(0)

    return VStack([
        Text(String(count)).font("largeTitle"),
        Button("Animate +1", () => {
            withAnimation(() => setCount(count + 1))
        })
    ])
}

const body = () => {
    const [isExpanded, setIsExpanded] = useState(false)

    return VStack([
        Button(isExpanded ? "Collapse" : "Expand", () => {
            withAnimation(Spring({ response: 0.5 }), () => {
                setIsExpanded(!isExpanded)
            })
        }),
        Rectangle()
            .fill(Color("blue"))
            .frame({ height: isExpanded ? 200 : 50 })
    ])
}

const body = () => {
    const [offset, setOffset] = useState(0)

    return VStack([
        Rectangle()
            .fill(Color("blue"))
            .frame({ width: 50, height: 50 })
            .offset({ x: offset, y: 0 }),
        Button("Move Right", () => {
            withAnimation(EaseInOut({ duration: 0.5 }), () => {
                setOffset(offset + 100)
            })
        })
    ])
}