Marp CLI experimental transition showcase

transition-showcase.md

Marp CLI experimental

Transition showcase 🪄

clockwise

<!-- transition: clockwise -->

counterclockwise

<!-- transition: counterclockwise -->

cover

<!-- transition: cover -->

coverflow

<!-- transition: coverflow -->

cube

<!-- transition: cube -->

cylinder

<!-- transition: cylinder -->

diamond

<!-- transition: diamond -->

drop

<!-- transition: drop -->

explode

<!-- transition: explode -->

fade

<!-- transition: fade -->

fade-out

<!-- transition: fade-out -->

fall

<!-- transition: fall -->

flip

<!-- transition: flip -->

glow

<!-- transition: glow -->

implode

<!-- transition: implode -->

in-out

<!-- transition: in-out -->

iris-in

<!-- transition: iris-in -->

iris-out

<!-- transition: iris-out -->

melt

<!-- transition: melt -->

overlap

<!-- transition: overlap -->

pivot

<!-- transition: pivot -->

pull

<!-- transition: pull -->

push

<!-- transition: push -->

reveal

<!-- transition: reveal -->

rotate

<!-- transition: rotate -->

slide

<!-- transition: slide -->

star

<!-- transition: star -->

swap

<!-- transition: swap -->

swipe

<!-- transition: swipe -->

swoosh

<!-- transition: swoosh -->

wipe

<!-- transition: wipe -->

wiper

<!-- transition: wiper -->

zoom

<!-- transition: zoom -->

And more, make your own!

@keyframes marp-outgoing-transition-vertical-scroll {
  from { transform: translateY(0%); }
  to { transform: translateY(-100%); }
}

@keyframes marp-incoming-transition-vertical-scroll {
  from { transform: translateY(100%); }
  to { transform: translateY(0%); }
}

Try making more creative transitions!

@keyframes marp-outgoing-transition-vflip {
  0% { animation-timing-function: ease-in; }
  50% {
    transform: perspective(100vw) translateZ(-100vw) rotateX(-90deg);
    opacity: 0.5;
    animation-timing-function: step-end;
  }
  100% { opacity: 0; }
}
@keyframes marp-incoming-transition-vflip {
  0% {
    animation-timing-function: step-start;
    opacity: 0;
  }
  50% {
    transform: perspective(100vw) translateZ(-100vw) rotateX(90deg);
    opacity: 0.5;
    animation-timing-function: ease-out;
  }
}

Marp CLI experimental

Transition showcase 🪄

marp-team/marp-cli#447

---

Marp CLI's preview mode --preview can try transitions easily!

marp --template bespoke --bespoke.transition --preview ./transition.md

Experimental transition is depending on Shared Element Transitions proposal, and available in Marp CLI v2.0.0 and later + Chrome/Chromium 101 and later w/ "documentTransition API" experiment.