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

  • Cnelson0409
    Asked on May 3, 2017 at 3:28 PM
  • John_Benson
    Replied on May 3, 2017 at 5: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. 

     

  • Cnelson0409
    Replied on May 3, 2017 at 5: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

  • Kevin Support Team Lead
    Replied on May 3, 2017 at 7: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.