# Animation

## Add 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-MIxukP40uS4MwgA4LYR%2Fgif_widget_animation.gif?alt=media&#x26;token=09940fd1-7762-4dbb-90f0-5397bf1683ae" alt=""></div>

To add animation:

1. Select page
2. Do one of the following:
   * Click <img src="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MJ1Ia-XP293U-WgAQov%2F-MJ1L4B2LPJ0uAabh4D4%2Fanimation.svg?alt=media&#x26;token=1e930b7e-414b-488d-97a0-3f68a8654033" 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="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukP5tI2Cytt_dyR4%2Fgif_widgets_animation.png?alt=media&#x26;token=a8e05818-f731-477f-9d7c-619f7c4a4caf" 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="https://963067965-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MIJW5nbmYRaSNWePAac%2F-MIxu2KP4MClY9gv_q2W%2F-MIxukP6f1RlT3PODIVo%2Fgif_widgets_animation_playback.gif?alt=media&#x26;token=10e455a0-9913-4b9d-b227-ef4810a56e73" 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
