Skip to content

Slide Transitions

When MPF switches the current slide on a display with another slide, you can set a transition effect that controls what this slide transition looks like. You can use these transitions with the slide_player and within shows. You can set transitions as a property of the new slide that comes in, or as a property of the outgoing transition when the current slide is removed. You can also control the duration (speed) of the transition.

Here's a list of all the types of transitions that MPF supports. Note that if you're reading the PDF or Epub version of this documentation, if you visit the documentation website (docs.missionpinball.org) then this page contains animated GIFs which show each of these transitions in action.

none

image

Setting a transition type of none means that no transition will be used, and the incoming slide instantly replaces the current slide.

push

image

The push transition means that the incoming slide "pushes" the outgoing slide out of the way. (e.g. the outgoing slide moves out while the incoming slide moves in)

Options for the push transition:

move_in

image

The move in transition means that the incoming slide moves in on top of the outgoing slide. The outgoing slide is not animated.

Options for the move_in transition:

move_out

Not working yet.

wipe

image

The wipe transition means that the display is wiped from the outgoing slide to the incoming one. Neither slide is animated.

Options for the wipe transition:

swap

image

The swap transition similates an app screen swap like on a mobile device. The outgoing slide moves out of the way and the incoming slide comes in on top of it.

Options for the swap transition:

fade

image

The fade transition is a classic crossfade from the outgoing slide to the incoming one.

Options for the fade transition:

fade_back

image

The fade_back transition causes the outgoing slide to shrink and fade away, revealing the incoming slide.

Options for the fade_back transition:

rise_in

image

The rise in transition causes the incoming slide to fade in and rise up from the center of the display. It's essentially the opposite of the fade_back transition.

Options for the rise_in transition:

Configuring Transitions

Transitions are specified as an additional property of a slide_player: config or the slides: section of a show config. For example:

#! slides:
#!   slide1:
#!     - type: text
#!       text: "SLIDE 1"
slide_player:
  left_ramp_hit:
    slide1:
      transition:
        type: push
        duration: 2s
        direction: right
##! test
#! post left_ramp_hit
#! advance_time_and_run .1
#! assert_text_on_top_slide "SLIDE 1"

Hopefully the above example is obvious by now. When the event "left_ramp_hit" happens, MPF will show the slide called "slide1:, using the push transition, with a transition time of 2 seconds, pushing the new slide in from the right.

Transitions can be combined with other slide settings, like this:

#! slides:
#!   slide1:
#!     - type: text
#!       text: "SLIDE 1"
slide_player:
  left_ramp_hit:
    slide1:
      transition:
        type: push
        duration: 2s
        direction: right
##! test
#! post left_ramp_hit
#! advance_time_and_run .1
#! assert_text_on_top_slide "SLIDE 1"

You can also configure transition_out: settings which are transitions that will be applied to a slide when it is removed, like this:

#! slides:
#!   slide1:
#!     - type: text
#!       text: "SLIDE 1"
slide_player:
  left_ramp_hit:
    slide1:
      transition:
        type: push
        duration: 2s
        direction: right
      transition_out:
        type: fade_back
##! test
#! post left_ramp_hit
#! advance_time_and_run .1
#! assert_text_on_top_slide "SLIDE 1"

Note

If the current slide has a transition_out: setting, and the new slide has a transition: setting, then the new slide's transition setting will take precedence.

Something missing or wrong? You can fix it!

This website is edited by people like you! Is something wrong or missing? Is something out of date, or can you explain it better?

Please help us! You can fix it yourself and be an official "open source" contributor!

It's easy! See our Beginner's guide to editing the docs.

Page navigation via the keyboard: < >

You can navigate this site via the keyboard. There are two modes:

General navigation, when search is not focused:

  • F , S , / : open search dialog
  • P , , : go to previous page
  • N , . : go to next page

While using the search function:

  • Down , Up : select next / previous result
  • Esc , Tab : close search
  • Enter : go to highlighted page in the results