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
| 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>.
|
Properties Jump to heading
| 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
| 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
| 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
| 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. Subdependencies, 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-alpha.4/dist/components/animated-image/animated-image.js';