Please enable JavaScript to view this site.

Navigation: Editing Animated Xplains

Animating Slide Transitions

Scroll Prev Top Next More

Before you start configuring animations for the transitions between slides it's important to understand how they work. A HelpXplain infographic is a single large HTML page on which all your slides are positioned. When the infographic is displayed it is not all visible at the same time. Instead, the page is moved around in a window referred to as the "viewport", that has the dimensions of a single slide.

By default, the viewport size is defined by the first slide in the infographic. See Size & Background for full instructions on configuring this.

Applying settings to multiple or all slides

You can apply settings to all slides by selecting the Slides Overview in the Slides list on the left.


1.Select Slides Overview at the top of the Slides list on the left.

2.Click in the canvas editing area where the slides are shown.

3.Press CTRL+A to select all slides or use SHIFT+Click to select multiple slides one after another.

4.Choose the settings you want to change in the Properties pane on the right.

Animated slide transitions

When the infographic displays a new slide with an animation the HTML page containing all the slides is shifted in the viewport, moving the first slide out of view and the new slide into view. If the new slide is smaller or larger than the previous slide it will zoom in or out to fill the window. If it is rotated in relation to the previous slide it will rotate into view to be positioned correctly in the window.

In addition to this, a background image can be defined with a virtual distance below the slides on the page, as if the slides were on a sheet of glass positioned above the background. When you do this you also get a 3D effect when the the page moves, zooms and rotates to display the slides. You can configure this with the Parallax Effect setting in the Properties pane on the right.

The Parallax Effect setting defines the distance from the background

The Parallax Effect setting defines
the distance from the background

Defining animated slide transitions

Slide transition animation is defined in the Position & Timing section in the Properties pane. You can only turn animation on or off (then the slide is replaced instantly) and the duration off the animation. Everything else is defined by the size and position of the slides on the canvas.


The animation "type" is defined by the positions of the slides on the canvas

In contrast to animated slide content you cannot define an animation "type" for slide transitions. How the slide is animated depends entirely on how and where it is positioned on the canvas and its size in relation to the other slides.

Slide transitions without animations

None of this applies if animation is disabled for slide transitions, for example in HowTo screencasts. Then you don't see the background at all and the slides don't move. They are simply replaced in the window instantaneously and there is no awareness of their positions on the page. Then the background is also invisible and thus irrelevant.

This is achieved by selecting the Show (no animation) option for individual or all slides. You can configure all slides at the same time by selecting them all in the Slides Overview and then configuring the settings in the Properties pane.