Transitions

Honeydeck uses named slide transitions. Set a deck-wide default in the first frontmatter block, then override individual slides when needed.

Deck defaults

---
transition: fade
transitionDuration: 200
transitionEasing: ease
---

Built-in transition names:

• fade — default crossfade
• none — no slide transition
• slide-left — horizontal slide, reverse-aware when navigating backward
• magic — explicit data-magic-id element movement with FLIP overlay clones

Slide overrides

Slide frontmatter controls the transition into that slide:

---
transition: slide-left
transitionDuration: 500
transitionEasing: cubic-bezier(0.22, 1, 0.36, 1)
---

# A slide with a custom entrance

Slides without transition frontmatter use the deck defaults.

Magic transition

transition: magic moves only elements you explicitly tag with matching data-magic-id values. Honeydeck keeps the outgoing and incoming slides mounted, measures tagged elements at runtime, hides the original tagged elements, animates fixed-position overlay clones, then restores the real slide DOM after the transition.

# Before

<span data-magic-id="world">World</span>

---
transition: magic
transitionDuration: 600
transitionEasing: ease-in-out
---

# After

Hello <span data-magic-id="world">World</span>

Matching rules:

• Same data-magic-id on both slides → the element moves.
• ID only on the previous slide → the element fades out.
• ID only on the incoming slide → the element fades in.
• Untagged content crossfades with the slide layers.
• Different IDs never match, even when the text is identical.

Magic is forward-only. When navigating backward into a slide that uses transition: magic, Honeydeck falls back to the layer crossfade instead of guessing a reverse morph.

Honeydeck does not perform automatic DOM diffing or text/tag heuristics. Layout chrome such as the navigation bar and global slide numbers is outside slide content and switches immediately unless you explicitly tag slide content yourself.

Custom transitions

Any transition name that is not built in becomes a CSS hook. For example:

---
transition: honey-spin
transitionDuration: 700
transitionEasing: cubic-bezier(0.22, 1, 0.36, 1)
---

# Custom CSS Transition

Honeydeck adds classes to only the entering and exiting slide layers:

<div class="honeydeck-slide-layer honeydeck-transition-honey-spin honeydeck-transition-enter">

<div class="honeydeck-slide-layer honeydeck-transition-honey-spin honeydeck-transition-exit">

Scope your CSS to both the transition name and enter/exit class:

.honeydeck-slide-layer.honeydeck-transition-honey-spin.honeydeck-transition-enter {
  animation-name: honey-spin-enter;
  animation-duration: var(--honeydeck-transition-duration);
  animation-timing-function: var(--honeydeck-transition-easing);
  animation-fill-mode: both;
}

.honeydeck-slide-layer.honeydeck-transition-honey-spin.honeydeck-transition-exit {
  animation-name: honey-spin-exit;
  animation-duration: var(--honeydeck-transition-duration);
  animation-timing-function: var(--honeydeck-transition-easing);
  animation-fill-mode: both;
}

Reverse-aware CSS

Honeydeck provides a direction variable:

--honeydeck-transition-direction: 1;  /* forward */
--honeydeck-transition-direction: -1; /* backward */

Use it in transform math when your custom transition should reverse with navigation direction:

@keyframes custom-enter {
  from {
    opacity: 0;
    transform: translateX(calc(40% * var(--honeydeck-transition-direction)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes custom-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(calc(-20% * var(--honeydeck-transition-direction)));
  }
}

Honeydeck cannot safely invert arbitrary custom keyframes automatically, so reverse behavior is opt-in through CSS variables.

Reduced motion

If the viewer has prefers-reduced-motion: reduce, Honeydeck disables slide transition animations.