# Multi Page Transition

**URL:** <https://community.gravityforms.com/t/multi-page-transition/1037>\
**Category:** Get Help\
**Tags:** feature-request, multi-page, ajax\
**Created:** [February 13, 2019, 6:16pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037 "2019-02-13T18:16:29Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![sunshineburger](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/sunshineburger/32/427_2.png) [@sunshineburger](https://community.gravityforms.com/u/sunshineburger)\
**Post date:** [February 13, 2019, 6:16pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/1 "2019-02-13T18:16:29Z")

</div>

We have a multi-page form using Ajax. How could you add a transition between pages, such as fading in the next set of fields?

thanks

---

<div class="post-metadata">

**Author:** ![chrishajer](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/chrishajer/32/88_2.png) [@chrishajer](https://community.gravityforms.com/u/chrishajer)\
**Post date:** [February 13, 2019, 9:13pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/2 "2019-02-13T21:13:39Z")

</div>

There is currently no provision in Gravity Forms to do that. It is on our list of requested features. I will leave this topic open in case someone has a solution for you. Thank you.

---

<div class="post-metadata">

**Author:** ![vegaswebsitedesigns](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/vegaswebsitedesigns/32/816_2.png) [@vegaswebsitedesigns](https://community.gravityforms.com/u/vegaswebsitedesigns)\
**Post date:** [June 5, 2019, 6:32pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/3 "2019-06-05T18:32:46Z")

</div>

I had a similar need and ended up creating the multi-page animation with a combination of jQuery and animate.css ([https://github.com/daneden/animate.css](https://github.com/daneden/animate.css))

Example jQuery file -

gf\_1\_active\_page = 1;

$(document).bind(‘gform\_page\_loaded’, function(event, form\_id, current\_page) {

```
        if(form_id == 1) { 

            if(gf_1_active_page != current_page) { 

                setTimeout(function() {
                    $('#gform_wrapper_1 .gform_page').removeClass('active');
                    $('#gform_wrapper_1 #gform_page_1_'+current_page).addClass('animated fadeInUp active').delay(1000).addClass('active');
                    gf_1_active_page = current_page;
                }, 100);

            }

        }
        
    });

```

The reason for the “gf\_1\_active\_page” check is that “gform\_page\_loaded” also fires on form errors and you do not want the form page to animated when that happens. The delay gives the animation time to complete before applying the active class.

Example CSS:

#gform\_wrapper\_1 .gform\_page {  
transition: all 0.3s ease-in-out;  
opacity: 0;  
}

#gform\_wrapper\_1 .gform\_page.active {  
opacity: 1;  
}

This may not be an elegant solution but it works. If anyone can improve on it I would love to see your update.

---

<div class="post-metadata">

**Author:** ![user5d9f7e0f309a6920](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user5d9f7e0f309a6920/32/1277_2.png) [@user5d9f7e0f309a6920](https://community.gravityforms.com/u/user5d9f7e0f309a6920)\
**Post date:** [January 13, 2020, 8:29am UTC](https://community.gravityforms.com/t/multi-page-transition/1037/4 "2020-01-13T08:29:41Z")

</div>

This was super helpful, thanks @vegaswebsitedesigns.

I made some edits to keep the code working with a form by any ID dynamically as well as a fix for a bug given recent GF updates that was hiding page contents where there was a field error - you’ll see a new else statement where it reapplies the ‘active’ class.

Here it is:

```
<script>
var gf_active_page = 0;
jQuery('.gform_page').addClass('active');

function setPage(current_page, form_id) {
	setTimeout(function() {
                    jQuery('.gform_wrapper .gform_page').removeClass('active');
                    jQuery('.gform_wrapper #gform_page_'+form_id+'_'+current_page).addClass('animated fadeInUp active').delay(1000).addClass('active');
                    gf_active_page = current_page;
                }, 100);
}

jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page) {

            if(gf_active_page != current_page) { 
							setPage(current_page, form_id);
            } else {
              jQuery('.gform_wrapper #gform_page_'+form_id+'_'+current_page).addClass('active');
        }
    
    });
</script>
<style>
.gform_wrapper .gform_page {
transition: all 0.3s ease-in-out;
opacity: 0;
}

.gform_wrapper .gform_page.active {
opacity: 1;
}
</style>
```

---

<div class="post-metadata">

**Author:** ![user5e5ca3bf3df05652](https://avatars.discourse-cdn.com/v4/letter/u/7ba0ec/32.png) [@user5e5ca3bf3df05652](https://community.gravityforms.com/u/user5e5ca3bf3df05652)\
**Post date:** [March 2, 2020, 6:18am UTC](https://community.gravityforms.com/t/multi-page-transition/1037/5 "2020-03-02T06:18:16Z")

</div>

hey Scott  
I recommend you to take a look at this link. pretty helpful

[https://wordpress.org/plugins/beauty-gravity/](https://wordpress.org/plugins/beauty-gravity/)

---

<div class="post-metadata">

**Author:** ![user5d80a6cdb4625259](https://avatars.discourse-cdn.com/v4/letter/u/22d042/32.png) [@user5d80a6cdb4625259](https://community.gravityforms.com/u/user5d80a6cdb4625259)\
**Post date:** [March 10, 2020, 10:35pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/6 "2020-03-10T22:35:50Z")

</div>

Hi - I implemented this code, but the first page of my form was blank. The fields were there, just not visible. I could click the next button, as i knew where it was, the next page loaded with the transition.  
any idea on why the first page of the form wasn’t visible?  
Thanks,  
Stuart

---

<div class="post-metadata">

**Author:** ![user5d9f7e0f309a6920](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/user5d9f7e0f309a6920/32/1277_2.png) [@user5d9f7e0f309a6920](https://community.gravityforms.com/u/user5d9f7e0f309a6920)\
**Post date:** [March 11, 2020, 2:56pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/7 "2020-03-11T14:56:26Z")

</div>

@user5d80a6cdb4625259 Yep, give this updated snippet a try.

```auto
<script>
var gf_active_page = 0;
jQuery('.gform_page').addClass('active');

function setPage(current_page, form_id) {
	setTimeout(function() {
                    jQuery('.gform_wrapper .gform_page').removeClass('active');
                    jQuery('.gform_wrapper #gform_page_'+form_id+'_'+current_page).addClass('animated fadeInUp active').delay(1000).addClass('active');
                    gf_active_page = current_page;
                }, 100);
}

jQuery(document).bind('gform_page_loaded', function(event, form_id, current_page) {

            if(gf_active_page != current_page) { 
							setPage(current_page, form_id);
            } else {
              jQuery('.gform_wrapper #gform_page_'+form_id+'_'+current_page).addClass('active');
        }
    
    });
</script>

```

```auto
<style>
.gform_wrapper .gform_page {
    transition: all 0.3s ease-in-out;
    opacity: 0;
}

.gform_wrapper .gform_page.active {
    opacity: 1;
}
</style>

```

---

<div class="post-metadata">

**Author:** ![user5d80a6cdb4625259](https://avatars.discourse-cdn.com/v4/letter/u/22d042/32.png) [@user5d80a6cdb4625259](https://community.gravityforms.com/u/user5d80a6cdb4625259)\
**Post date:** [March 11, 2020, 3:30pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/8 "2020-03-11T15:30:20Z")

</div>

Hi - unfortunately that didn’t work. All pages now appear blank.  
Does it matter that my form is configured such that form 1 redirects on submission to form 2 with a URL parse?

Edit - don’t worry, sorted it. Thanks very much for the additional code. It wasn’t working previously as my javascript wasn’t running in the footer. It is now, and it works beautifully.

Thanks,  
Stuart

---

<div class="post-metadata">

**Author:** ![user5e6f8eb97850b756](https://avatars.discourse-cdn.com/v4/letter/u/f19dbf/32.png) [@user5e6f8eb97850b756](https://community.gravityforms.com/u/user5e6f8eb97850b756)\
**Post date:** [July 15, 2020, 3:16pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/9 "2020-07-15T15:16:53Z")

</div>

Hey Chris, any update on this functionality in the current version of Gravity Forms?

Our agency is looking to do something similar to this for a client - [https://dribbble.com/shots/5985974-AVST-Contacts-Form-Animation](https://dribbble.com/shots/5985974-AVST-Contacts-Form-Animation)

---

<div class="post-metadata">

**Author:** ![chrishajer](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/chrishajer/32/88_2.png) [@chrishajer](https://community.gravityforms.com/u/chrishajer)\
**Post date:** [July 15, 2020, 5:19pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/10 "2020-07-15T17:19:01Z")

</div>

Hi Vanessa. There have not been any updates with this functionality. I recommend submitting your idea and comments on our roadmap: [https://www.gravityforms.com/gravity-forms-roadmap/](https://www.gravityforms.com/gravity-forms-roadmap/)

That way, we can keep all the information in the same area. Thank you.

---

<div class="post-metadata">

**Author:** ![simonc](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/simonc/32/1431_2.png) [@simonc](https://community.gravityforms.com/u/simonc)\
**Post date:** [April 16, 2021, 4:03pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/11 "2021-04-16T16:03:46Z")

</div>

I’ve tried the beauty gravity plugin, which does a good job but adds a lot of bloat. If you’re ok with that then it’s good value.

Alternately you could just use CSS animation on elements, like the .gform\_page.  
Here is a guide that you could use, replacing their classes with your own: [How To Add Page Transitions with CSS and smoothState.js | CSS-Tricks](https://css-tricks.com/add-page-transitions-css-smoothstate-js/)

---

<div class="post-metadata">

**Author:** ![user60064dc548258718](https://avatars.discourse-cdn.com/v4/letter/u/da6949/32.png) [@user60064dc548258718](https://community.gravityforms.com/u/user60064dc548258718)\
**Post date:** [May 20, 2021, 6:21am UTC](https://community.gravityforms.com/t/multi-page-transition/1037/12 "2021-05-20T06:21:58Z")

</div>

Hii @chrishajer

I have not seen this feature in the roadmap, it will be nice if you can add this feature because no one like page refresh in 2021.

---

<div class="post-metadata">

**Author:** ![chrishajer](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/chrishajer/32/88_2.png) [@chrishajer](https://community.gravityforms.com/u/chrishajer)\
**Post date:** [May 20, 2021, 1:48pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/13 "2021-05-20T13:48:07Z")

</div>

Hi Helen. Can you add that in your own words here please?

Click the blue ➕ in the lower left on this page to add a note for our product team:

[https://www.gravityforms.com/gravity-forms-roadmap/](https://www.gravityforms.com/gravity-forms-roadmap/)

Thank you.

---

<div class="post-metadata">

**Author:** ![richardw8k](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/richardw8k/32/2354_2.png) [@richardw8k](https://community.gravityforms.com/u/richardw8k)\
**Post date:** [January 4, 2022, 5:10pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/14 "2022-01-04T17:10:11Z")

</div>



---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex020/user_avatar/community.gravityforms.com/david/32/2517_2.png) [@david](https://community.gravityforms.com/u/david)\
**Post date:** [January 9, 2023, 5:57pm UTC](https://community.gravityforms.com/t/multi-page-transition/1037/15 "2023-01-09T17:57:40Z")

</div>

We have a solution for this too over at Gravity Wiz. It’s called Page Transitions.

> **[Gravity Forms Page Transitions: Animated Multi Step Progression](https://gravitywiz.com/documentation/gravity-forms-page-transitions/)**
>
> Use the Gravity Forms Page Transitions plugin to create sleek transitions between your multi page forms in Gravity Forms.

We’re releasing the 1.0 this month but it’s already a super solid, well supported option for folks looking to add a little spice to their form’s UX.

PS – We’ve got [a few free snippets](https://github.com/gravitywiz/snippet-library/tree/master/gp-page-transitions) to customize it further too!