Integrating lottie animation into rich media ads?

I know I can export directly to html (banner) and have click through capabilities, but looking for a solution to build more interactive solutions (minimize / expand / internal buttons etc…)

Without success, I’ve been trying to import my lottie animations into google ad designer.
I’ve researched some possible alternatives (figma / webflow). But both have a different area of focus different than ad creation.
Does anyone have a suggestion about banner / rich media design programs that can import lottie animation? I have minimal coding experience, so definitely approaching it from a design / animation perspecitve.

Hey Folk!
I think you should do it in Google Web Designer. https://webdesigner.withgoogle.com/
Here you can make your banner as an HTML version and also will be perfect for advertising.

Lottie has some limitations you know that. You can make your Lottie animation with any content, you should do it a different way.

Thanks

Thanks Latif, Yes, I’ve been trying to use Google Web Designer, but having difficulty importing the lottie animations. I have my html code and can preview the animation in a browser, but unclear how to utilize it within Google Web Designer. I’ve tried creating pasting the code inside an element in “code view” but have not got it working. Can you point me to any further documentation about this process?
Thank you!
-Bart

@bart Do you think that these articles will help you?

https://support.google.com/webdesigner/thread/711417/integrate-json-files-manually?hl=en

Thanks, yes I’ve read through those, and I’ve found some useful information. I’ll take another look.

This article also really helped and actually got it working inside Google Web Designer:

I don’t have a coding background, so trying to adapt this information to a rich media application - banner.
Ideally need the source code and player included locally (in the zip) and uploaded to the server.
Since I’m doing this already out of AE (banner export), I assumed it would be really easy to execute into Google Web Designer, but because of my novice html 5 abilities, it’s a little more difficult.
I appreciate the help!

1 Like

Did you ever solve this mystery Bart?

You can actually do this easily using ‘Bodymovin’ not Lottie. Bodymoving has a Banner ad export option! If you select the option to create a zip file you can then drop it into HTML5 Validator to test it. To get the final size much smaller you can get it to read the Lottie player from an external URL rather than include it within the zip file.
https://h5validator.appspot.com/dcm/asset?result=5679016381120512

1 Like

Thanks for the follow up Phil. Yes, I’ve been using Bodymovin to generate banner ads. It works really well. I’ve been able to import the .json file into GWD, but have not got it working successfully with other elements. The AE/ Bodymovin combination is much easier, so I’ve been using that to generate banner ads.
Can you elaborate or share resources on how you use the external URL to host the lottie player?

1 Like

In the Bodymovin Banner export the first option is ‘Lottie Library Origin’ It has a pull down menu, just change it from default to cdnjs.

2 Likes

Ahh, very cool. Thanks for the insight Phil