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>
Related resources
Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.
Se rendre sur Stack Overflow Vous avez trouvé un bug ou une fonctionnalité manquante ?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.
Se rendre sur GitHub