Lottie Animation 4.5

Lottie animation is an animation format built on SVG. Our Lottie implementation allows only vector shapes; absolutely no graphic or pixel effects can be used. These animations respect the user’s settings, disabling the animation if the user has specified that they prefer reduced motion within their operating system’s settings.

Lottie animations are view only: They cannot be completed as the user’s accessibility settings may prohibit playing of animation. Because the user may not see the animation content, these should be used as supplemental graphics and not contain primary content.

This component inherits all the settings common to the Presentation Components.

An initial graphic that is displayed while the animation file is loaded. This graphic should display the contents of the first “frame” of the animation and be sized so that the transition from “loading” to “playing” is transparent to the user.

A short alternative description that describes the fallback graphic — not the full animation.

A JSON file (with the extension *.json) containing the animation. “Use external asset” must never be used as lottie files are executable — literally running code within your course.

A short description of the animation. This description should be able to be quickly read by a screen reader. 255 characters max.

Detailed description of the animation. This should include the subject of the animation as well as all content, actions, etc.

The width of the animation without scaling. This should be provided by the individual or service that produces the animation.

The height of the animation without scaling. This should be provided by the individual or service that produces the animation.

Attribution of the animation, if required.

If checked, the animation will begin playing when scrolled into view.

If checked, the animation will repeat continuously.

If checked, the animation will display a small play/pause button. This must always be checked unless an accessibility expert has granted you permission to hide the play/pause button.

Lottie Animations are completely responsive. Even tiny animations will scale without artifact, skewing or degrading. Because of this, the animation will grow to fill it’s container, either half or full width.

It uses the Intrinsic Width/Height settings to calculate this size. These sizes must be accurate or the animation will be skewed.

A well-built animation will be under 100K for as much as 20 seconds of animation — the examples used are 15 & 38K and both over 30 seconds.

If your animation files are larger than 100K or are near 100K and are considerably shorter, the animation was built incorrectly and must be rebuilt (typically from scratch as there are no optimization tools).