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