--- title: Add Animation to Survey Elements product: Form Library description: SurveyJS supplies highly customizable editing tools that let you create surveys and forms. Apart from personalized elements, such as a logo, custom survey title, and description, you can enable form animation. Apply motion, fading, sliding, and other types of animation effects to form elements or the entire form. View this free code example for JavaScript to learn more. framework: React source: https://surveyjs.io/form-library/examples/add-animation-effects-to-form-elements/reactjs index: https://surveyjs.io/form-library/examples/overview.md --- # Add Animation to Survey Elements (React) 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. ## Configure Survey 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. ## Apply Animation to Survey Elements 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`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onAfterRenderSurvey), [`onCurrentPageChanging`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onCurrentPageChanging), [`onCurrentPageChanged`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onCurrentPageChanged), [`onCompleting`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onCompleting), and [`onComplete`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#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. ## Files ### `public/index.html` ```html
``` ### `src/SurveyComponent.jsx` ```js import React from "react"; import { Model } from "survey-core"; import { Survey } from "survey-react-ui"; import "survey-core/survey-core.min.css"; import "./index.css"; import { json } from "./json"; function animate (isShowing) { const element = document.getElementById("surveyElement"); if (!!element) { const classes = element.classList; if (!classes.contains("hidden")) { classes.add("hidden"); } isShowing ? classes.add("visible") : classes.remove("visible"); } } function showAnimated () { animate(true); } function hideAnimated () { animate(false); } var doAnimation = true; function SurveyComponent() { const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); survey.onAfterRenderSurvey.add(showAnimated); survey.onCurrentPageChanging.add(function (_, options) { if (!doAnimation) return; options.allow = false; setTimeout(function () { doAnimation = false; survey.currentPage = options.newCurrentPage; doAnimation = true; }, 1000); hideAnimated(); }); survey.onCurrentPageChanged.add(showAnimated); survey.onCompleting.add(function (_, options) { if (!doAnimation) return; options.allow = false; setTimeout(function () { doAnimation = false; survey.doComplete(); doAnimation = true; }, 1000); hideAnimated(); }); survey.onComplete.add(showAnimated); return (); } export default SurveyComponent; ``` ### `src/index.css` ```css .hidden { transition: all 1s ease-in-out; transform-origin: left top; transform: scaleY(0); } .visible { transform: scaleY(1); } ``` ### `src/index.js` ```js import React from "react"; import { createRoot } from "react-dom/client"; import SurveyComponent from "./SurveyComponent"; const root = createRoot(document.getElementById("surveyElement")); root.render(); ``` ### `src/json.js` ```js export const json = { "pages": [{ "name": "page1", "elements": [{ "type": "matrix", "name": "qualities", "title": "Please indicate if you agree or disagree with the following statements", "columns": [{ "value": 5, "text": "Strongly agree" }, { "value": 4, "text": "Agree" }, { "value": 3, "text": "Neutral" }, { "value": 2, "text": "Disagree" }, { "value": 1, "text": "Strongly disagree" }], "rows": [{ "value": "affordable", "text": "Product is affordable" }, { "value": "does-what-it-claims", "text": "Product does what it claims" }, { "value": "better-than-others", "text": "Product is better than other products on the market" },{ "value": "easy-to-use", "text": "Product is easy to use" }] }] }, { "name": "page2", "elements": [{ "type": "rating", "name": "satisfaction-score", "title": "How satisfied are you with our product?", "minRateDescription": "Not satisfied", "maxRateDescription": "Completely satisfied" }, { "type": "comment", "name": "suggestions", "title": "What would make you more satisfied with our product?", "maxLength": 300 }] }, { "name": "page3", "elements": [{ "type": "radiogroup", "name": "price-comparison", "title": "Compared to our competitors, do you feel our product is:", "choices": [ "Less expensive", "Priced about the same", "More expensive", "Not sure" ] }] }, { "name": "page4", "elements": [{ "type": "text", "name": "email", "title": "Thank you for taking our survey. Please leave your email address if you would like us to contact you." }] }] }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "react": "latest", "react-dom": "latest", "survey-core": "latest", "survey-react-ui": "latest" }, "devDependencies": { "react-scripts": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/form-library/examples/add-animation-effects-to-form-elements/angular.md) - [Vue 3](https://surveyjs.io/form-library/examples/add-animation-effects-to-form-elements/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/add-animation-effects-to-form-elements/jquery.md) - [Vanilla JS](https://surveyjs.io/form-library/examples/add-animation-effects-to-form-elements/vanillajs.md)