> 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/widgets/animation.md).

# Animation

## Add animation

<div align="left"><img src="/files/-MIxukP40uS4MwgA4LYR" alt=""></div>

To add animation:

1. Select page
2. Do one of the following:
   * Click <img src="/files/-MJ1L4B2LPJ0uAabh4D4" alt="" data-size="line"> on Toolbar
   * Select Insert > Widgets > Animation
3. Select video, multiple images or animated gif

**Note:** Video will convert to image sequence

## Change animation settings

<div align="left"><img src="/files/-MIxukP5tI2Cytt_dyR4" alt=""></div>

1. Select Animation widget
2. Open Widget Inspector
3. Select Fill mode
4. Select Frame rate to change playback speed\
   **Note:** not supported for Animated GIF files
5. Enable Autoplay to start playing when page is open
6. Enable Loop to loop playback

## Playback panel

<div align="left"><img src="/files/-MIxukP6f1RlT3PODIVo" alt=""></div>

1. Select Animation widget
2. Open Widget Inspector
3. Select from Show playback list when to show playback panel:
   * Always: always show playback panel
   * Never: never show playback panel
   * Maximize: show playback panel when widget is maximized
4. Customize playback panel:
   * Enter panel height in Height field&#x20;
   * Select Background color\
     Enable Blurred to add blur effect (will work only with translucent background).&#x20;
   * Select Controls color
   * Select Slider color