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
Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.
Stack Overflow'a git Bir hata veya eksik bir özellik mi buldunuz?AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.
GitHub'a git