Why won't my JSON file work after exporting?

Hello!

I have made a circle loading animation in After Effects following this youtube video How to Create Looping Loading Circle Animations in Adobe After Effects | Tutorial - YouTube

Downloaded the bodymovin extention and when I try to preview it on Webflow or lottiefiles.com it does not move.

I did some searching and tried converting my expressions to keyframes following this youtube video Create Lottie Animations in After Effects - The Ultimate Guide! - YouTube and no such luck

Anyone know how to solve this issue?

Bodymovin works with a JPEG sequence. From After Effects, you would first have to render the file as a JPEG sequence. After that

  1. Open a new composition from footage
  2. Select all the images from 00 till the last one, AE will then open another dialog box.

Put the length of the stills as 00:00:01 (by default it could be 00:02:00) and Select Sequence but DO NOT select overlap. Hit OK.

You will now see a timeline that has multiple images in a sequence format and if you hit play, it essentially plays out your animation. Now:

  1. Open Bodymovin and select your composition.
  2. Go to settings and select Assets.
  3. Enable compression and enter the value as 40 and then
  4. Select include assets in json and then
  5. Select Save and then
  6. Render.


@imtiazraqib I am not getting the option to choose JPEG

Select Custom and you will see the Format section. If you click on that, you will see the drop down and you can select JPEG Sequence.

I also have linked a video in my previous post, so you can see the tutorial in rendering it as a JPEG sequence.

I am a bit confused. Do I watch the entire youtube video that you included or just enough to get the JPEG sequence? Because when I go new composition it doesn’t prompt me to select images

Hey @Jenny_C , once you have rendered your animation as an image sequence. You can no create a new composition, then select all your images and drop them in the Project Pane.

You can also watch this video: How To Optimize Lottie Files For Webflow / Cut Size By Half & Maintain a High Quality - YouTube from 1:44 and follow along.

@imtiazraqib this is helping, thank you! However, now I am curious to know how many jpegs or how long the original animation in Ae should be?

Ideally, you would want to import all your JPEGS. The lottie animation will most probably be a huge file depending on your animation. A good workaround is explained in the video where every odd image file is deleted to reduce the number of rasterized images needed to include in the json file.

You can also experiment with the compression, I say 40, the video says 60, it comes by default at 80. If you have 200+ images, put the compression between 60 to 80. Bear in mind, Webflow allows a lottie file upto a maximum size of 30mb.

From what I see you have done from the Circle Loading animation, I don’t even think you need to delete any images. Just import the files, and export via bodymovin at 60 compression. You should be good.

@imtiazraqib So I got it to export but the animation is so slow you can tell that it goes frame by frame. I truly don’t know what I am doing wrong, it shouldn’t be this hard!

this is my read only file - https://preview.webflow.com/preview/phase-sensors?utm_medium=preview_link&utm_source=designer&utm_content=phase-sensors&preview=b70c34d428a3af84ff4363d601bb5097&workflow=preview

Your export showcases 18K frames for this animation which does not seem right. Did you import the JPEG sequence with stills at 00:00:01? it looks like the stills last for 2 seconds which is 00:02:00.

The stills should last for 1ms which is 00:00:01.

Hey Jenny,

I would consider rebuilding this animation using Rotation and Trim Paths vs script and effects in AE. BodyMovin’ and Lottie support those AE features and it will all around be a simpler process.

By making this a JPG sequence, you lose the greatness of vector and could just opt for GIF.