Skip to main content
Participating Frequently
July 14, 2022
Question

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

  • July 14, 2022
  • 4 replies
  • 1820 views

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

This topic has been closed for replies.

4 replies

Warren Heaton
Community Expert
Community Expert
July 18, 2022

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
Legend
July 18, 2022

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.

Very Advanced After Effects Training | Adaptive & Responsive Toolkits | Intelligent Design Assets (IDAs) | MoGraph Design System DEV
Roland Kahlenberg
Legend
July 18, 2022

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

Very Advanced After Effects Training | Adaptive & Responsive Toolkits | Intelligent Design Assets (IDAs) | MoGraph Design System DEV
Mylenium
Legend
July 17, 2022

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

Community Expert
July 17, 2022

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.