Add Animation and Transitions

Introduction

Along with other Product Finder appearance settings, such as the change of the Product Finder theme, color palette, and font, and appearance settings related specifically to question, answers, and results pages, there are animations that can be added to different sections of the Product Finder. 

If the functionality has been enabled, you will see the "Animations and transitions" section. 

1. Animate Answers on Hover and Click

Select the "Animate answers on hover and click" toggle, and select the style that you want to use.

Currently, there are two styles available for each standard theme.

1.1. Examples of Animations 

The answer tiles will be animated upon hover and click but their exact behavior will strongly depend on the selected theme.

For example, this is the Default style of the Helium theme.

This is the "Alternative" style of the Oxygen theme.

This article will not provide each and every type of animation, as they will be applied immediately and visible in the Design --> Appearance section.

2. Show Transitions Between Questions

By default, the questions are switched from one to another without any transition. 

2.1. Fade Transition

Enable the "Show transition between questions" toggle to make it nicer. 

By default, the "Fade" transition is selected. 

2.2. Slide Transition

Another possible transition effect is when a new question slides in, replacing the old one. 

In order to change the transition style, click the drop-down arrow under "Transition style" and select "Slide left" option.

 

2.3. Changing the Speed

By default, the speed of these transitions is set to "Medium", but you can set it to be faster or slower.The changes will be immediately applied and seen in the Appearance --> Design page.

 

  KEEP IN MIND!

It's important to make sure that the custom CSS settings used in the Product Finder do not conflict with the animations and transitions applied to it. As for any appearance changes, we recommend that you preview the Product Finder to make sure it all bands up to create exactly the look you desire!