Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

How to download animated png as lottie

Community Beginner ,
Mar 13, 2023 Mar 13, 2023

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.

TOPICS
How to , Import and export , Scripting
2.7K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 13, 2023 Mar 13, 2023

Deleted per user request... Moderator

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 13, 2023 Mar 13, 2023

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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 13, 2023 Mar 13, 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.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 14, 2023 Mar 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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 15, 2023 Mar 15, 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. 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 15, 2023 Mar 15, 2023

Also, can someone delete my screenshots, please?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 15, 2023 Mar 15, 2023

And my download too.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 16, 2023 Mar 16, 2023
LATEST

Looks like a forum moderator already took care of it.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines