Important: this documentation is not applicable to your currently selected format websites!



A component for configuring custom animations in amp-story.


Required Scripts

<script async custom-element="amp-story" src=""></script>

If an animation is needed outside of the presets, custom animations can be configured using the <amp-story-animation> component. It lets you create <amp-animation>-type animations inside your Web Story.

To use it, add a <amp-story-animation layout="nodisplay" trigger="visibility"> tag under your <amp-story-page> with a child <script type="application/json"> containing the JSON configuration describing your animation. In the following example, the "Custom animation" text will be animated using the json configuration in <amp-story-animation>:

      <amp-story-page id="cover">
        <amp-story-grid-layer template="vertical">
          <strong class="custom-animation">Custom animation</strong>

        <amp-story-animation layout="nodisplay" trigger="visibility">
          <script type="application/json">
              "selector": ".custom-animation",
              "duration": "1s",
              "easing": "ease-in-out",
              "keyframes": [
                {"transform": "translateY(10px)", "opacity": 0},
                {"transform": "translateY(-5px)", "opacity": 1},
                {"transform": "translateX(0)"}

您已多次阅读本文档,但它仍未能涵盖您的所有问题?也许其他人也这么觉得:在 Stack Overflow 上与他们联系。

前往 Stack Overflow

AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub