Components

Animated Image

<wa-animated-image> Since 2.0 Stable

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>

This component uses <canvas> to draw freeze frames, so images are subject to cross-origin restrictions.

Examples

WEBP Images

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

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

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

Learn more about using slots.

Name Description
play-icon Optional play icon to use instead of the default. Works best with <wa-icon>.
pause-icon Optional pause icon to use instead of the default. Works best with <wa-icon>.

Attributes & Properties

Learn more about attributes and properties.

Name Description Reflects
src
src
The path to the image to load.
Type string
alt
alt
A description of the image used by assistive devices.
Type string
play
play
Plays the animation. When this attribute is remove, the animation will pause.
Type boolean

Events

Learn more about events.

Name Description
wa-load Emitted when the image loads successfully.
wa-error Emitted when the image fails to load.

CSS custom properties

Learn more about CSS custom properties.

Name Description
--control-box-size
The size of the icon box.
--icon-size
The size of the play/pause icons.

CSS parts

Learn more about CSS parts.

Name Description
control-box The container that surrounds the pause/play icons and provides their background.

Dependencies

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

Importing

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

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/animated-image/animated-image.js';
Coming soon! Coming soon!
    No results