Adapt Graphic Lottie is an extension that renders Lottie animations exported from Adobe After Effect using the Bodymovin plugin. It works where graphics are rendered as html img tags and does not work with css background images.
Uses v5.7.6 of Lottie.
To use with the AAT's image picker:
- Change the file ending of your JSON file from
.jsonto.svgz - In course.json, ensure
_graphicLottie._fileExtensionis set tosvgz
The attributes listed below are used in course.json to configure Adapt Graphic Lottie, and are properly formatted as JSON in example.json.
_graphicLottie (object): Contains the following attributes:
_isEnabled (String): Defaults to
true.
_fileExtension (String): The file extension of the JSON file that is exported from Adobe After Effects. Acceptable values are
svgzandjson. Defaults tosvgz.
_loops (Number): Controls how many times the animation should loop when inview. To set an infinite loop, use a value of
-1. Defaults to0(don't loop).
_autoPlay (Boolean): Should the animations play when on screen. Note: Percentage onscreen determines when autoplay occurs. Defaults to
true.
_onScreenPercentInviewVertical (Number): What percentage of the SVG container should be on-screen before the animations are triggered. Defaults to
1.
_playFirstViewOnly (Boolean): Determines whether the animation should only play the first time it is inview.
_offScreenPause (Boolean): Pause when off screen. Defaults to
true.
_offScreenRewind (Boolean): Rewind when off screen. Defaults to
true.
_showPauseControl (Boolean): Show the play / pause button. Defaults to
false.
_onPauseRewind (Boolean): Rewind when the pause button is clicked. Defaults to
false.
Framework versions: >=5.31.27
Author / maintainer: Kineo
Accessibility support: Yes
RTL support: Yes
Cross-platform coverage: Evergreen + IE11