# Lists & Animations

Slide elements animate in as you navigate

---

## Unordered Lists

- Items slide in with a staggered delay
- Each element animates independently
- Nested lists work too:
  - Sub-item one
  - Sub-item two
    - Even deeper nesting

---

## Ordered Lists

1. First things first
2. Then the second thing
3. And finally the third
4. Lists can be as long as you need

---

## Animated List Reveals

<!-- {"animate-li": true} -->

Add `<!-- {"animate-li": true} -->` to a slide to reveal list items one by one with the **→** arrow key.

- This item appears first
- Then this one
- Then this one
- And finally this one

Use **←** to go back one item at a time.

---

## Mixed Content Slide

Here is some intro text, followed by a list:

- Key point number one
- Key point number two
- Key point number three

And a closing statement below the list.

---

## Task Lists

- [x] Set up the project
- [x] Write the markdown
- [x] Add syntax highlighting
- [ ] Give the talk
- [ ] Celebrate 🎉

---

## Definition-style Lists

**Slide** — A single screen of content, separated by `---`

**Title Slide** — Uses `#` heading, centered with blue background

**Content Slide** — Uses `##` heading, white background

**Animation** — Staggered entrance effect on slide elements

---

## Animate-li Demo

<!-- {"animate-li": true} -->

Press **→** to reveal each step of this algorithm:

1. Read the input
2. Validate the data
3. Transform to internal format
4. Apply business logic
5. Persist the result
6. Return the response

---

# Navigation Tips

- **← →** — Previous / next slide (or list item in animate-li mode)
- **Home** — Jump to first slide
- **End** — Jump to last slide
- **L** — Toggle laser pointer