Important: this documentation is not applicable to your currently selected format nation-usa!
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>
Related resources
Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.
Ir para o Stack Overflow Encontrou um bug ou sente falta de um recurso?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.
Ir para o GitHub