Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
RU
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Türkçe 中文 Polski Tiếng việt
  • stories

AMP Story Animations

Посмотреть демо Открыть в песочнице

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

Animations can use a fade-in effect.

 
<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>

Animation duration

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

 
<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.

 
<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.

 
<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

Animations can use a twirl-in effect.

 
<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

Animations can use a fly-in-left effect.

 
<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

Animations can use a fly-in-right effect.

 
<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

Animations can use a fly-in-top effect.

 
<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

Animations can use a fly-in-bottom effect.

 
<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

Animations can use a rotate-in-left effect.

 
<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

Animations can use a rotate-in-right effect.

 
<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

Animations can use a drop-in effect.

 
<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

Animations can use a whoosh-in-left effect.

 
<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

Animations can use a whoosh-in-right effect.

 
<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.

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

<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

Animations can use a zoom-out effect.

 
<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

Animations can use a pan-left effect.

 
<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

Animations can use a pan-right effect.

 
<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

Animations can use a pan-up effect.

 
<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

Animations can use a pan-down effect.

 
<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>
Требуются дальнейшие объяснения?

Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.

Перейти на Stack Overflow
Не нашли пояснения к функции?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Редактировать пример на GitHub