# Adding a fade transition

You can add a fade transition at any point in your experience. You can customize how long the screen remains black, and the duration of the fade-out and fade-in transitions.

## Adding a fade transition to an experience

1. From the panel on the left-hand side, select <img src="/files/IoOEPZLPOKWyDb5ynAZd" alt="" data-size="line"> **IFX**.
2. From the library of IFX, select **Fade to Color**.
3. Place the IFX in the environment. The position of the IFX isn't important.

{% hint style="info" %}
The IFX library also includes a **Fade to Black for User Camera Screen** IFX. However the **Fade to Color** IFX provides improved functionality and is recommended in all cases.
{% endhint %}

## Fade to Color effect options

For instructions on how to access effect options, see [Effect options](/engage/experience-editor/working-with-objects/effect-options.md). The only additional option is to set which color to use for the transition.

![Chroma key screen color picker option](/files/Ztp0wfD56wlhvI5CF8oy)

* To set the transition color, select **Choose Color**, select a color in the **Color Picker**, and then select **OK**.

## Configuring transition times

You control the transition times through the length of the container on the timeline, and through the **Fade In** and **Fade Out** effect options, as shown in the following image:

![Transition times](/files/GQHiznMzHWqu2ndn50ZR)

* The fade will begin at the start of the container, and last for the duration set by the **Fade In** effect option.
* After the Fade In duration, the screen will remain the color that you have chosen until the end of the container.
* The fade-out of the color will begin at the end of the container, and last for the duration set by the **Fade Out** effect option.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.engagevr.io/engage/experience-editor/playback-events/adding-a-fade-in.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.