Adding zoom/fade animation effects to a step or element
Animations
Animating the steps is a brilliant way to keep your users’ or visitors’ attention. According to a study by Microsoft, the average human being now has an eight-second attention span. The same was measured as twelve seconds in the year 2000. This sharp decline in human attention spans makes the better usage of the animations a necessity to keep your users or visitors engaged.
You can create three animations to get the users’ attention. You can add zoom or fade animation for the step bubble or you can add zoom animation to the element itself which the step associated with.
Step Bubble Animation
You can apply either a zooming effect which will animate the step bubble’s size or fading effect which will animate the step bubble’s transparency. You can separately set up both properties when the step gets activated or completed.
Zoom
- Click on the cogwheel icon to open the properties of the step you want to set up the zooming animation
- Open the Appearance tab
- Define the zooming effect’s conditions in the Step section. Choose Zoom, Enter to select zooming effect on when entering to the step or Choose Zoom, Leave to select zooming effect on when leaving the step.
- Save the settings
Tip: The zoom strength is applied only for the element zoom animation. Step Animation is not influenced by zoom effect setting and the zoom percentage setting gets ignored and gets applied as 100%.
Fade
Fading animation affects the transparency of the step bubble.
- Click on the cogwheel icon to open the properties of the step you want to set up the zooming animation
- Open the Appearance tab
- Define the fade effect’s conditions in the Step section. Choose Fade, Enter to select fading effect on when entering to the step or Choose Fade, Leave to select fading effect on when leaving the step.
- Save settings.
Tip: If you are applying only the fading effect, zoom percentage setting gets ignored and gets applied as 100%.
Element Animation
The difference between the element animation and step bubble animation is that; the step animations animate step/bubble itself, element animations animate element in the application associated with the step.
Zoom
- Click on the cogwheel icon to open the properties of the step you want to set up the zooming animation
- Open the Appearance tab
- Define the zooming animation’s conditions in the Element section. Choose Zoom, Enter to select zooming effect on when entering to the step or Choose Zoom, Leave to select zooming effect on when leaving the step.
- Define zooming strength. You can set it up to 200% zoom.
Tip: The element animation does not have a fade but zoom animation.
- Save the settings.