Animated Image
A component for displaying animated GIFs and WEBPs that play and pause on interaction.
AnimatedImage( _.src := "https://shoelace.style/assets/images/walk.gif", _.alt := "Animation of untied shoes walking on pavement")()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.
AnimatedImage( _.src := "https://shoelace.style/assets/images/tie.webp", _.alt := "Animation of a shoe being tied")()Setting a Width and Height
To set a custom size, apply a width and/or height to the host element.
AnimatedImage( _.src := "https://shoelace.style/assets/images/walk.gif", _.alt := "Animation of untied shoes walking on pavement", _.style := "width: 150px; height: 200px;")()Customizing the Control Box
You can change the appearance and location of the control box by targeting the control-box part in your styles.
AnimatedImage( _.src := "https://shoelace.style/assets/images/walk.gif", _.alt := "Animation of untied shoes walking on pavement")( cls := "animated-image-custom-control-box").animated-image-custom-control-box::part(control-box) { top: auto; right: auto; bottom: 1rem; left: 1rem; background-color: deeppink; border: none; color: pink;}