Slide transitions for Marp have made stably available now!

[yhatt]

Slide transitions are available in Marp CLI v2.4.0+ or Marp for VS Code v2.5.0+, with Chrome 111+ or Safari 18+.

In the latest Marp, you can easily add transition effects working on HTML presentation (bespoke template) to your Markdown slides, powered by View Transitions API.

Prerequisite

The slide transition depends on View Transitions API in the using browser. To show transition effects, a viewer has to show HTML slide in the browser which have supported View Transitions API.

• Chrome: ✅ (111-)
• Edge: ✅ (111-)
• Firefox: ❌ (View Transitions API mozilla/standards-positions#677)
• Safari: ✅ (18-)
  • Safari still has a rendering issue probably caused by the application of polyfill to avoid long-standing bug. You can track the issues on Safari at [Bespoke transitions] Compatibility with Safari marp-cli#572.

Example: fade transition

Both of Marp CLI and Marp for VS Code have supported transition local directive.

---
marp: true
transition: fade
---

...

Marp CLI example (by the Marp maintainer: https://yhatt.github.io/marp-cli-example/) has a fade transition in every pages.

33 built-in transitions

Marp has built-in 33 transition effects out of the box, and you can change the kind of transitions with the directive.

You can see all of these transition effects in action on the documentation of Marp CLI, or auto-completion help for transition local directive provided by Marp for VS Code.

• Marp CLI documentation: Built-in transitions (NOTICE: There are a lot of visual stimulus)

Define custom transitions

You also can define the custom transitions and animations, both in theme CSS and Markdown inline style. We provide unlimited extensibility of your own transitions with your creativity.

/* Define "triangle" transition effect */
@keyframes marp-incoming-transition-triangle {
  from { clip-path: polygon(0% 0%, 0% 0%, 0% 0%); }
  to { clip-path: polygon(0% 0%, 200% 0%, 0% 200%); }
}
@keyframes marp-incoming-transition-backward-triangle {
  from { clip-path: polygon(100% 100%, 100% 100%, 100% 100%); }
  to { clip-path: polygon(-100% 100%, 100% -100%, 100% 100%); }
}

• Marp CLI documentation: Custom transitions
• [Blog article] Marp CLI: How to make custom transition

Morphing animations

With sprinkling just a little bit of CSS, you can use morphing effects in Marp that are similar to PowerPoint's Morph or Keynote's Magic Move. It should be useful to help the audience understand the flow of things between pages.

It may sound unbelievable, but this is actually part of the web standard (proposal)!

• Marp CLI documentation: Morphing animations

Reduce transition effects

If the browser has detected that the viewer set a setting an operating system preference to reduce motions and animations in the interface, every effects by transitions will force to a simple fade animation.

If you want to know details about why required this, see the article "prefers-reduced-motion: Sometimes less movement is more" by web.dev.

Examples

I'm providing the showcase of built-in transitions, creative examples about custom transitions, and a simple example of morphing animation at Glitch.

• Marp CLI page transition showcase
• Marp CLI custom transitions example
• Marp CLI transition with morphing animation

Documentation

To see the documentations about the overall of the transition feature provided by Marp CLI bespoke template, check out https://github.com/marp-team/marp-cli/blob/main/docs/bespoke-transitions/README.md.

Related issue: marp-team/marp-cli#447

[chenxizhang]

very cool

[macbuse]

Hi

I just can't get this to work sorry. I did :

curl -o ./showcase.md https://gist.githubusercontent.com/yhatt/d9e86ee53eb8816aaf9c996e773b6f82/raw/transition-showcase.md

npx @marp-team/marp-cli@^2 --bespoke.transition --preview transition-showcase.md

but only the initial fade transition seems to work.

marp -- version

@marp-team/marp-cli v2.2.2 (w/ user-installed @marp-team/marp-core v2.4.2)

Chrome Version 108.0.5359.124 (Official Build) (64-bit)

---

[yhatt]

UPDATE: If you still have seen fade transitions in every kind of transitions with the stable version, perhaps you may have set a preference about reduced motion in your OS/device. Please confirm the setting.

[xkeshav]

does this transition feature support in vs code extension? I have tried but in Preview Pane I cant see any transition. using like below.

vs code: 1.86
Marp for VS Code v 2.8.0
mac OS v 14.2.0

---
marp: true
transition: fade
theme: gaia
paginate: true
backgroundColor: #ffa
footer: '**@xkeshav**'
---

[yhatt]

The Markdown preview pane in VS Code does not have the concept of "switching pages," so transitions will not be displayed. The actual behavior can be seen in the IntelliSense help and the exported HTML.

[boldandbusted]

Just FYI, mozilla/standards-positions#677 (comment) has been marked as completed. Does that mean this works with Firefox now? Thanks.

[yhatt]

It means Mozilla's position for View Transitions API has been confirmed as positive, but does not mean already available in Firefox.You can peek Bugzilla for the progress of implementation for Firefox.

[kirnhans]

Does Marp support in-slide animations? Like having text appear on the slide on-click, without changing the slide.

[yhatt]

Yes. Marp's HTML slides support slide transitions, simple build lists through Fragmented list feature, and autoplay animations using CSS Animations. Using Fragmented list would be best to use in your use case.

[kirnhans]

Thank you for the prompt response! Is there any prospect of this feature being added to the pptx slides? It must be quite a bit more complicated.