amp-anim

Edit on Github
Open in Playground

Introduction

Embed animations (gif, webp) into your AMP HTML files. Animation files should be loaded via HTTPS.

Setup

Import the animation component in the header.

<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>

Basic Usage

A basic embed. The usage of amp-anim is similar to that of amp-img.

Example

<amp-anim width="245"
  height="300"
  src="/img/gopher.gif"
  alt="an animation"
  attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
</amp-anim>

You can use amp-img as a placeholder when loading of src file takes time. placeholder attribute must be assigned in the child amp-img in this case.

Example

<amp-anim width="245"
  height="300"
  src="/img/gopher.gif"
  alt="an animation"
  attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
  <amp-img placeholder
    width="245"
    height="300"
    src="/img/gopher.png">
  </amp-img>
</amp-anim>