DroppyTransition

enum DroppyTransition

What the host already animates

You never animate the entrance of a view you hand the host. A live activity row and a HUD are mounted exactly like Droppy's own and appear, grow and close on Droppy's own code, so the root of makeCompactLeading(), makeCompactTrailing() and a DropletHUDRequest's content takes no transition of its own. Add one and the entrance plays twice.

What these are for

Content you swap yourself while the surface is already up: a glyph that changes in a wing, a status line replaced by a result inside a card, a control that appears. Give each branch the same transition and let the branch change insert and remove it:

Image(systemName: isCleaning ? "stop.fill" : "keyboard")
    .id(isCleaning)
    .transition(DroppyTransition.compactContent)

Every transition carries its own curve, so it animates the same whether or not the state change is wrapped in withAnimation. The blur follows the host's budget (half on a 60Hz panel, a third in Low Power Mode) and Reduce Motion drops the blur and the fold, leaving the fade.

Type properties

compactContent

static var compactContent: AnyTransition { get }

Compact content unfolding out of the notch edge: a blur, a fade and a slight top-hinged fold, on notchOpen. It leaves on a short blur and fade.

The motion the host plays on a live activity's accessories and a HUD strip. Use it for content you swap inside a wing or a strip.

compactLeading

static var compactLeading: AnyTransition { get }

Leading-wing content collapsing horizontally toward the notch and growing back out of it, with a blur, on notchOpen.

Anchored at the wing's inner (trailing) edge, the way the Dynamic Island folds a side of its content into the cutout.

compactTrailing

static var compactTrailing: AnyTransition { get }

Trailing-wing content collapsing horizontally toward the notch and growing back out of it, anchored at the wing's inner (leading) edge.

element

static var element: AnyTransition { get }

One element appearing or leaving inside a card or a row: a blur, a fade, a horizontal scale from 0.8 and a slight fold, on notchOpen.

Droppy's own buttons and floating controls use this. Use it for a control, a label or a status line you swap while a card is up.

expandedContent

static var expandedContent: AnyTransition { get }

A whole card growing out of the notch and folding back up into it: a deep top-anchored scale from 0.4 by 0.2, a blur that clears before the card lands, a dim that follows the blur, and a slight fold. It opens on notchOpen and closes on notchClose.

This is precisely what the host plays on your card, published so the motion is not a guess. Put it on a view only when you swap one whole card layout for another inside a card that is already up; a single control inside a card takes element.