The Zoomable component

The Zoomable component allows any content to be zoomable. It offers an enriched interaction by allowing users to focus on specific details and interact with different levels of zoom.

Here are several use cases for the Zoomable component: 

• A tourist map of a city: users can zoom in on different neighborhoods to discover points of interest, such as museums, restaurants, or parks. When a user zooms in on a point of interest, a pop-up window appears, offering information, photos, and even links for more details.
• Interactive product catalog: customers can zoom in on products to see the details, textures, and features of each item. When zooming in on a specific product, additional options are displayed, such as color selection, size, or adding to the cart.
• A "Look and Find" game: users must zoom into the image to find objects or characters hidden within. When the object appears, it is automatically unlocked on the list of items to find.

Properties of the Zoomable Component

Select the Zoomable component to access its properties:

• Minimum / maximum zoom: set the zoom limits to control how far users can zoom in or out.
• Zoom focus point: this property is useful when users do not interact with the zoomable content. It is a point that goes from 0, 0 (top left point) to 1.1 (bottom right). It is relative to the content displayed at that time.
• User zoom: choose whether users can freely zoom in the content.
• User scrolling: choose whether users can move freely in the content.
• Object exclusion: exclude certain objects from zoom so they maintain a constant size and position.

Editing and Creating Markers

To edit the zoomable content, double-click on the component area. On the left, you can customize the controls to facilitate navigation, by making the Slider or the Minimap appear.

Use markers to identify specific zoom positions and areas. You have the choice between creating a zoom marker or a visibility marker.

To add a marker, click on the + button in the dedicated menu. By default, a zoom marker is created. If you want to create a visibility marker, click on the dropdown arrow. Markers are automatically created based on where you are located. You can modify these properties on the right panel. 

The properties of zoom markers are: 

• the zoom level
• the option of automatic centering

The properties of visibility markers are:

• the target
• the level of visibility (in percentage)
• the type: Entering or Exiting

Triggering an Action Based on a Zoom Position

You can configure actions that are triggered at specific zoom levels. For example, display additional information or start an animation when the user reaches a certain level of zoom.

Here in the example below, the goal is to unlock the object in the list of items to find.