Important: this documentation is not applicable to your currently selected format ads!
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 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.
GitHub로 이동하기