Skip to content

Latest commit

 

History

History
109 lines (88 loc) · 4.79 KB

amp-anim.md

File metadata and controls

109 lines (88 loc) · 4.79 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 amp-anim.html
everything.amp.html

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

Validation errors

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.