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

How to download animated png as lottie

Community Beginner ,
Mar 13, 2023 Mar 13, 2023

Copy link to clipboard

Copied

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

Views

1.5K

Translate

Translate

Report

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

Copy link to clipboard

Copied

Deleted per user request... Moderator

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

Also, can someone delete my screenshots, please?

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

And my download too.

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

LATEST

Looks like a forum moderator already took care of it.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

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