### [How to Add Animation Effects to Page Break Transitions](https://wpforms.com/developers/how-to-add-animation-effects-to-page-break-transitions/)

**Published:** May 25, 2021
**Author:** Editorial Team

**Excerpt:** This tutorial will show you how to use a small script and some CSS to add cool animation effects to your pages on a multi-page form. 

**Content:**

## Introduction

Would you like to add some animation effects to your page breaks inside your forms? By default, there is no animation when you go from one page to another on a multi page form. However, using JavaScript and some CSS you can add a little animation as you go from the next page to the previous page and back again.

## Creating your form

First, you’ll need to create your multi page form. If you need help in creating this type of form, [please review this documentation](https://wpforms.com/how-to-create-a-multi-part-form-in-wordpress/ "How to Create a Multi-Step Form in WordPress (With a Plugin)").

![begin by creating your form, adding your fields and setting the page breaks](https://wpforms.com/wp-content/uploads/2022/06/annimation-page-break-create-form.jpg)

## Adding the JavaScript snippet

Now it’s time to add the snippet.

If you need help in how and where to add snippets to your site, [please check out this tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

```

/**
 * Add CSS class to trigger CSS animation on Next and Previous button clicks
 *
 * @link https://wpforms.com/developers/how-to-add-animation-effects-to-page-break-transitions/
 */
  
function wpf_dev_animation_page_break( ) {
?>

**Categories:** Tutorials

**Tags:** CSS, Javascript, JS

---