With the Comparison Interaction Element, you can create interesting interactions for the sales or client. By swiping you can move an image to reveal or hide another image. For example, you can show case the visual differences between two images. This type of effect is often used to explain changes in statistical graphs, display the progressive effect of a medical treatment or simply hide important information through a hidden image. Some use cases:

Cutaway graphics:

You can use comparisons for multiple purposes and one of them are cutaway illustrations. They are a powerful method of visualizing information and allow the interactive explanation about how things work and their interior functions. By adding cutaways, your audience can navigate inside an organ or object to view internal parts, elements, and features, such as the example below.

Reveal the course of a graph:

You can achieve the overall effect you see in the video below by adding two similar images from the same statistical graph in which the second image (or hidden image) contains the progressive change you want to highlight.

Reveal the answer to a question:

Another simple, yet engaging way to interact with your audience is by hiding the answer to a question in Comparison element. The hidden image should contain the answer to the front picture.

Here is how to add comparison elements to your presentation

  • Open the presentation and navigate to the slide to which you would like to add the comparison element.

  • Move your mouse to the Add (+) icon, then click Interaction.

  • Click Comparison element and the element will be added to your slide.

  • Click on the settings icon and the menu of the element will open from the right side. Name your element then click the upload file button. Select the 'front' image you want to swipe in compare.

  • Now you can determine the animation of the first image, using the following options:

Options

Description

Swipe

Do you prefer a vertical swipe of the image or a horizontal one.

Position

Where do you want to image to start? From the top, which will be fully open (100%) or from the bottom, which will be fully hidden (0%)

Custom position

Next to 100%, 50% or 0% position of the compare image, you can set an exact, custom start position (in %)

  • The image will reveal over or hide the background. If you want to hide the background, we advise to add this background as another image (background image) with a similar size. Why? When you load the slide, the html element will load slightly slower than the main content, in that case the user will have already seen the background.

  • You can adjust the size of the Comparison element by moving your mouse cursor and resize the area. When your mouse cursor is inside the area, you can drag to reposition the Comparison element.

See a video of how to create a comparison element:

Did this answer your question?