Picture of Jonathan Briggs
adapt-lottie (bodymovin)
by Jonathan Briggs - Wednesday, 6 November 2019, 2:05 PM
 

Hello, I'm investigating any ways of running 'Lottie' animations in adapt courses (created in After Effects and exported with Bodymovin to data.json). Has anyone else achieved it? There's Dan Gray's adapt-lottie component on GitHub but I can't make sense of it, perhaps it's unfinished… assuming the data.json goes in the course/en location but no luck. I must be missing something? Has anyone got other approaches or solutions? Thanks, Jonathan

Picture of Dan Gray
Re: adapt-lottie (bodymovin)
by Dan Gray - Wednesday, 6 November 2019, 3:58 PM
 

I'm afraid my adapt-lottie component was never finished. That was mostly to do with difficulties uploading all of the after effects exported files to the authoring tool.

Picture of Jonathan Briggs
Re: adapt-lottie (bodymovin)
by Jonathan Briggs - Thursday, 7 November 2019, 7:47 AM
 

Ah I guessed as much. Thanks for replying though. Have you dealt with it in any other way? Such as through the CKEditor / custom CSS perhaps?

Cheers,

Jonathan

Picture of Jer Brand
Re: adapt-lottie (bodymovin)
by Jer Brand - Thursday, 7 November 2019, 5:31 PM
 

This has been one of those components that's been on my todo list for ages, so I'll try to take a stab at it this weekend (life allowing). 

From what I remember, it was only feasible with vector animation -- if the animation included an image or image effect (shadows, blur, etc.), there was no way to connect the image files with the JSON data (unless the plugin exported SVG effects, which last time I looked it did not). Our shop has an illustrator/animator so that limitation works for us. YMMV.

I've slept since I last looked at this so I may be completely wrong. I'll update this thread with anything I do or do not pull off.

Picture of Jer Brand
Re: adapt-lottie (bodymovin)
by Jer Brand - Sunday, 10 November 2019, 5:44 PM
 

So I've got a working prototype going. As suspected, it does require the lottie-web svg renderer without images because the paths in the json can't be altered by adapt in any meaningful way (and Adapt Authoring would mangle the names anyway).

Still quite a few things that I'd like to have configured via Authoring (reduced animation preferences, play/pause UI, sequence control and UI) but it works with Framework 4.4.1 & Authoring 0.10.2.

Dan Gray, would you prefer that I fork `adapt-lottie`?

Picture of Jer Brand
Re: adapt-lottie (bodymovin)
by Jer Brand - Sunday, 10 November 2019, 8:37 PM
 

Figure it's Sunday (and I'm the only crazy person who's coding) so I went ahead and forked the project. Renamed the files so they all matched the repo name (lottie vs bodymovin), made it work, tested in Authoring, added in support for prefers-reduced-motion. 

https://github.com/aut0poietic/adapt-lottie

 

Picture of Jonathan Briggs
Re: adapt-lottie (bodymovin)
by Jonathan Briggs - Monday, 11 November 2019, 2:41 PM
 

Fantastic to get this going - big thanks for your Sunday efforts. Is there anything in it that would prevent a version for framework 2.4.0? And / or as an extension so it could run as an article background? I realise that's a lot to ask…

Jonathan

Picture of Jer Brand
Re: adapt-lottie (bodymovin)
by Jer Brand - Monday, 11 November 2019, 5:05 PM
 

There isn't anything technically preventing Lottie from working with 2.4 -- 4.4.1 is just the version my org is using  (with Authoring 10) so I naturally reached for it. I'm not sure if there would be any trade-offs in using a 2.4 framework or if the Adapt community as a whole advocates building for older frameworks (framework 5 is imminent, yes?).

I can give it a try, anyway. 

As for the background for an article, I hesitate. What jumps out at me is the accessibility of an animated background that cannot be disabled. Adding in UI to disable the animation that is positioned behind other content would add another layer of issues. Positioning and scaling the animation seems difficult too (as Bodymovin/AE controls that). Creating the accessible labeling of the animation would be a bit of a challenge and it would be impossible to provide the description in adjacent text. 

I don't see an easy way forward for background animation, though it's worth discussing if anyone has ideas how this could be accomplished. Though I should probably finish the base component. ;-) 

Just as an FYI, I'm neck deep in a project for the next two weeks, so I don't know how much code movement there will be while I'm buried. Want to help, will have little time.

Picture of Jonathan Briggs
Re: adapt-lottie (bodymovin)
by Jonathan Briggs - Monday, 11 November 2019, 5:48 PM
 

Yes I largely figured as much (and tweaked the fw myself to check). It's an interesting thing simply because article backgrounds have always been an 'issue' in pixel form, never quite working properly because of limitations on re-sizing, general behaviour, scroll and data weight. But the notion of nicely handled and natively re-sizing SVG animated backgrounds would be immensely effective in a course. The work you've done already is very, very useful – I'd just like to be able to layer stuff on top, and don't have the knowledge to do it. Many thanks, Jonathan