> For the complete documentation index, see [llms.txt](https://docs.flipabit.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flipabit.dev/animation/color-animation.md).

# Color animation

## Background color animation

<div align="left"><img src="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukNxysUjev6HOa50%2Fgif_animation_color.gif?alt=media&amp;token=2cc69e78-042d-47fe-8742-b1dc32cc25de" alt=""></div>

To add background color animation:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell of highlighted row in Actions Editor
4. Select Actions > Animation > Set color
5. Select Color

## Overlay color animation

<div align="left"><img src="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukO13jj6C0htpi1L%2Fgif_animation_overlay_color.gif?alt=media&amp;token=d82e991d-823a-4f23-9109-8cc14c5abc83" alt=""></div>

To add overlay color animation:

1. Select widget&#x20;
2. Select Insert > Action
3. Double click Action cell of highlighted row in Actions Editor
4. Select Actions > Animation > Set overlay color
5. Select Color
