This procedure shows you how to change the pop-up window animation.

Overview

The theme-animation-duration specifies the delay (in seconds) that pop up windows take to open and close. The lower the number, the faster the pop up window is likely to appear. The style is defined in the theme.scss.json file.

Before you Begin

This procedure assumes you know how to create or locate theme parts, and how to add theme parts to a theme in your customization. To review, see the topics:

• Add a theme part
• Add a theme
• Modify a theme

Edit the value of the theme variable

Theme variables are set in the theme.scss.json file, included as part of a theme part. You can update the theme.scss.json file in an existing theme part, or you can create a new theme part.

Once you have identified the theme part you will create or modify, open the theme.scss.json file in a text editor.

Edit the value of the theme variable

To set the animation to a slower speed, set the theme-animation-duration style to a high number of seconds.

// in theme.scss.json
{
  ...
  "theme-animation-duration"               : "4.200s"
}

In this example, the animation is set to 4.2 seconds (a high number). When a pop up window is called, it appears to move slowly as it drops down from the menu bar.

To set the animation to a faster speed, set the theme-animation-duration theme variable to a fraction of a second.

// in theme.scss.json
{
  ...
  "theme-animation-duration"               : "0.200s"
}

In this example, the animation is set to 0.2 seconds (a low number). Pop up windows appear much faster.

Rebuild using grunt.

$ grunt --customization=<customization_project_dir>

Test

Test the animation works as expected. Open your application and click on the Application information menu icon to open the Product identification pop up window.

TIP: You may need to use CTRL + F5 to clear the browser cache before you see your changes.