Skip to content

Latest commit

 

History

History
108 lines (87 loc) · 4.24 KB

amp-anim.md

File metadata and controls

108 lines (87 loc) · 4.24 KB
Raw

amp-anim

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 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
TAG_REQUIRED_BY_MISSING Error thrown when required amp-anim extension .js script tag is missing or incorrect.
MANDATORY_ONEOF_ATTR_MISSING Error thrown when neither src or srcset is included. One of these attributes is mandatory.
IMPLIED_LAYOUT_INVALID Error thrown when implied layout is set to CONTAINER; this layout type isn't supported.
SPECIFIED_LAYOUT_INVALID Error thrown when specified layout is set to CONTAINER; this layout type isn't supported.
INVALID_PROPERTY_VALUE_IN_ATTR_VALUE 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.

Behavior

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>

Attributes

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"

Styling

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;
}