Add Animation to Survey Elements

Form animation refers to the use of dynamic and interactive visual effects and transitions that enhance usability, guide users through a form, and create a more enjoyable form-filling experience. A survey creator can apply motion, fading, sliding, and other types of animation effects to individual form elements or the entire form, as shown in this demo. Switch between survey pages to see animation.

Animation effects are configured with CSS properties (transition, transform, transform-origin, and others). Create two or more CSS classes that specify transition rules by which a survey changes its styles. Refer to the index.css file for CSS rules used in this demo.

To animate elements on a certain event, you can use pseudo classes, such as hover or active. However, pseudo classes support only a limited number of events. Alternatively, animation effects can be applied using a JavaScript function.

This demo implements a custom animate(isShowing) function that applies and removes CSS classes to and from the survey HTML element based on the passed argument. This function should be called whenever you want to trigger animation. In this demo, animation effects apply when a survey is rendered, when users switch between pages, and when they end the survey. To call the animate function in these cases, handle the onAfterRenderSurvey, onCurrentPageChanging, onCurrentPageChanged, onCompleting, and onComplete events. Note that you need to disable the options.allow parameter to cancel switching between pages and survey completion and perform these operations in code after animation has finished. Refer to the JavaScript code to view event handler implementations.