How to animate fields (for conditional fields)?

Wondering if and how this can be done.

1. Animate reveal of wrong person by a smooth slide

2. When entering the correct user that's on the guest list (Stephenie Batterton), the field that appears below it would slide out (instead of just appearing), the same would happen in reverse. If they said NO to something the sliding would occur to either reveal or hide the fields that's being controlled by the conditional actions. 

https://form.jotform.com/60607739339161

You will need to apply custom CSS codes to add animated styles on the form.

Here is an example form theme that have animation https://www.jotform.com/theme-store/theme/north-pole

You can also send a Request for a specific custom theme using the Request button in the Theme Store page.

Let us know how we can be of further assistance.

actually, I'm looking to do something more like this. https://css-tricks.com/exposing-form-fields-radio-button-css/.  I want when you enter a name, the error or fields that appear (jane heart) will show a transition ease effect. Same thing when any form is revealed. I haven't seen this done really on any of the forms I've seen so far. 

https://form.jotform.com/60607739339161 

Thank you for providing us with the additional information and the example of what you are seeking to do as well.

It seems to me that based on the demo you want to display your fields and errors similarly so that they fade in and out smoothly with the exposed transitions.

Currently I see two potential problems because that particular example requires SCSS which is basically an extended version of css and to my current knowledge we don't currently support it within our jotform system. To top that off there's also jquery functions and that could also cause issues with your forms functionality.

I'm not 100% about it but it may be possible to create something similar with just transitions using current supported css though it would be a bit tedious. With that said please allow us some time to look into this some more to see if we can maybe come up with something that might work with the form for this and we'll respond to you about it again as soon as we can.

there should be a way to target those fields w/ just pure css. Can't that be the case?

I'm still exploring options to try to assist you with this better and yes you can target certain fields with css.

I believe I may have found something of interest to you or at least it should help get you going in the right direction hopefully.

What I've done is created a full keyframed animation using only css to generate a fade-in effect.

Here's the Demo Form:  https://form.jotform.com/60694234026958   [Clone Me!]

And here's a link to the Full Injected & Animated CSS Code for it to make it easier to look at and use since it's a bit long to post here on your forum thread. 

To apply it either clone my demo form and modify it from there or you can the css code via injected css or through the form designer's css helper.

Please note that depending on what you wish to animate on your form you may need to change the field id from " .form-checkbox-item " to whatever you wish to animate. Also, be sure to leave ":active" after the field id otherwise it won't work.

Also, feel free to modify it more if you want to update or extend the css keyframes.

Something else you may want to take a look at aside from this if you don't like the above method would be to look at our Spoiler Widgets that you might find useful.

Although that kinda of close, I was thinking for something that would affect all of the input fields when they're revealed. Also what about the size of the box as it stretches vertically to show those newly appeared fields? Wanted to make that some sort of transition/animation in which it eases as it's opening. 

Do you want to achieve something like this?

https://form.jotform.com/60704619895971 

This is the CSS code I added to my test form:

#id_3,#id_6 , select[size="1"] {

    animation : blink 2s;

    -webkit-animation : blink 2s;

}

@keyframes blink {0% { opacity: 0.0; }50% { opacity: 1.0; }75% { opacity: 0.0; }100% { opacity: 1.0; }}

@-webkit-keyframes blink {0% { opacity: 0.0; }50% { opacity: 1.0; }75% { opacity: 0.0; }100% { opacity: 1.0; }}

Also text box fields are hidden with conditional logic. They will only be shown once check box option is selected.

Feel free to clone my form.

Hope this will help. Let us know if you need further assistance. 

Hi BJoanna, 

That's close! how about when the entire outer box expands, is there a way to make that slow ease as it grows (instead of just snapping open) and then make the boxes appear and the reverse? I like the slowly fade in part so making that a part of the process too. 

Please try adding these CSS declarations inside the selector #id_3,#id_6 , select[size="1"] that BJoanna provided above.

animation-timing-function: ease-in;
animation-duration: 5s; 
animation-delay: 2s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 5s; 
-webkit-animation-delay: 2s;

So it should look like this:

#id_3,#id_6 , select[size="1"] {
animation : blink 2s;
-webkit-animation : blink 2s;
animation-timing-function: ease-in;
animation-duration: 5s; 
animation-delay: 2s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 5s; 
-webkit-animation-delay: 2s;
}

This make the 2 fields slow instead of just snapping. Here's a GIF animation:

Hope that helps. Thank you.