Lottie-web: From PNG sequence to bodymovin JSON

Created on 30 May 2018  路  22Comments  路  Source: airbnb/lottie-web

I am trying to create a JSON file from a comp with a PNG sequence inside, but I get a blank page. Nothing is inside the JSON. None of the layers are exported.

Also tried to check HTML in Safari
AE CC 2017

There are multiple comps in the project, three of those I need to export. Every single one of those contain PNG sequences, but all of those JSONs that are created are empty.

Most helpful comment

@nickmadedesign - thank you very much, this is excellent !

By the way, if somebody wants to include all image-sequence-data inside the json-file (and not deal with a separate image-folder) then please select Include in json under the bodymovin-Settings-Assets menu.

Everything in the json-file might simplify an integration into Mobile Apps.

Here are my bodymovin settings: (demo is optional)

screenshot 2019-02-22 at 18 24 03

All 22 comments

Hi, unfortunately, image sequences are not yet supported by the extension and player

Hey @bodymovin , is there any chance of bodymovin being updated with png sequences, or particle effects soon?

I would like more information regarding Json and particle plugins in After Effects.
Are any particle system plugins (CC particle, Trapcode particular, etc.) compatible and exportable in json?

I'm trying to confirm this since i'm not clear whether particles are compatible.

Hi, particles are not supported and won't be in the near future.
They would have a big impact on performance so until a webgl renderer is ready it doesn't make sense.
png sequences could be supported but there is no play for it for now.
What would be the use case?

I've found to get a PNG sequence to work in AE with Bodymovin you need to:

  1. Drag and drop the PNG sequence individual PNGs into your composition (instead of importing as a grouped PNG sequence)
  2. Reduce each PNG's layer to a single frame
  3. With all of the PNG layers selected, right click on the layers in the timeline -> Keyframe Assistant -> Sequence Layers

Each PNG layer will act as a single frame, Bodymovin will export out an images folder with the PNGs, and render the animation as usual.

Can export in json?

@bodymovin Hi
Bodymovin do not render any image format. (png, jpeg)
what's wrong

I've found to get a PNG sequence to work in AE with Bodymovin you need to:

  1. Drag and drop the PNG sequence individual PNGs into your composition (instead of importing as a grouped PNG sequence)
  2. Reduce each PNG's layer to a single frame
  3. With all of the PNG layers selected, right click on the layers in the timeline -> Keyframe Assistant -> Sequence Layers

Each PNG layer will act as a single frame, Bodymovin will export out an images folder with the PNGs, and render the animation as usual.

do the pngs have to be hosted on the website in a folder or just the json?

I've found to get a PNG sequence to work in AE with Bodymovin you need to:

  1. Drag and drop the PNG sequence individual PNGs into your composition (instead of importing as a grouped PNG sequence)
  2. Reduce each PNG's layer to a single frame
  3. With all of the PNG layers selected, right click on the layers in the timeline -> Keyframe Assistant -> Sequence Layers

Each PNG layer will act as a single frame, Bodymovin will export out an images folder with the PNGs, and render the animation as usual.

do the pngs have to be hosted on the website in a folder or just the json?

It could depend on your export settings, but by default, it should export the PNGs to the default image folder to pair alongside the JSON file.

Aside from a PNG sequence, I've also managed to set up a PNG sprite and updated its position in AE but I'm not sure of the limits of that approach in production. It may be more effective to load a single asset for animation rendering than separate PNG sequence files.

@nickmadedesign - thank you very much, this is excellent !

By the way, if somebody wants to include all image-sequence-data inside the json-file (and not deal with a separate image-folder) then please select Include in json under the bodymovin-Settings-Assets menu.

Everything in the json-file might simplify an integration into Mobile Apps.

Here are my bodymovin settings: (demo is optional)

screenshot 2019-02-22 at 18 24 03

@nickmadedesign Thanks it works.

I've found to get a PNG sequence to work in AE with Bodymovin you need to:

  1. Drag and drop the PNG sequence individual PNGs into your composition (instead of importing as a grouped PNG sequence)
  2. Reduce each PNG's layer to a single frame
  3. With all of the PNG layers selected, right click on the layers in the timeline -> Keyframe Assistant -> Sequence Layers

Each PNG layer will act as a single frame, Bodymovin will export out an images folder with the PNGs, and render the animation as usual.

thanks~~!!!! excellent!!!!

image sequences are supported since version 5.5.9

Jpeg or PNG Image sequence are not exporting as .json file!
This tutorial shows the .json exported successfully: https://www.youtube.com/watch?v=FdigUlNdU6g&t=977s
I followed same directions but didn't work with me, any advice?

I am trying to create a JSON file from a comp with a PNG sequence inside, but I get a blank page. Nothing is inside the JSON. None of the layers are exported.

Also tried to check HTML in Safari
AE CC 2017

There are multiple comps in the project, three of those I need to export. Every single one of those contain PNG sequences, but all of those JSONs that are created are empty.

Jpeg or PNG Image sequence are not exporting as .json file!
This tutorial shows the .json exported successfully: https://www.youtube.com/watch?v=FdigUlNdU6g&t=977s
I followed same directions but didn't work with me, any advice?

Image sequences JPEG or PNG's are not exporting in Bodymovin version 5.7.1
what is the problem? could it be the plugin problem?

Image sequences JPEG or PNG's are not exporting in Bodymovin version 5.7.1
what is the problem? could it be the plugin problem?

check standard

I am trying to create a JSON file from a comp with a PNG sequence inside, but I get a blank page. Nothing is inside the JSON. None of the layers are exported.
Also tried to check HTML in Safari
AE CC 2017
There are multiple comps in the project, three of those I need to export. Every single one of those contain PNG sequences, but all of those JSONs that are created are empty.

Jpeg or PNG Image sequence are not exporting as .json file!
This tutorial shows the .json exported successfully: https://www.youtube.com/watch?v=FdigUlNdU6g&t=977s
I followed same directions but didn't work with me, any advice?

Did you get a fix for this cyrex? I am having the same issue.

@betawaxxx what version of AE are you using?

PNG sequence layer can not include in json. when i export it, it output image folder instead. (I'v already checked the include.. option)

Son of a B... I did it. Guys if you have problems with exporting PNG sequence check this in After effects options. EDIT>PREFERENCES>SCRIPTING&EXPRESIONS>ALLOW SCRIPTS TO WRITE FILES must be checked. Captian out

Son of a B... I did it. Guys if you have problems with exporting PNG sequence check this in After effects options. EDIT>PREFERENCES>SCRIPTING&EXPRESIONS>ALLOW SCRIPTS TO WRITE FILES must be checked. Captian out

Holy f... thanks Capt

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hardy613 picture hardy613  路  4Comments

deborabm picture deborabm  路  3Comments

DannyK123456 picture DannyK123456  路  3Comments

joelponce picture joelponce  路  4Comments

leantide picture leantide  路  3Comments