Slide transitions for Marp have made stably available now!

[yhatt]

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: ✅ (144-)
• Safari: ✅ (18-)

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

Note

Glitch has been shut down so examples are currently not available. I'll recover them sequentially as soon as prepared.

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.

[yhatt]

Transitions are now working on all modern browsers 🎉

I'm happy to announce that transitions are now working in all stable versions of modern browsers with the release of Firefox 144. The documentation of Marp CLI will also be updated soon.

Enjoy creating more effective slides using transitions 🥳

[Beurt]

This is huge! Thank you. I am wondering if transition (fade for instance) are possible on data-marpit-fragments?

[yhatt]

Transitions between slides and the fragmented list are different functionalities. If you want to animate fragments within a slide, use regular CSS transitions instead.

Example

<style>
  [data-bespoke-marp-fragment] {
    /* Set transition for fragment opacity */
    transition: opacity 0.5s linear;
  }

  [data-bespoke-marp-fragment="inactive"] {
    /* Revert the default style for inactive fragments by Marp CLI's bespoke template (visibility: hidden) */
    visibility: visible !important;

    /* Disable pointer events and interactivity for inactive fragments */
    pointer-events: none;
    interactivity: inert; /* Only supported in Chrome 135 and later */

    /* Set opacity to 0 */
    opacity: 0;

    @starting-style {
      /* Prevent unexpected fade-out transition on loading slide */
      opacity: 0;
    }
  }
</style>

# Hello

* Fragmented list item 1
* Fragmented list item 2
* Fragmented list item 3

[Beurt]

Of course, sorry I mismatched CSS and Slide transitions. Thank you for the example, it is very effective and seems pretty useful. I think it could help many others than me.

[pke]

Would parallax transitions be possible too? I don't know how one would define them, but I could imagine multiple backgrounds that are overlayed on top of each other?

[yhatt]

Marp's slide transitions are based on animations between single layers, so complex transitions like parallax effects are generally difficult. Check out https://marp.app/blog/how-to-make-custom-transition#the-anatomy-of-a-transition.

However, by using the view-transition-name CSS property, you can "detach" content within a slide from the transition. This might allow you to achieve a parallax effect for multiple images. ref. https://github.com/marp-team/marp-cli/tree/main/docs/bespoke-transitions#morphing-animations

Example

---
transition: cover
paginate: true
---

<style>
  /* Detach every contents in the slide from the root transition group */
  section > *, section::before, section::after {
    view-transition-name: match-element;
  }

  /* Background image overlay */
  img[alt="bg2"] {
    view-transition-name: bg2;

    position: absolute;
    display: block;
    width: 240px;
    height: auto;
    box-shadow: 0 4px 12px rgb(0 0 0 / .75);
  }
</style>

# Page 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem minima dicta fugit aspernatur. Omnis molestias quam numquam provident! Et repellat eaque quidem. Culpa, distinctio. Error itaque officia velit facere eos.

![bg opacity:0.3](https://picsum.photos/1920?image=29)
![bg2](https://picsum.photos/600/400?image=28)

<style scoped>
  img[alt="bg2"] {
    left: 80px;
    top: 500px;
    rotate: 5deg;
  }
</style>

---

# Page 2

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempore deserunt in beatae aut facilis, impedit obcaecati saepe ratione dignissimos accusantium autem laudantium nesciunt ex modi sit? Dolorum non nesciunt a!

![bg opacity:0.3](https://picsum.photos/1920?image=30)
![bg2](https://picsum.photos/600/400?image=32)

<style scoped>
  img[alt="bg2"] {
    right: 80px;
    top: 500px;
    rotate: -5deg;
  }
</style>

Since the detached content will be morphed between the 2 slides, you won't be able to set up detailed animations. However, depending on how you move the detached images on the background, it might produce better suggestive effect. It's up to you how you move the images.

[pke]

Wow, thanks @yhatt! I was not expecting such a swift response. I will give it a try!
Thanks!