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>
Importing
Jump to heading
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://ka-f.webawesome.com/webawesome@0.14.0/components/animated-image/animated-image.js';
After installing Web Awesome via npm, import this component:
import '@awesome.me/webawesome/dist/components/animated-image/animated-image.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/animated-image/animated-image.js';
To import this component for React 18 or below, use the following code:
import WaAnimatedImage from '@awesome.me/webawesome/dist/react/animated-image/index.js';
Slots
Jump to heading
Learn more about using slots.
| Name | Description |
|---|---|
pause-icon
|
Optional pause icon to use instead of the default. Works best with <wa-icon>. |
play-icon
|
Optional play 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 | |
|---|---|---|---|
altalt |
A description of the image used by assistive devices.
Type
string |
||
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
styles |
||
playplay |
Plays the animation. When this attribute is remove, the animation will pause.
Type
boolean |
|
|
srcsrc |
The path to the image to load.
Type
string |
Events
Jump to heading
Learn more about events.
| Name | Description |
|---|---|
wa-error |
Emitted when the image fails to load. |
wa-load |
Emitted when the image loads successfully. |
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 | CSS selector |
|---|---|---|
control-box |
The container that surrounds the pause/play icons and provides their background. |
::part(control-box)
|
Dependencies
Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.