Animations

Edit on Github
Open in Playground View Story

Introduction

AMP Stories support animations out-of-the-box. Every element inside an amp-story-page can define an entrance animation. You can find a list of all supported animations here.

Fade-In

Example

<amp-story-page id="fade-in">
  <amp-story-grid-layer template="thirds">
    <h1>fade-in</h1>
    <div class="square"
      animate-in="fade-in"
      animate-in-duration="2s">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

All animations can be can be customized using the animate-in-duration and animate-in-delay properties.

Example

<amp-story-page id="delay-duration">
  <amp-story-grid-layer template="thirds">
    <h1>Wait for it ...</h1>
    <div class="square"
      animate-in="fade-in"
      animate-in-delay="2s"
      animate-in-duration="5s">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Customizing Animations

Use the animate-in-duration and animate-in-delay properties to customize the entry animations.

Example

<amp-story-page id="sequence">
  <amp-story-grid-layer template="vertical">
    <amp-img id="image1"
      animate-in="fade-in"
      animate-in-delay="1s"
      animate-in-duration="1s"
      src="https://unsplash.it/720/320/?image=10"
      width="720"
      height="320"
      layout="responsive"></amp-img>
    <amp-img id="image2"
      animate-in="fade-in"
      animate-in-duration="1s"
      animate-in-delay="0.25s"
      animate-in-after="image1"
      src="https://unsplash.it/720/320/?image=11"
      width="720"
      height="320"
      layout="responsive"></amp-img>
    <amp-img id="image3"
      animate-in="fade-in"
      animate-in-duration="1s"
      animate-in-delay="0.25s"
      animate-in-after="image2"
      src="https://unsplash.it/720/320/?image=12"
      width="720"
      height="320"
      layout="responsive"></amp-img>
    <amp-img id="image4"
      animate-in="fade-in"
      animate-in-duration="1s"
      animate-in-delay="0.25s"
      animate-in-after="image3"
      src="https://unsplash.it/720/320/?image=13"
      width="720"
      height="320"
      layout="responsive"></amp-img>
  </amp-story-grid-layer>
</amp-story-page>

Combining Animations

You can combine multiple animations by nesting them into multiple elements.

Example

<amp-story-page id="combining-animations">
  <amp-story-grid-layer template="thirds">
    <h1>fly-in-left + fade-in</h1>
    <div animate-in="fly-in-left"
      animate-in-duration="2s"
      grid-area="middle-third">
      <div class="square"
        animate-in-duration="2s"
        animate-in="fade-in">
      </div>
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Twirl-In

Example

<amp-story-page id="twirl-in">
  <amp-story-grid-layer template="thirds">
    <h1>twirl-in</h1>
    <div class="square"
      animate-in="twirl-in">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Fly-In-Left

Example

<amp-story-page id="fly-in-left">
  <amp-story-grid-layer template="thirds">
    <h1>fly-in-left</h1>
    <div class="square"
      animate-in="fly-in-left">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Fly-In-Right

Example

<amp-story-page id="fly-in-right">
  <amp-story-grid-layer template="thirds">
    <h1>fly-in-right</h1>
    <div class="square"
      animate-in="fly-in-right">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Fly-In-Top

Example

<amp-story-page id="fly-in-top">
  <amp-story-grid-layer template="thirds">
    <h1>fly-in-top</h1>
    <div class="square"
      animate-in="fly-in-top">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Fly-In-Bottom

Example

<amp-story-page id="fly-in-bottom">
  <amp-story-grid-layer template="thirds">
    <h1>fly-in-bottom</h1>
    <div class="square"
      animate-in="fly-in-bottom">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Rotate-In-Left

Example

<amp-story-page id="rotate-in-left">
  <amp-story-grid-layer template="thirds">
    <h1>rotate-in-left</h1>
    <div class="square"
      animate-in="rotate-in-left">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Rotate-In-Right

Example

<amp-story-page id="rotate-in-right">
  <amp-story-grid-layer template="thirds">
    <h1>rotate-in-right</h1>
    <div class="square"
      animate-in="rotate-in-right">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Drop-In

Example

<amp-story-page id="drop-in">
  <amp-story-grid-layer template="thirds">
    <h1>drop-in</h1>
    <div class="circle"
      animate-in="drop">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Whoosh-In-Left

Example

<amp-story-page id="whoosh-in-left">
  <amp-story-grid-layer template="thirds">
    <h1>whoosh-in-left</h1>
    <div class="square"
      animate-in="whoosh-in-left">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Whoosh-In-Right

Example

<amp-story-page id="whoosh-in-right">
  <amp-story-grid-layer template="thirds">
    <h1>whoosh-in-right</h1>
    <div class="square"
      animate-in="whoosh-in-right">
    </div>
  </amp-story-grid-layer>
</amp-story-page>

Zoom-In

You can also use animations on images to create visual effects.

Tip: Create a Ken Burns effect by combining these! Learn how in the visual effects section.

Example

<amp-story-page id="zoom-in">
  <amp-story-grid-layer template="vertical">
    <amp-img animate-in="zoom-in"
      animate-in-duration="4s"
      layout="responsive"
      src="https://picsum.photos/720/320?image=1026"
      width="720"
      height="320">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="fill">
    <h1>zoom-in</h1>
  </amp-story-grid-layer>
</amp-story-page>

Zoom-Out

Example

<amp-story-page id="zoom-out">
  <amp-story-grid-layer template="vertical">
    <amp-img animate-in="zoom-out"
      animate-in-duration="4s"
      layout="responsive"
      src="https://picsum.photos/720/320?image=1026"
      width="720"
      height="320">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="fill">
    <h1>zoom-out</h1>
  </amp-story-grid-layer>
</amp-story-page>

Pan-Left

Example

<amp-story-page id="pan-left">
  <amp-story-grid-layer template="fill">
    <amp-img animate-in="pan-left"
      id="img-pan-left"
      animate-in-duration="4s"
      layout="fixed"
      src="https://picsum.photos/720/320?image=1026"
      width="720"
      height="320">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="fill">
    <h1>pan-left</h1>
  </amp-story-grid-layer>
</amp-story-page>

Pan-Right

Example

<amp-story-page id="pan-right">
  <amp-story-grid-layer template="fill">
    <amp-img animate-in="pan-right"
      animate-in-duration="4s"
      layout="fixed"
      src="https://picsum.photos/720/320?image=1026"
      width="720"
      height="320">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="fill">
    <h1>pan-right</h1>
  </amp-story-grid-layer>
</amp-story-page>

Pan-Up

Example

<amp-story-page id="pan-up">
  <amp-story-grid-layer template="fill">
    <amp-img animate-in="pan-up"
      animate-in-duration="4s"
      layout="fixed"
      src="https://picsum.photos/720/320?image=1026"
      width="720"
      height="320">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="fill">
    <h1>pan-up</h1>
  </amp-story-grid-layer>
</amp-story-page>

Pan-Down

Example

<amp-story-page id="pan-down">
  <amp-story-grid-layer template="fill">
    <amp-img animate-in="pan-down"
      animate-in-duration="4s"
      layout="fixed"
      src="https://picsum.photos/720/320?image=1026"
      width="720"
      height="320">
    </amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="fill">
    <h1>pan-down</h1>
  </amp-story-grid-layer>
</amp-story-page>