Animated Image

A component for displaying animated GIFs and WEBPs that play and pause on interaction.

<wa-animated-image
  src="https://shoelace.style/assets/images/walk.gif"
  alt="Animation of untied shoes walking on pavement"
></wa-animated-image>

Examples Jump to heading

WEBP Images Jump to heading

Both GIF and WEBP images are supported.

<wa-animated-image
  src="https://shoelace.style/assets/images/tie.webp"
  alt="Animation of a shoe being tied"
></wa-animated-image>

Setting a Width and Height Jump to heading

To set a custom size, apply a width and/or height to the host element.

<wa-animated-image
  src="https://shoelace.style/assets/images/walk.gif"
  alt="Animation of untied shoes walking on pavement"
  style="width: 150px; height: 200px;"
>
</wa-animated-image>

Customizing the Control Box Jump to heading

You can change the appearance and location of the control box by targeting the control-box part in your styles.

<wa-animated-image
  src="https://shoelace.style/assets/images/walk.gif"
  alt="Animation of untied shoes walking on pavement"
  class="animated-image-custom-control-box"
></wa-animated-image>

<style>
  .animated-image-custom-control-box::part(control-box) {
    top: auto;
    right: auto;
    bottom: 1rem;
    left: 1rem;
    background-color: deeppink;
    border: none;
    color: pink;
  }
</style>

Slots Jump to heading

Learn more about using slots.

Attributes & Properties Jump to heading

Learn more about attributes and properties.

Events Jump to heading

Learn more about events.

CSS custom properties Jump to heading

Learn more about CSS custom properties.

CSS parts Jump to heading

Learn more about CSS parts.

Dependencies Jump to heading

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

• <wa-icon>

Importing Jump to heading

Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

import '@awesome.me/webawesome/dist/components/animated-image/animated-image.js';

import WaAnimatedImage from '@awesome.me/webawesome/dist/react/animated-image';