Scenario Entrance Animation

In Wyn Enterprise, you can apply entrance animations to dashboard scenarios to create dynamic, engaging visuals. These animations enhance the viewing experience by gradually revealing components as the user navigates through the dashboard.

Entrance animations can be applied to most built-in and custom visuals, with the exception of Card Chart scenarios.

Apply Entrance Animations Using the Inspector Panel

To apply an entrance animation directly to a scenario:

1. Open your dashboard in the Dashboard Designer.

2. Select a scenario (e.g., Column Chart, Tab Container, Label Slicer).

3. In the Inspector panel, scroll to the Animation section.

4. Set the Entrance Animation property from the dropdown list.

Once selected, two additional properties appear:

• Delay (s) – Time before the animation starts (default: 0 seconds).

• Duration (s) – Time taken to complete the animation (default: 1.8 seconds).

You can repeat these steps for each scenario where you want to apply an entrance animation.

Example:

• On Page 2, add a bounceInUp animation to a Column Chart and a fadeInLeft animation to a Label Slicer.

• On Page 3, add a slideInRight animation to a Tab Container.

Available Entrance Animations

You can choose from a wide variety of entrance effects, including:

• Back In: backInDown, backInLeft, backInRight, backInUp

• Bounce In: bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp

• Fade In: fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp

• Slide In: slideInDown, slideInLeft, slideInRight, slideInUp

• Light Speed: lightSpeedInLeft, lightSpeedInRight

• Rotate In: rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight

• Zoom In: zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp

Note: Entrance animations are not supported on Card Chart scenarios.

Apply Animations Using Click Actions

Entrance animations can also be triggered dynamically through Click Actions using the Command option. This is useful when you want to show or hide components based on user interactions.

To set this up:

1. Select a component (e.g., an Image).

2. In the Inspector panel, under the Interaction section, set Click Action to Command.

3. Open the Command Settings dialog.

4. Add a Show, Hide, or Toggle command for the target component.

5. Specify the entrance animation in the animation settings.

This allows components to appear with an animation only when triggered by a user click.

For more details, see the article: Dynamic Display of Components

Preview the Dashboard

To see the animations in action:

• Click the Preview button in the Dashboard Designer.

• Navigate to the page containing your animated scenarios.

• Components will animate into view based on the settings you applied.