How to add effects and animation to your flow

On the Design panel, Upflowy gives you access to various options to brand your flow. However, if you would like to customize it even further, you can do that by adding effects and animations to your elements, like custom fade-outs and clicking effects.

If you are not familiar with coding, you can find many examples of effects online that you can use on your flows. Once you have found one that you like, all you need to do is add an embedded content element.

If you drag and drop this element into your flow, on the left-hand side you will see an example code snippet. That's where you can copy or type the CSS, JavaScript, or HTML code of your choice.

By default, the submit button has a fade-in effect upon hovering. As an example, if you would like it to change its color, the code should look something like this: 

button.primary.submit {
  transition: 0.3s;

button.primary.submit:hover {
  background-color: #FFA500;
  border-color: #FFA500