Marp CLI experimental

Transition showcase 🪄

Marp CLI Experimental

clockwise

<!-- transition: clockwise -->
Transition showcase
Marp CLI Experimental

counterclockwise

<!-- transition: counterclockwise -->
Transition showcase
Marp CLI Experimental

cover

<!-- transition: cover -->
Transition showcase
Marp CLI Experimental

coverflow

<!-- transition: coverflow -->
Transition showcase
Marp CLI Experimental

cube

<!-- transition: cube -->
Transition showcase
Marp CLI Experimental

cylinder

<!-- transition: cylinder -->
Transition showcase
Marp CLI Experimental

diamond

<!-- transition: diamond -->
Transition showcase
Marp CLI Experimental

drop

<!-- transition: drop -->
Transition showcase
Marp CLI Experimental

explode

<!-- transition: explode -->
Transition showcase
Marp CLI Experimental

fade

<!-- transition: fade -->
Transition showcase
Marp CLI Experimental

fade-out

<!-- transition: fade-out -->
Transition showcase
Marp CLI Experimental

fall

<!-- transition: fall -->
Transition showcase
Marp CLI Experimental

flip

<!-- transition: flip -->
Transition showcase
Marp CLI Experimental

glow

<!-- transition: glow -->
Transition showcase
Marp CLI Experimental

implode

<!-- transition: implode -->
Transition showcase
Marp CLI Experimental

in-out

<!-- transition: in-out -->
Transition showcase
Marp CLI Experimental

iris-in

<!-- transition: iris-in -->
Transition showcase
Marp CLI Experimental

iris-out

<!-- transition: iris-out -->
Transition showcase
Marp CLI Experimental

melt

<!-- transition: melt -->
Transition showcase
Marp CLI Experimental

overlap

<!-- transition: overlap -->
Transition showcase
Marp CLI Experimental

pivot

<!-- transition: pivot -->
Transition showcase
Marp CLI Experimental

pull

<!-- transition: pull -->
Transition showcase
Marp CLI Experimental

push

<!-- transition: push -->
Transition showcase
Marp CLI Experimental

reveal

<!-- transition: reveal -->
Transition showcase
Marp CLI Experimental

rotate

<!-- transition: rotate -->
Transition showcase
Marp CLI Experimental

slide

<!-- transition: slide -->
Transition showcase
Marp CLI Experimental

star

<!-- transition: star -->
Transition showcase
Marp CLI Experimental

swap

<!-- transition: swap -->
Transition showcase
Marp CLI Experimental

swipe

<!-- transition: swipe -->
Transition showcase
Marp CLI Experimental

swoosh

<!-- transition: swoosh -->
Transition showcase
Marp CLI Experimental

wipe

<!-- transition: wipe -->
Transition showcase
Marp CLI Experimental

wiper

<!-- transition: wiper -->
Transition showcase
Marp CLI Experimental

zoom

<!-- transition: zoom -->
Transition showcase
Marp CLI Experimental

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%); }
}
Example: vertical-scroll
Marp CLI Experimental

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;
  }
}
Example: vflip

Marp CLI experimental

Transition showcase 🪄

https://github.com/marp-team/marp-cli/issues/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.