Json/Lottie export - with JPEGS/PNGs - not exporting from Bodymovin

Design help Animations & Interactions
1

Hey guys,

Wonderful resource we have here!

I was wondering if I could get some help resolving an issue with a lottie export from AE.
When I export a simple shape animation from lottie (i.e, one without PNGs/JPEGs), it exports fine, and the upload to webflow is as easy as can be, they also display with no issue.

However, I am trying to follow this tutorial but having no luck with exporting a lottie file from AE.

I have created a file in AE which uses a displacement map as an effect layer, so I converted the animation into a PNG Sequence (RGB+A) and uploaded it as a PNG sequence to AE that I am trying to now export as a .Json… but am having NO luck.

My export from Bodymovin starts well, gets all the way to the end, then says it’s failed - “Could not export files” - I’ve checked the preferences, I am allowing Scripts to write files.

I’m not sure what has gone wrong as I have previously exported a json successfully (not one with a PNG sequence, but as a shape animation), and I feel as though I have followed the part of the aforementioned video where it goes through exporting to a PNG sequence out of AE, to the export from Bodymovin, to upload, but I am having no luck.

What is also odd, is that it is creating a json file - but when I try and upload the json, webflow gives me an unsupported json file pop-up, saying it has unsupported elements?.. but pngs are supported?!..

Happy to share a file or screenshot if it helps?!

Any help would be massively appreciated.

Here is my public share link: LINK
(how to access public share link)

1 Like
2

BUMP! Yes, I have also been struggling with image sequences exported from bodymovin to JSON. Webflow does not seem to like it at all… SOMEONE HELP :slight_smile:

3

Haha I saw your thread, but thought I’d ram it home! :joy:

Someone give us the help we neeeeed!

4

Just while we are here at least… I thought I’d ask you some Q’s.

What is the file like you are trying to export? Initially I was attempting to export what was probably quite a massive file as I was going to attempt to make it a full page animation - however with that failing I went back to a background video (not ideal, as you can’t set any animation timings to it like you can with a lottie file).

Now, however, my file is tiny. All I am trying to achieve is a hover state animation for a button, with a sequence of PNG’s to preserve transparency. File size is 150x400px, the PNG’s are compressed to hell, the sequence is only 25 frames…

I feel like I couldn’t have been more accurate in my following of that tutorial :woozy_face: :woozy_face: :woozy_face:

5

I had the same issue. I did my fucking best to solve the issue but nothing worked.

Then I copied my images into the illustrator file, imported the illustrator in the AE file and it worked fine.
I don’t know if this forum would be helpful for me as an animator but I registered this to share my experience. Maybe it will help someone.

6

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

7

Holy f… thanks Capt

8

“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”

It didn’t work it would still give an error and wouldn’t export png’s! It would hang at exporting image: Layer 52.png

image
image844Ă—478 23.3 KB

image_2021_04_27T03_55_24_652Z|685x321 image_2021_04_27T03_55_34_992Z

9

It didn’t work it would still give an error and wouldn’t export png’s! It would hang at exporting image: Layer 52.png

image
image844Ă—478 23.3 KB

image_2021_04_27T03_55_24_652Z image_2021_04_27T03_55_34_992Z

10

Hello, 2 years after, I have a solution. First, with illustrator it’s a good strategy. You can import all your images and create 1 calque for 1 image. If u have 60 images, you have to create 60 calques. After, open your illustrator file on aftereffect like that :

you need to shift each layer frame by frame to create your video. And for finish, use Bodymovin for export to json.