DroppyTransition

enum DroppyTransition

What the host already animates

You never animate the entrance of a view you hand the host. Droppy does it, on these exact curves:

• A live activity's compact accessories and a HUD strip unfold out of the notch edge, the compactContent motion.
• A card, the hover card a live activity grows into and the card a HUD strip grows into, grows out of the notch with the shell and folds back up into it when the shell closes, the expandedContent motion. The compact content comes back once the card has gone.

So the root of makeCompactLeading(), makeCompactTrailing(), makeExpanded(context:) 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.