How to: add animation (the Animation panel)

Do you want to bring more attention to your steps? Use animations! With animations, you can create a smooth transition when the step appears. You can use Bounce or Shake effect to immediately grab users’ attention, and Bounce in up/down when the step is changing to provide a smoother introduction. With Bounce in left/right, you can make your welcome message stand out. Each step can have a different animation set up based on your needs, or imagination. Feel free to play with the settings! However, remember to not overuse animation, as it may overwhelm and distract your users. Consistent and balanced use of animation will keep your users engaged.

In this article, we’ll show you how to use the Animation panel.

  1. In the Authoring tool, while you’re editing or adding a walkthrough or a tooltip, select a step from a list of steps or click “+” to create a new one.

  1. Scroll down to the Animation panel and expand the tab. Now, you see the Animation panel.

With global settings per site, you can set up the animation to Fade In and Out.

To set it up:

  1. Login to the Inline Manual portal with your email and password.

  2. Go to Sites and choose a site you want to apply changes for.

  1. Go to Settings and choose Player appearance on the left menu.

  1. In the Popover tab, enable popover animations.

Each step's animation can be altered in the authoring tool too, with more options for animation effects. You can use for example Bounce effect, to grab the users attention, or different slide in animations.

To add an animation to a step:

  1. While editing or adding a step, scroll down to the Animation panel and expand the tab.

  2. Click Override for this step button.

  1. From a drop-down menu, choose the animation effect you want to apply to this step.

  1. Adjust animation duration with a bar.

Was this article helpful?