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
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
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?
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. :-)
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.
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.
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