Animating elements

You can further enhance a Web Story by applying animation entrances to elements inside a page. For example, you can make your title fly in from the left, or drop into the page, or fade in, and so on. The AMP story framework provides the following preset animations to use in a Web Story:

To apply an animation entrance to an element, you must specify the animate-in="<animation preset>" with one of the animation presets values. For example, to drop some text into a page, add animate-in="drop" to the text element:

<amp-story-page id="page3">
  ...
  <amp-story-grid-layer template="vertical">
    <p animate-in="drop">Drop this text into the page</p>
</amp-story-page>

Animation timing

Each animation preset has a built-in default time value for:

• delay: This is the amount of time to delay starting the animation. For example, a delay of .3s means the animation enters the page after .3 seconds. A delay of 0s starts the animation right away.
• duration: This is the amount of time in which the animation occurs. For example, the fade-in animation from start to finish takes 500ms.

You can customize the timing of an animation by changing the delay or duration through the animate-in-delay and animate-in-duration attributes. In the following example, my-element flys in from the left of the page after .3 seconds, and completely flies in within .5 seconds:

<amp-story-page id="my-page">
  ...
  <p class="my-element"
      animate-in="fly-in-left"
      animate-in-delay="0.3s"
      animate-in-duration="0.5s">
    I'm going to fly into the page from the left!
  </p>
</amp-story-page>

Animating our last page

Our last Web Story page is comprised of two layers: the first layer is a collage of animal images and the second layer displays some banner text. To create this page, add the following code just after your previous story page:

<amp-story-page id="page5">
  <amp-story-grid-layer template="vertical" class="noedge">
    <div class="wrapper">
      <amp-img src="assets/cat.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
      <amp-img src="assets/dog.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
      <amp-img src="assets/bird.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
      <amp-img src="assets/rabbit.jpg"
          width="720" height="1280"
          layout="responsive"
          alt="...">
      </amp-img>
    </div>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical" class="center-text">
    <p class="banner-text">Pets can lower your stress levels!</p>
  </amp-story-grid-layer>
</amp-story-page>

Reload the AMP story in your browser, and verify that the page renders correctly and looks like this:

It looks great but everything is static! Let's animate!

We'll start by animating the entrance of the banner text and have it "whoosh in" from the right of the page. Add animate-in="whoosh-in-right" to the <p> element like so:

<p class="banner-text"
  animate-in="whoosh-in-right">
Pets can lower your stress levels!</p>

Reload your story page in your browser, and verify that the banner whooshes in.

Next, let's make all the images fade in. Add animate-in="fade-in" to each of the amp-img elements so the code looks like this:

<amp-img src="assets/cat.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/dog.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/bird.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>
<amp-img src="assets/rabbit.jpg"
  width="720" height="1280"
  layout="responsive"
  alt="..."
  animate-in="fade-in">
</amp-img>

If you refresh and reload the page, each of the images fade in. That's great but you can barely notice the effect because all the images fade in at the same time! We can improve the visual effect by changing the timing of these animations.

Let's delay the entrance of the first image so that it comes in close to when the text banner finishes entering, say .4s. The remaining three images can come .2s after the previous image's entrance. For each of the amp-img elements, add animate-in-delay="" with the appropriate time delay value. Your code should look like this:

<amp-img src="assets/cat.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay="0.4s">
</amp-img>
<amp-img src="assets/dog.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay="0.6s">
</amp-img>
<amp-img src="assets/bird.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay=".8s">
</amp-img>
<amp-img src="assets/rabbit.jpg"
    width="720" height="1280"
    layout="responsive"
    alt="..."
    animate-in="fade-in"
    animate-in-delay="1s">
</amp-img>

Refresh and reload your story. Your last page should look like this:

There are a lot of possibilities with animations in Web Stories (e.g., combining animations, chaining animations), and this tutorial scratches only the surface. To learn more about animations, see the amp-story reference documentation.

• Written by @bpaduch