cgkineo / adapt-graphiclottie

Replace graphic with Lottie animation. AAT compatible

Adapt Graphic Lottie

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.

Adapt Authoring Tool

To use with the AAT's image picker:

• Change the file ending of your JSON file from .json to .svgz
• In course.json, ensure _graphicLottie._fileExtension is set to svgz

Settings Overview

The attributes listed below are used in course.json to configure Adapt Graphic Lottie, and are properly formatted as JSON in example.json.

Attributes

_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 svgz and json. Defaults to svgz.

_loops (Number): Controls how many times the animation should loop when inview. To set an infinite loop, use a value of -1. Defaults to 0 (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

adapt-graphiclottie's Issues

Add support for authoring tool 1

Visua11y no animation support

Issue:
Ability to turn off animation and show end frame

Show play/pause button by default to meet WCAG criteria

Understanding Success Criterion 2.2.2: Pause, Stop, Hide

For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential;

Set default to true so the default behaviour is accessible.

No alt text

Show the graphics used (svgz) when using this plugin show an alt tag like the jpg/png versions?

Thanks

Description is confusing / incorrect

Subject of the issue/enhancement/features

Description is confusing / incorrect
'It works only where graphics are rendered as img tags and not everywhere graphics are rendered as img tags, due to custom styling and behaviour.'

Your environment

• version (AT/Framework)
• which browser and its version
• device(s) + operating system(s)

Steps to reproduce

Tell us how to reproduce this issue.

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead

Screenshots (if you can)

hotgrid svgz issues when _playFirstViewOnly is false.

Subject of the issue/enhancement/features

When _playFirstViewOnly is set to false, seeing unexpected behaviour when animated svgs are rolled over whilst animation is playing. animated svgz used on a hotgrid component, just on the normal state. hover and visited states are using static svgs. They flicker, like the animation is replaying on rollover, and occasionally when doing this the svgz can disappear entirely

Your environment

working in the Framework, v5.31.17
plugin version 1.0.1
Chrome (latest)
Windows 11

Steps to reproduce

set _playFirstViewOnly to false. have an animated svgz as a hotgrid item (just in normal state). then when viewing the build, as you scroll it into view and the animation plays, roll over it a bunch of times. the animation seems to start a replay on hover, and also if you do it enough, it can also just entirely disappear. the latter seems inconsistent but if you try it enough it does seem to happen.

No longer working with Hotgrid

This previously used to working with Hotgrid: https://github.com/cgkineo/adapt-hotgrid and although the svgz are being displayed on the initial hotgrid, when you select the hotgrid item the notify popup no longer shows and locks up the page.

Your environment

• version (AT v5.29.3/Framework v011.1)
• which browser and its version - all browsers
• device(s) + operating system(s) - all devices

Steps to reproduce

Tell us how to reproduce this issue.

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead

Screenshots (if you can)

Visua11y no background images isn't supported

Unless alt text is provided, I'd expect <canvas> to be hidden when Visua11y _noBackgroundImages is enabled.

This is the same logic applied to <img> tags.

Constant looping on scroll

The animation loops constantly when scrolling, regardless of the _loops config.

Documentation improvements

Subject of the issue

The documentation could be improved.

See related comments for Graphic Video which is a somewhat similar plugin.

cgkineo/adapt-graphicVideo#2 (comment)

cgkineo/adapt-graphicVideo#2 (comment)

Component level config

Issue

At present the svgz animation can only be controlled via config at the course level. This works for the majority of instances but some times there can be a requirement for having some animations within a course loop whilst others don't.

Expected

Component level config to allow for override of course level settings

SVGz no longer working in v5.31.11

Subject of the issue/enhancement/features

This no longer appears to be working with v5.31.11 of the framework

Your environment

• version (AT v0.11.1/Framework v5.31.11)
• All browsers
• MacOS

Steps to reproduce

Previously svgz files were able to be used, these are now displayed as broken image links

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead

Screenshots (if you can)

Error in AT

Subject of the issue/enhancement/features

Trying to make it work in my AT

Your environment

data-adapt-framework-version="5.3.0"
data-adapt-authoring-version="0.10.3"
Versión 114.0.5735.90 (Build oficial) (64 bits)
Windows 10

Steps to reproduce

First I could not install de plugin so I've changed in bower the version, and put "framework": ">=5", So now I've been able to install it. The problem is when I try the extension it appears this error,

Expected behaviour

Tell us what should happen

Actual behaviour

Tell us what happens instead

Screenshots (if you can)

Does not work with jsx templates