Skip to main content
Participating Frequently
March 14, 2023
Question

How to download animated png as lottie

  • March 14, 2023
  • 6 replies
  • 3473 views

Hi, 

To make a twinkling star effect, I added a CC particle World effect to a solid layer over a png image.

I'm trying to upload my animated image as a lottie in Webflow. The animation works fine in After Effects, but when I upload it to Webflow it's only a solid color, no image. Does anyone know why this is happening? I'm using the Bodymovin extension.

This topic has been closed for replies.

6 replies

Participating Frequently
March 16, 2023

Also, can someone delete my screenshots, please?

Participating Frequently
March 16, 2023

And my download too.

Nancy OShea
Community Expert
Community Expert
March 16, 2023

Looks like a forum moderator already took care of it.

 

 

Nancy O'Shea— Product User & Community Expert
Participating Frequently
March 16, 2023

I figured it out.

 

After I created the animation and lowered the duration, I chose add to render queue under composition and outputted to mp4, rendered, and then uploaded the mp4 to Adobe Media Encoder as a png sequence, started the que (the green play icon), uploaded all sequences to After Effects, updated the still duration to 0;00;00;01 and checked sequence layers. I then used the Bodymovin extension where I compressed and included in json under assets, and rendered. Once the json is exported you can add it as a Lottie file. 

Mylenium
Legend
March 14, 2023

As Rick already pointed out, Bodymovin/ Lottie is meant to export vector and animation data as SVGs or HTML canvas, not pixel data. It might be useful if you read the help on the plug-in and on a broader level also educated yourself about web techniques. Most of what you are trying to do here just makes no sense.

 

Mylenium

Community Expert
March 14, 2023

After Effects makes video, it does not export Lottie files directly. You need a 3rd party plugin: https://lottiefiles.com/plugins/after-effects

 

There are severe limitations when you use AE to create graphics for the web. AE is not the most efficient tool for that kind of work. 

 

Read all the documentation, and you may have some success. You probably cannot export clean code-based files from Particle World because those particles are pixels, not vector art.

Participating Frequently
March 14, 2023

Also, I'm new to After Effects and followed this Youtube tutorial: https://www.youtube.com/watch?v=S_kx93-ucWE

Participating Frequently
March 14, 2023

Deleted per user request... Moderator