| Description | A runtime-managed animated image, typically a GIF. |
| Availability | Stable |
| Required Script | <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> |
| Examples | amp-anim.html everything.amp.html |
The following lists validation errors specific to the amp-anim tag
(see also amp-anim in the AMP validator specification):
| Validation Error | Description |
|---|---|
| The 'example1' tag is missing or incorrect, but required by 'example2'. | Error thrown when required amp-anim extension .js script tag is missing or incorrect. |
| The tag 'example1' is missing a mandatory attribute - pick one of example2. | Error thrown when neither src or srcset is included. One of these attributes is mandatory. |
| The implied layout 'example1' is not supported by tag 'example2'. | Error thrown when implied layout is set to CONTAINER; this layout type isn't supported. |
| The specified layout 'example1' is not supported by tag 'example2'. | Error thrown when specified layout is set to CONTAINER; this layout type isn't supported. |
| The property 'example1' in attribute 'example2' in tag 'example3' is set to 'example4', which is invalid. | Error thrown when invalid value is given for attributes height or width. For example, height=auto triggers this error for all supported layout types, with the exception of NODISPLAY. |
The amp-anim component is very similar to the amp-image element, and provides additional functionality to manage loading and playing of animated images such as GIFs.
The amp-anim component can also have an optional placeholder child, to display while the src file is loading. The placeholder is specified via the placeholder attribute:
<amp-anim width=400 height=300 src="my-gif.gif">
<amp-img placeholder width=400 height=300 src="my-gif-screencap.jpg">
</amp-img>
</amp-anim>src
Similar to the src attribute on the img tag. The value must be a URL that
points to a publicly-cacheable image file. Cache providers may rewrite these
URLs when ingesting AMP files to point to a cached version of the image.
srcset
Same as srcset attribute on the img tag.
alt
A string of alternate text, similar to the alt attribute on img.
attribution
A string that indicates the attribution of the image. E.g. attribution="CC courtesy of Cats on Flicker"
amp-img can be styled directly via CSS properties. Setting a grey background
placeholder for example could be achieved via:
amp-anim {
background-color: grey;
}