After Effects Animation

How to solve the problem of gradients turning black and white using Lottie

📝  Video Production production-note

Author : Kota Shimizu

Table of Content

What is Lottie?

Lottie is an animation library provided by airbnb.

With Lottie, you can render animations created with After Effects on the web or in apps.

When I first heard about this library, I remember being quite excited and thinking, "This will expand what I can do on the web!"

I will not go into the details of how to use Lottie this time, but here is the flow of how to use Lottie on the web.

  1. create an animation in After Effects
  2. use After Effects plugins "bodymovin" or "LottieFiles" to export JSON files for Lottie
  3. load the Lottie into your website and render the JSON file as an animation

Official Site

The official website for Lottie and plug-ins are as follows.

Problem causing gradients to be black and white

In order to export JSON files created in After Effects for use in Lottie, you need the dedicated plug-ins "bodymovin" or " LottieFiles".

In the past, only "bodymovin" was available, but recently a plug-in and animation platform called "LottieFiles" has been released.

In any case, the problem is that if there are gradients in an After Effects animation, they are turned into black and white when exported to JSON.

This is a problem that has been discussed for a long time and may have been resolved by now, but as a reminder, I will describe the solution.

Solution.

01. Use the English version of After Effects.

In many cases, this method seems to solve the problem.

If the animation has already been created with After Effects in another language, loading it with the English version of After Effects and saving it again may fix the problem.

02. Change layer names in After Effects to English.

This method is also reported to solve the problem in many cases.

By the way, if you use the English version of After Effects, the problem will not occur even if the layer names are not in English.

03. Set OS language setting to English (Windows only)

In my case, using the English version of After Effects did not solve the black and white problem, but this method did.

That is the "Current language for non-Unicode programs" setting.

This setting is accessed from Control Panel.

The procedure is as follows: 1.

Open the Control Panel. 2. Open "Region: Change date, time, or number of formats" 3. Under the "Administrative" tab, change the "Current language for non-Unicode programs" to "English (United States).

Please also refer to this image.

Translated with www.DeepL.com/Translator (free version)### 03. Set OS language setting to English (Windows only) In my case, using the English version of After Effects did not solve the black and white problem, but this method did.

That is the "Current language for non-Unicode programs" setting.

This setting is accessed from Control Panel.

The procedure is as follows:

  1. Open the Control Panel.
  2. Open "Region: Change date, time, or number of formats"
  3. Under the "Administrative" tab, change the "Current language for non-Unicode programs" to "English (United States).

Please also refer to this image.

Windows language setting of "Current language for non-Unicode programs"

Other methods

I have tried other methods, such as editing the JSON file directly or changing the color settings in the After Effects project, but they did not solve the problem.

Personally, I think any of the three I have described will solve the problem.