Embed Bodymovin animations in your AMP HTML files.
amp-bodymovin-animation component embeds an AirBnB Bodymovin animation player, which renders an animation from JSON generated by Adobe After Effects. The doc describing this element can be found here and the actions supported by this element can be found on the AMP Actions and Events page here.
amp-bodymovin-animation component in the header.
<script async custom-element="amp-bodymovin-animation" src="https://cdn.ampproject.org/v0/amp-bodymovin-animation-0.1.js"></script>
Embed Bodymovin animations via the
<amp-bodymovin-animation layout="fixed" width="200" height="200" src="/static/samples/json/bodymovin_red_circle.json"> </amp-bodymovin-animation>
This section covers how you can customize the animation produced by bodymovin for your needs.
src- The path to the exported Bodymovin animation object. Must be
loop- Indicates whether the animation should be looping or not. By default, this attribute is set to
true. Values for this attribute can be:
false, or a number value. If a number is specified, the animation loops that number of times.
noautoplay- By default, an animation autoplays. If this attribute is added the video waits for an action to start playing.
The following animation only loops five times.
<amp-bodymovin-animation layout="responsive" width="1920" height="1080" src="/static/samples/json/bodymovin_happy_2016.json" loop="5"> </amp-bodymovin-animation>
If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.Go to Stack Overflow An unexplained feature?
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.Edit sample on GitHub
Written by @nainar