AMP

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

amp-story-animation

Description

A component for configuring custom animations in amp-story.

 

Required Scripts

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></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-grid-layer>

        <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)"}
              ]
            }
          </script>
        </amp-story-animation>
      </amp-story-page>
Perlu bantuan lainnya?

Anda telah membaca dokumen ini belasan kali, tetapi belum semua pertanyaan Anda terjawab? Mungkin orang lain merasakan hal yang sama. Berinteraksilah dengan mereka di Stack Overflow.

Kunjungi Stack Overflow
Menemukan bug atau ada fitur yang kurang?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Kunjungi GitHub