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
adapt-lottie (bodymovin)
Re: adapt-lottie (bodymovin)
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.
Re: adapt-lottie (bodymovin)
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.
Re: adapt-lottie (bodymovin)
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`?
Re: adapt-lottie (bodymovin)
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
Re: adapt-lottie (bodymovin)
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
Re: adapt-lottie (bodymovin)
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.
Re: adapt-lottie (bodymovin)
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
Re: adapt-lottie (bodymovin)
Just an update on use – it's easy to implement this as say a left-hand component but break it out of the component container with some CSS like this:
.viewportwidth {
.lottie-container {
width: 100vw;
position: relative;
margin-left: -20vw;
margin-top: -20vh;
margin-bottom: -20vh;
left: 20%;
}
}
and add a right-hand component that will then sit on top. So actually pretty much everything I wanted to achieve and it's useful in fact to have the animated element separated from an article background.
Jonathan
Re: adapt-lottie (bodymovin)
That's a pretty inventive solution. Glad it worked out for you.
I've got a few hours to play with this. Did you test this out on 2.4? If it all works, I'll just change the bower.json to reflect the version.
I'll add the inview setup and an (optional) play/pause control today. Any thing else I'm missing?
Re: adapt-lottie (bodymovin)
Yes, all good on 2.4. Sounds like that covers it.
Cheers,
Jonathan
Re: adapt-lottie (bodymovin)
That's great. I've put in a pull request to update Dan's original plugin. Hopefully there's nothing broke'd in my updates.
Thanks for the assist -- and for the excuse for me to stop putting this plugin off. :-)
Re: adapt-lottie (bodymovin)
A couple of suggestions for play config:
* Play/complete once only (either with button or on autoplay)
* Pause offscreen (when started by button or autoplay)
* Replay onscreen (when autoplay)
Re: adapt-lottie (bodymovin)
Hello,
Thanks for this plugin. It's been a lot of help. I'm using version 2.4 of the framework and for the first time I've added in body text to the component. This has caused an error with the js (setInviewCompletion). I'm guessing this is an issue with the framework version? Is there anyway I can adjust this to work with version 2.4?
Thanks.
Re: adapt-lottie (bodymovin)
Depends how you want to handle completion for this component... if you're not too bothered I'd just replace this.setupInview(); with this.setCompletionStatus();
If you want to do it properly have a look at how the old version of the graphic component handled 'inview' completion.
Re: adapt-lottie (bodymovin)
Matt created an issue for this over on GitHub. I'll see what I can do about fixing the bug with 2.4 -- it may take me more than a day or two. Kinda slammed at the moment. Here's the issue if you want to keep up on GitHub: https://github.com/aut0poietic/adapt-lottie/issues/1
