AMP Stories Animation Demo Source Code

An AMP Stories code example showing an animation

An AMP Tech Guide

This page shows crucial snippets of the code used on AMP story page that illustrates an animation.
Required tags in the document head:

<!-- Required tags: Charset,  canonical link, and viewport -->
<meta charset="utf-8">
<link rel="canonical" href="https://www.stonetemple.com/amp/stories/amp-stories-animation-code.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<!-- Required: The AMP project default CSS and noscript -->
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Required: The AMP Project JS -->
<script async src="https://cdn.ampproject.org/v0.js"></script>

The custom CSS is put inside a style tag with the attribute name amp-custom.

<style amp-custom>
 amp-story {
        font-family: 'Roboto Condensed',sans-serif;
        color: #fff;
      }
      amp-story-page {
        background-color: #000;
      }
      h1 {
        font-weight: bold;
        font-size: 2.875em;
        font-weight: normal;
        line-height: 1.174;
      }
      p {
        font-weight: normal;
        font-size: 1.3em;
        line-height: 1.5em;
        color: #fff;
      }
    .funkblock2 {border-radius: 50%;
      width: 50px;
    height:50px;
    float:left;}
      .funkblock {
    width: 50px;
    height:50px;
    float:left;
    }
    .blue {
    background-color: #4e9dd5;
    }
    .red {
    background-color: #8a0202;
    }
    .orange {
    background-color: #ea6800;
    }
    .aqua {
    background-color: #046772;
    }
    .yellow {
    background-color: #ffc20f;
    }
    .green {
    background-color: #278d41;
    }
    .purple {
    background-color: #fd8f01;
    }
    table {
    padding:0;
    margin:0;
    }
    td {
    width:50px;
    height:50px;
    }
</style>

AMP components used in this example (the AMP story component):

<!-- This is the AMP component that enable functionality used on this page (AMP-story). -->
 <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>

All of the preceding code blocks should be put in the document head. The following code blocks should reside in the document body.
This code helps make a Story page.

<amp-story standalone title="Animated squares" publisher="Stone Temple" publisher-logo-src="https://www.stonetemple.com/amp/stories/images/publisher.png" poster-portrait-src="https://www.stonetemple.com/amp/stories/images/publisher-portrait.png">
<amp-story-page id="page1">
<amp-story-grid-layer template="vertical">
<!-- contant removed to save space -->
</amp-story-grid-layer>
</amp-story-page>
</amp-story>