# How to add effects to interactions?

> For every interaction, you can choose to add an effect to enhance the interactivity.

Effects can be added to these four...

Source: https://mockflow.com/docs/wireframepro/prototyping/to-add-effects-to-interactions

For every interaction, you can choose to add an effect to enhance the interactivity.

Effects can be added to these four actions: Show Component, Hide Component, Toggle Component Visibility and Replace components.

1. Refer to this article for instructions on [adding interactions](https://support.mockflow.com/article/how-to-add-an-interaction-to-your-wireframe).

1. Open the interaction sidebar and click on the effects icon located at the right of the interaction.

In the screenshot below, there is 'Show component' action added on mouse click interaction. Clicking on the effects icon will show a dropdown, listing the options: Fade in, Rollin down, Slide in, Zoom in.  

Note - The effects listed will differ for each actions.

![Screen Shot 2024-09-12 at 10.53.34 AM.png](https://assets.mockflow.com/docs/media/519fb2dc3dccd49a70f3e529.gif)

1. Click on the desired effect and the effect will be added under the desired action.

![Screen Shot 2024-09-12 at 11.06.22 AM.png](https://assets.mockflow.com/docs/media/4a2657f23c3f29557dc983d4.webp)

## **Customize Transition Effects**

1. To customize an effect, click on the effect you want to modify. This will open the effect settings.

![Screen Shot 2024-09-12 at 10.53.48 AM.png](https://assets.mockflow.com/docs/media/0b5afd9e70bd7dd18dd1e94f.webp)

1. After adjusting the effect settings, click 'Save' to apply the changes.

![Screen Shot 2024-09-12 at 10.54.06 AM.png](https://assets.mockflow.com/docs/media/f97d49d910b23e3b3dae7d1a.gif)

1. Once you've added effects, switch to 'View' mode to preview the interactions. The effects will be visible during the transitions.