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
このドキュメントを何度読み返しても、ご質問のすべてを完全に解消することができませんか？他にも同じ事を感じた人がいるかもしれません。Stack Overflow で問い合わせてみましょう。
Stack Overflow にアクセスする バグや不足している機能がありますか？AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub にアクセスする