Animated Image
<wa-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>
This component uses <canvas> to draw freeze frames, so images are subject to cross-origin restrictions.
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.
| 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 Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
srcsrc |
The path to the image to load.
Type
string |
||
altalt |
A description of the image used by assistive devices.
Type
string |
||
playplay |
Plays the animation. When this attribute is remove, the animation will pause.
Type
boolean |
|
Events Jump to heading
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 Jump to heading
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 Jump to heading
Learn more about CSS parts.
| Name | Description |
|---|---|
control-box |
The container that surrounds the pause/play icons and provides their background. |
Dependencies Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
Importing Jump to heading
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-beta.2/dist/components/animated-image/animated-image.js';
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/animated-image/animated-image.js';
To manually import this component from React, use the following code.
import '@awesome.me/webawesome/dist/react/animated-image';