Default Gray Amethyst

Animated Image

<mo-animated-image> | MOAnimatedImage
Since 1.0 experimental

A component for displaying animated GIFs and WEBPs that play and pause on interaction.

A component for displaying animated GIFs and WEBPs that play and pause on interaction.

<mo-animated-image
  src="https://shoelace.style/assets/images/walk.gif"
  alt="Animation of untied shoes walking on pavement"
></mo-animated-image>

import { MOAnimatedImage } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOAnimatedImage
    src="https://shoelace.style/assets/images/walk.gif"
    alt="Animation of untied shoes walking on pavement"
  />
);

Examples

WEBP images

Both GIF and WEBP images are supported.

<mo-animated-image
  src="https://shoelace.style/assets/images/tie.webp"
  alt="Animation of a shoe being tied"
></mo-animated-image>

import { MOAnimatedImage } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOAnimatedImage 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.

<mo-animated-image
  src="https://shoelace.style/assets/images/walk.gif"
  alt="Animation of untied shoes walking on pavement"
  style="width: 150px; height: 200px;"
>
</mo-animated-image>

import { MOAnimatedImage } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOAnimatedImage
    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. 

<mo-animated-image
  src="https://shoelace.style/assets/images/walk.gif"
  alt="Animation of untied shoes walking on pavement"
  class="animated-image-custom-control-box"
></mo-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>

import { MOAnimatedImage } from '@metsooutotec/modes-web-components/dist/react';

const css = `
  .animated-image-custom-control-box::part(control-box) {
    top: auto;
    right: auto;
    bottom: 1rem;
    left: 1rem;
    background-color: deeppink;
    border: none;
    color: pink;
  }
`;

const App = () => (
  <>
    <MOAnimatedImage
      className="animated-image-custom-control-box"
      src="https://shoelace.style/assets/images/walk.gif"
      alt="Animation of untied shoes walking on pavement"
    />

    <style>{css}</style>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/animated-image/animated-image.js';

To import this component as a React component:

import MOAnimatedImage from '@metsooutotec/modes-web-components/dist/react/animated-image/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/animated-image/animated-image.js"></script>

Properties

Name Description Reflects Type Default
src The image’s src attribute. string -
alt The image’s alt attribute. string -
play When set, the image will animate. Otherwise, it will be paused. boolean -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
mo-load onMoLoad Emitted when the image loads successfully. -
mo-error onMoError Emitted when the image fails to load. -

Learn more about events.

Custom Properties

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

Learn more about customizing CSS custom properties.

Parts

Name Description
control-box - The container that surrounds the pause/play icons and provides their background.
play-icon - The icon to use for the play button.
pause-icon - The icon to use for the pause button.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.