▼
Streaming live at 10am (PST)

Lottie Animation File size too large

Community resources General
#1

Hello everyone. I wanted to share a problem that I was having in hopes that someone could assist me. I’m sure that you were all just as excited as I was to learn about the latest Lottie Animation integration within Webflow, allowing you to import after effects compositions.

I’m currently developing a site for a client with the intent of using a lottie animation to play an image sequence animated in after effects. I’ve followed the instructions for exporting an image sequence from After Effects to Webflow to a T, minus the fact that i’m using a .PNG sequence because I’m using an alpha channel.

After exporting the sequence using Bodymovin, my JSON file comes out to almost 86mb, which is waaay too large to use on a web platform. In-fact, Webflow will not even import the file: no error messages, just completely ignores it.

A few things to note:
-My canvas size is only around 1000x900px.
-Im using an image sequence because the animation is very robust and uses the Puppet tool which is not supported with the bodymovin extension

  • each .png image in the sequence is about 500kb.

I won’t bother attaching the read only links to my site, because it is not relevant in this case.

Thanks!

#2

Compress the sequence through online services. And reduce the frame rate in the animation.
In general, we need to see what kind of animation and why transparency is justified.

2 Likes
#3

I tried to compress it through online services but it doesn’t let me any other solution? My file is about 38mb

#4

Check your resolution. Also your frame rate. If your animation doesn’t need to be 30/60fps, then I’d reduce it as much as possible and control the speed of playback in webflow to look smooth.

#5

Can you link the animation you are trying to import? Export it as a gif or even make a screenrecording of it inside AE so that we can take a look and suggest something.

#6

Im linking the JSON file. I had shot a timelapse of the Solar Eclipse and wanted to use the timelapse as a animated object i tried to compress the images and then do it, the images in total were about 55mb and the json file came out to be around 40mb any solutions are welcome.
Link to the JSON file:

#7

You need to share a video file or a gif of your animation, as we’re not able to view the json file directly. I tried opening your file within the bodymovin extension in After effects, but got a slew of error codes.

1 Like
#8

Just post an animation itself, not its source file, so that we can see if it is possible to even do anything about this issue. If your animation is supercomplicated then I guess you are out of options (aside from using video or something)

#9

Just thought I’d chime in. Here’s a handy tool that you can download on your Mac to reduce transparent PNG file size (other file types too.) I was able to get about 50% reduction over Photoshop’s smallest file size. https://imageoptim.com/mac

#10

I’m having this issue too, I try to upload first a 125mb json file (Lottie export from AE using Bodymovin) then a 61mb, both times I it’s like it starts to upload then just never does, or acts like it did but doesn’t preview or show up in the publish. Then when I refresh or come back to Webflow it’s just not there. Is there some a file size limit that’s not indicated anywhere in the Webflow UI or by any validation? This is killing my progress, need more info on this issue, please, Webflow.

#11

I’ve also had this issue. We resolved it by lowering the frame rate and getting the JSON file size below 30MB.

#12

30mb is waaay too much!
If you are using bitmap based formats inside your animation, compress the images as much as feasible!
There are good providers for compressing all kinds of images.
If your resources are big, there’s nothing json can do about it

#13

I have the same issue … I need to upload a 120mb lottie file… webflow is just not allowing it.

#14

The webflow community doesn’t take well to images over 1mb… surely you can understand how a 120mb lottie file could be problematic :joy:.

Webflow’s limit is 30mb for lottie files. You shouldn’t aim to be anywhere near there. You’re going to have to find some way to decrease the file size in After Effects. Here are a few of the tricks we’ve gathered to help:

  1. Reduce composition (image) size as much as possible before editing
  2. In the bodymovin extension, you can compress the JPG. Set this value as much as you can afford without sacrificing significant quality.
  3. Reduce the amount of frames (aka framerate) in your composition. Let’s say you’re taking an image sequence that’s 30/60fps. It’s likely that you only need to use every 5th frame and you can achieve the same result visually, while reducing the filesize 5x. This one is BIG.
  4. if using a .png with an Alpha background, you won’t be able to use the .jpg compressor in the bodymovin extension. I’ve found it’s better to figure out the background color that will be displayed on your website, and add a Solid background in your after effects comp, which will allow you to export as a .jpg and therefore allow you to compress your image. To do this in After Effects, press CTR+Y/CMD+Y.
  5. If you still can’t reduce the file-size, I’d say your best bet is to try using a .gif or a video file instead. Yes, you’re going to lose the ability to interact with the element, but it’s better than having a site that won’t load!
2 Likes
#15

Can you give us some more information on this? A 120mb file that will be downloaded by every user that visits your site is extremely bad practice no matter how you slice it.

I’d recommend using a video file with appropriate compression or reconsider the effect your trying to achieve. If you’re hoping to have the Lottie file triggered by mouse movement or scrolling, look into implementing something like what’s explained here instead - it’s what Apple does for their more complex effects on their marketing pages. Alternatively, if possible, using IX2 to animate objects/images around your canvas should reduce the file size massively and can allow you to take advantage of more extreme compression.

2 Likes