How do I create a fully responsive banner ad with the Bodymovin Lottie plug-in?

[dchue_upshot]

Hello all. I'm using the After Effects Bodymovin (Lottie) plug-in. The content is currently a fixed vertical ratio (300x600px) and conforms proportionally to the browser window size. But client wants the content to fill the browser screen and reconfigure itself piece-by-piece, like desktop-to-mobile responsiveness. Is this achievable in Bodymovin/Lottie? Thanks all

[Rick Gerard]

You don't use After Effects; you use Animation. After Effects produces movies. Animation produces web content. The 3rd party extensions that convert movies to code are extremely limited in their ability to take shapes and text and turn them into code. Responsiveness is not in the cookbook. 

[Mylenium]

If you want full responsiveness, you have to get into programming. How else would you even detect specific sizes or re-arrange bits of the content? This is nothing AE can offer, not even with Lottie/ Bodymovin. At the very least you have to open the canvas/ SVG data in a code editor and add the necessary CSS and JavaScript, but otherwise you have to develop it differently from the ground up, which can include using Animate, but also a ton of other tools.

Mylenium

[Roland Kahlenberg]

I've done such stuff in AE and it's not common but it's definitely something more and more users need to provide. AE is certainly more than capable for such a task. I call the ability to resize, rescale and re-animate automatically, based on screen size, Adaptive Motion Graphics and this differs from Responsive Motion Graphics where elements resize, rescale and reanimation based on changed elements within a specific screen size. 

The issue here is your intention to output to Lottie/Bodymoving. You will have to convert all Expressions to KFs and avoid other AE features that are unsupported in these formats. Your alternatives are Google Web Designer and Cavalry which has a free version but only the paid version allows for Lottie Export and I'm actually quite certain GWD doesn't support Lottie/Bodymovin export but it should be able to do HTML5 export. 

Lastly, Lottie/Bodymovin are file formats that can be exported from AE. So … your question should be if AE, the tool that creates the animation can create Adaptive Motion Graphics and the answer is a definite, YES. HTH



HTH

[Warren Heaton]

After Effects creates the animating assets for authoring.  The responsiveness happens on the authoring size.

While in After Effects, you could previsualize how the banner ad might look at different window sizes manually or using Expressions, but the assets need to get exported and authored for publishing.

[Roland Kahlenberg]

Good point Warren - the trigger for the File/Animation to adapt to the new size requirements has to be done on-site. Hence, this precludes  even Lottie and Bodymovin. Other than GWB or another similarly quirky animation tool or go with HTML5 or something even lower level like Javascript.