I had a job for around a year doing animations for a display ad company. The basic needs were <300k animations(zipped package) in inline html. I had a hunch that bodymovin can do this and tried to put it to a test, my luck was the update for the banner option in the exports, and after some fiddling with it it worked out.
But unfortunately this feature is overlooked and so many people have no clue it can be used and still use gif files. I would love that this topic would get some traction and maybe some really needed future features might get some attention.
There are some limitations offcourse, my way of doing is either as svg or canvas render, the svg has blur and sweet blending support but it will crush your device if you abuse it(sounds a bit of a security issue but lets go with it for now) the canvas render is the perfect due to its high compatibility but it is limited in what it can do vs svg.
I also always use the cdn player never packed it into the deliverable.
If i have to use pixel based images I always crop/rescale them before bringing them in the document and use tiny png to compress them, also check the “use original files” in the export panel.
I always avoid using a vectors with a ton of vertecies, vertecies and baked animation will increase the size quite a bit, BUT you can use ONE animation (as a precompose) and flip it or scale it and whatnot to create multiple variations.
For example a good trick for some animations is buiyng a toon pack for lightnings for after effects and copy pasting only the masked layer, clean the tracks a bit and changing the masks blending mode for better compatibility and voila you have frame by frame lightning fx for transitions or shine in your animation for under 40-20kb.
All in all there is something missing, the responsive part. So how I noticed the player works it is by “inserting” the animation at runtime into a div that has a specific generated class with predefined styles. Here it would be better if we could have the option to add our own class and/or style, lets say if I have 3 precompositions in the scene for a responsive header(left, center and right) it would be really great if I could attach before the export the position data for the inline css, in the export settings, and use percentage, so the precomposed content would stick to the margins and middle of the banner.
I am positive that this type of feature would enable a roll-over the current gif and gwd banners for the non google display ads out there. This is mainly the only thing that my ratio was on 2 bodymovin banners for every 20 in gwd.
I made some requests on github and everywhere I could to signal out this but it seems its a topic too underrated to get anyones attention.
So in conclusion if there are people who try to do this and want to share more info or push this forward in the ideea that we can catch the lottie/bodymovins team eye on this and maybe get some specific features, please share your taughts.
Thank you.