▼
Streaming live at 10am (PST)

Lottie Animation File size too large

Community 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