AMP Story Hello World

Edit on Github
Open in Playground View Story

Introduction

Learn how to create your first AMP Story. The amp-story extension provides a new format for displaying visual content.

Setup

AMP Stories are written using AMPHTML and they use their own AMP extension: amp-story. The first step is to import the amp-story in the header.

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

AMP Stories can make use of other AMP extensions such as amp-video. However, AMP Stories supportonly a subset of the available AMP extensions. You can find a full list of the supported extensions here.

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

Stories can be styled using CSS:

<style amp-custom>
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ";
  }
  amp-story-page * {
    color: white;
    text-align: center;
  }
  [template=thirds] {
    padding: 0;
  }
</style>

Writing the Story

Stories are declared inside the amp-story tag. You can link to other Stories on the last screen of your story by linking to a bookend JSON config.

Example

<amp-story standalone
  bookend-config-src="https://ampbyexample.com/json/bookend.json">

A story consists of one or more pages. Each page is declared by an amp-story-page element. Pages are designed by layering videos, images and text. Here we have a page that uses two layers. One layer filling the available space with an image and one text layer that shows a heading.

Example

<amp-story-page id="page-1">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://ampbyexample.com/img/story_dog2.jpg"
      width="720"
      height="1280"
      layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <h1>Hello World</h1>
    <p>This is an AMP Story.</p>
  </amp-story-grid-layer>
</amp-story-page>

Here we have a page consisting of a video which autoplays and loops.

Example

<amp-story-page id="page-2">
  <amp-story-grid-layer template="fill">
    <amp-video autoplay
      loop
      width="720"
      height="960"
      poster="https://ampbyexample.com/img/story_video_dog_cover.jpg"
      layout="responsive">
      <source src="https://ampbyexample.com/video/story_video_dog.mp4"
        type="video/mp4">
    </amp-video>
  </amp-story-grid-layer>
</amp-story-page>

Pre-defined entry animations make it possible to create dynamic pages without videos. The length and initial delay can be customized using the animate-in-duration and animate-in-delay properties. The animations sample shows all available animantions in action.

Example

<amp-story-page id="animation-demo">
  <amp-story-grid-layer template="fill">
    <amp-img src="https://ampbyexample.com/img/story_dog4.jpg"
      animate-in="fly-in-top"
      width="720"
      height="1280"
      layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h2 animate-in="fly-in-bottom"
      grid-area="lower-third"
      animate-in-delay="0.4s">
      Best walk ever!
    </h2>
  </amp-story-grid-layer>
</amp-story-page>

Stories can use predefined layouts to style the page. Here we're using the thirds template. For an overview about the available layouts take a look at the layouts sample.

Example

<amp-story-page id="layout-demo">
  <amp-story-grid-layer template="thirds">
    <amp-img grid-area="upper-third"
      src="https://ampbyexample.com/img/story_thirds_1.jpg"
      width="560"
      height="420"
      layout="responsive">
    </amp-img>
    <amp-img grid-area="middle-third"
      src="https://ampbyexample.com/img/story_thirds_2.jpg"
      width="560"
      height="420"
      layout="responsive">
    </amp-img>
    <amp-img grid-area="lower-third"
      src="https://ampbyexample.com/img/story_thirds_3.jpg"
      width="560"
      height="420"
      layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
</amp-story-page>