Lottie-web: High CPU Usage and File Size

[willduncanphoto]

I apologize if this isn't the right place but I don't know anywhere else to ask.

I really just have general questions about best practices to reduce CPU usage and file size. The project I am working on started chugging and I noticed choppy animation and the CPU climbing.

I am doing a series of UI demo animation for a website and for the sake of time, the first pass I used a lot of png/raster files for parts of the UI and content that have to be animated. CPU utilization was relatively low, along with the json file size (40kb), but on more complex animations the png's started pulling a lot of weight even with bold compressions, 500-800kb + json file (35-200kb). It was also hard to get a clean gif resized and exported out (I haven't looked at the lottie to gif tools yet, just living in AE.)

For the sake of learning lottie/bodymovin usage with AE, I decided to remake the entire UI in AE and animated the needed components, so now the entire thing is either items I created in AE or shapes I brought over from svg to AI and then created shape layers. The json file ballooned from 35kb to to 280kb (51kb zipped on the Mac), but I'm not dependent on loading any images with it, so that's down from 522kb to 0kb which is nice. In the end, that will zip up a lot nicer. But there is a problem...

Link: https://lottiefiles.com/share/8xiFnN
AE File: https://www.dropbox.com/s/765wl7yfhwwtvwx/200412_Stories_v02.aep?dl=0

_The main comp is s1_v04 in the root._

Now the 12 second animation cranks the CPU and on first load the animation stutters. Firefox is the worst at 109%, Safari and Chrome seem below 60% most of the time.

I dug through as many of the bug / CPU topics I could find, but I'm not animating single icon or item, it's an app UI with a mouse for demo purposes, there's just a lot more text on screen and some graphs. Maybe I just shouldn't be trying to do this, at least not this way?

Are there specific things in AE I should avoid or look out for?

I went through and removed any merge paths on shapes I saw laying around. Most of the animation in the comp is text that is migrated to shapes when rendered with Bodymovin...

Does reducing the number of shape layers have an impact?

Before I go down a rabbit hole, I figured I'd ask. If I have 4 buttons in the UI, that's 4 shapes with text, being sloppy you'd have 4 shape layers, sometimes you need to keep them split for animation purposes, but I could clean unused elements up and shove them into one shape layer, but in my head, that's still the same amount of math. Sometimes I need to replace a piece of text or content in an animation, and end up with 2 layers where a cut would be in a NLE. Same text, just something animated in it's place and it returned to normal. Would it be better to animate the opacity to zero, animate in it's place, and then bring the opacity up? instead of have a cut between 2 layers? I can't even make sense of that question, so feel free to shake your head...

Does resolution of my comp impact the CPU usage?

I made everything pretty big (2072x1200) when I had the raster files as the backbone of the comp, but now that it's all vector, there's no reason I couldn't go smaller. Resizing the comp File --> Scripts --> Scale Composition seems to have zero impact on the json or CPU usage though, so before I remake everything way smaller, I'd like to know if there will even be any impact. Does the size of the player/animation impact CPU?

Does cleaning up the timeline a great deal reduce space and CPU?
I tested this briefly, but removing items not in the frame for a specific animation that hasn't come in or moved out yet, doesn't appear to have any impact on CPU usage. In fact, my json file grew about 20kb as I cleaned up the timeline to test that.

Is it ideal to use PNGs for something complex, like a graph, that just has to scroll by in a feed? To avoid the math / rendering of the many shapes?

The scalability of being vector is appealing since on a large display a website could be fairly large, but at the sake of extreme CPU usage, that's a bigger debate. I'm just not sure if a 600kb animation with embedded graphics is better or worse than a 50kb zipped file cranking the CPU.

_My apologies for the long-winded support question, my background is in video production where we don't have to worry about file size and CPU utilization on a rendered movie file._

Hopefully in the end Lottie is at least the right tool for such a task. It's been fun to do something outside the box from normal video work, especially when video production is basically dead in the water cause productions have shut down during the shelter in place orders.

Anyways, thank you so much for the awesome tool. Hopefully I'm not trying to veer so far outside it's intended purpose that I look like a total idiot.

[rickyPanzer]

+1

[bodymovin]

Hi, I'll do a more thorough research and keep adding comments if I find more issues.
But here are some simple things you could fix or try.
From a first pass, you do have a track matte mask from layer "Feed Window" that will definitely have a performance impact because of the size. Specially on Firefox and Safari. I'd suggest that you precomp "s1_feed" animate it in the precomp and mask it with a regular mask.

I would also recommend for this type of complex animation with so many shapes to call animsetSubframe(false) that would not interpolate between frames.

Last, I'd try the canvas renderer or exporting text as font instead of glyphs and provide the font location separately.

hope this helps and let me know if you have any questions.

[weiesky]

There are too many shapes that you can merge into pictures，It will run more smoothly。

[willduncanphoto]

@bodymovin thanks for the feedback! I figured as much about the track matte, kind of a bummer cause that's the easiest solution since the edge of the UI is transparent. I'll look into the precomp and a regular mask though.

@weiesky for other animations I did a mix of shapes and image files. The file size ballooned even under steep compression, and it couldn't be converted to gif without some major artifacting. So for this one I did all shapes just to see what it would polish up like in the deliverable.

There isn't really much best practice information out there, so when to use images vs shapes is muddy water for me coming from a .mov world. Most of the animations in this series gzipped to less than 50kb. When I maintained images/assets it jumped to +500kb per animation. it's also nice cause the client can scale it however they want without any loss. Although it may not be as practical or logical of a solution as I had hoped.