transitions

Default transition (200ms ease)

Press → to step through.

```{.r code-line-style="|hi:2|hi:3|hi:4-5"}
df |>
  ...
```

df |>
  filter(cyl == 6) |>
  group_by(gear) |>
  summarise(m = mean(mpg)) |>
  arrange(desc(m))

Slow + ease-out (block level)

```{r}
#| code-line-style:
#|   transition: { duration: 800, easing: ease-out }
#|   steps:
#|     - hi: 2
#|     - hi: 3
#|     - hi: 4-5
```

df |>
  filter(cyl == 6) |>
  group_by(gear) |>
  summarise(m = mean(mpg)) |>
  arrange(desc(m))

Per-step transition

```{r}
#| code-line-style:
#|   steps:
#|     - hi: 2
#|       transition: { duration: 200 }
#|     - hi: 3
#|       transition: { duration: 1000, easing: ease-in-out }
#|     - hi: 4-5
#|       transition: { duration: 200 }
```

df |>
  filter(cyl == 6) |>
  group_by(gear) |>
  summarise(m = mean(mpg)) |>
  arrange(desc(m))

Per-style transition

A custom style can carry its own timing.

```{r}
#| code-line-style:
#|   styles:
#|     slow-focus: { bg: "#fff3bf", duration: 1200, easing: ease-out }
#|   steps:
#|     - slow-focus: 3
```

df |>
  filter(cyl == 6) |>
  group_by(gear) |>
  summarise(m = mean(mpg)) |>
  arrange(desc(m))

Presence: lines enter and exit

The diff preset’s add and rem carry presence semantics. add lines slide in from height 0; rem lines collapse out.

```{r}
#| code-line-style:
#|   transition: { duration: 600 }
#|   steps:
#|     - rem: 3-5
#|     - add: 3-6
```

df |>
  filter(cyl == 6) |>
  group_by(gear) |>
  summarise(
    m = mean(mpg),
    .by = gear
  ) |>
  arrange(desc(m))

Named transition modes

mode: none | fade | slide | wipe | morph.

```{r}
#| code-line-style:
#|   transition: { mode: slide, duration: 500 }
#|   steps:
#|     - hi: 2
#|     - hi: 3
#|     - hi: 4-5
```

df |>
  filter(cyl == 6) |>
  group_by(gear) |>
  summarise(m = mean(mpg)) |>
  arrange(desc(m))

Mode per step

```{r}
#| code-line-style:
#|   steps:
#|     - hi: 2
#|       transition: { mode: fade }
#|     - hi: 3
#|       transition: { mode: wipe, duration: 600 }
#|     - hi: 4-5
#|       transition: { mode: morph }
```

df |>
  filter(cyl == 6) |>
  group_by(gear) |>
  summarise(m = mean(mpg)) |>
  arrange(desc(m))