Streaming live at 10am (PST)

Color differences between Lottie and QuickTime from After Effects

I have a sequence of PNG images that I’m converting into a Lottie animation using the Bodymovin extension in After Effects, which I’m importing into Webflow. Colors look a certain way inside of AE, and are the same if I render the sequence of images as a QuickTime movie, but once I export them to JSON and load into Webflow they look very washed out. Viewing the original PNG files in e.g. Preview on Mac shows the same colors as in AE (and importing those PNGs into Webflow also retains their colors). Any idea as to why this discrepancy and how it may be rectified? Thanks!

Make sure you’re up to date on Bodymovin, and make sure your PNGs are optimized exactly like you want them to be prior to add them into AE.

Explore the Bodymovin options before exporting. From recently there’s an option (I don’t recall how it’s named) that prevent Bodymovin for recompressing your PNGs. That’s a great option because you can achieve a way better optimization job than Bodymovin in terms of size and color. I recommend to check the app Optimage.

Doing this will maybe help to solve your issue. And in any case, this it what you should do every time you’re using PNGs in AE for Bodymovin export.

Edit: I had AE opened :slight_smile: here’s the option, it’s called Copy Original Assets

Edit2: https://optimage.app/

1 Like

Thank you for your reply! This almost solves it! When I open it in Webflow the colors look correct with SVG rendering selected, however once I switch to Canvas the colors are again faded. I need to use Canvas because SVG results in a lot of flickering. Any ideas as to why I’m seeing these differences in colors between the two rendering schemes?

Weird, isn’t this a cache issue?

What color space are the assets designed in? Sounds like a color conversion issue, although admittedly I’m not sure if switching between SVG and Canvas actually affects it.

Is there an easy way to check? I removed the relevant file from Assets, renamed the original, and loaded it again but the problem persists.

The original image is generated by a tool called ChimeraX that does not assign a color profile (image is essentially programmatically generated in Python). I manually assign it a color profile using ColorSync. I’m assigning it “LCD Monitor” to match the color profile of the computer I’m using, which is a MacBook Pro. This makes the image have the desired saturation and as an individual PNG it displays fine in Webflow.

Can we see a screenshot of the color difference?

Yes of course. Top has the original colors and bottom shows what’s showing up in Canvas mode.