---
title: "DroppyTransition, DroppyKit"
description: "The content transitions Droppy's own notch surfaces use (DroppyKit 1.8.0)."
canonical: "https://getdroppy.app/docs/droppykit/api/droppy-transition"
last-updated: "2026-09-09"
---

# DroppyTransition

The content transitions Droppy's own notch surfaces use (DroppyKit 1.8.0).

`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`](https://getdroppy.app/docs/droppykit/api/droplet-hudrequest)'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`](https://getdroppy.app/docs/droppykit/api/droppy-animation#notch-open). 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`](https://getdroppy.app/docs/droppykit/api/droppy-animation#notch-open).

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`](https://getdroppy.app/docs/droppykit/api/droppy-animation#notch-open).

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`](https://getdroppy.app/docs/droppykit/api/droppy-animation#notch-open) and closes on [`notchClose`](https://getdroppy.app/docs/droppykit/api/droppy-animation#notch-close).

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`.