Is there a way to inject a CSS code for next page transition effects such as Smooth, fade in etc. Thank you

  • Profile Image
    Cnelson0409
    Asked on May 03, 2017 at 03:28 PM
  • Profile Image
    John_Benson
    Answered on May 03, 2017 at 05:11 PM

    Unfortunately, this is not possible at this moment. However, you can download the source code and upload it to a server then inject custom animation CSS code to your form. Here's a guide: https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

    Thank you. 

     

  • Profile Image
    Cnelson0409
    Answered on May 03, 2017 at 05:25 PM

    Maybe I did a poor job at conveying my concern, but it appears the following template has the transition I'm referring to: Modern Hotel Booking Form - Mobile Responsive. Please let me know if this helps. Thanks

  • Profile Image
    Kevin_G
    Answered on May 03, 2017 at 07:23 PM

    The code used for the transition is the following:

    ul.form-section {

        -webkit-animation : animShowNext 0.5s cubic-bezier(0.7,0,0.3,1) both 0.15s;

        -moz-animation : animShowNext 0.5s cubic-bezier(0.7,0,0.3,1) both 0.15s;

        animation : animShowNext 0.5s cubic-bezier(0.7,0,0.3,1) both 0.15s;

    }

    @-webkit-keyframes animShowNext {

    from {

    opacity: 0; 

     -webkit-transform: translate3d(-100px,0,0);

    transform: translate3d(-100px,0,0);

    }

    }

     

    @-moz-keyframes animShowNext {

    from { 

      opacity: 0; 

      -moz-transform: translate3d(-100px,0,0);

    transform: translate3d(-100px,0,0);

    }

    }

     

    @keyframes animShowNext {

    from { opacity: 0;

    -webkit-transform: translate3d(-100px,0,0);

    -moz-transform: translate3d(-100px,0,0);

    transform: translate3d(-100px,0,0);

    }

    }

    You could just inject the given code and it should have the same effect on your form. 

    Here's an example with all the other code removed and just this one applied: https://form.jotformpro.com/71227664209962 

    Hope this helps.