HI
EN FR ES PT

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>
और अधिक मदद की आवश्यकता है?

आपने इस दस्तावेज़ को एक दर्जन बार पढ़ा है लेकिन वास्तव में इसमें आपके सभी प्रश्न शामिल नहीं हैं? शायद अन्य लोगों को भी ऐसा ही लगा हो: स्टैक ओवरफ्लो पर उनसे संपर्क करें।

स्टैक ओवरफ़्लो पर जाएँ
कोई बग मिला या कोई सुविधा गायब है?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

गिटहब पर जाएं