AMP

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:

Animation preset Default duration (ms) Default delay (ms)
drop 1600 0
fade-in 500 0
fly-in-bottom 500 0
fly-in-left 500 0
fly-in-right 500 0
fly-in-top 500 0
pulse 500 0
rotate-in-left 700 0
rotate-in-right 700 0
twirl-in 1000 0
whoosh-in-left 500 0
whoosh-in-right 500 0
pan-left 1000 0
pan-right 1000 0
pan-down 1000 0
pan-up 1000 0
zoom-in 1000 0
zoom-out 1000 0

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>

Explore the different animation effects by adding the animate-in="<animation preset>" attribute to elements on your story pages.

Animations can help make your Web Story more visually exciting and engaging, but use them sparingly. Some users may find long, continuous animations distracting. Other users may have motion sensitivity and be adversely affected by excessive use of motion and parallax effects. This tracking issue follows the effort to respect the prefers-reduced-motion directive.

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.