Solving Gradient Problems in Lottie: A Complete Guide

image credit:
10
minutes of reading
Access to the Content of the Page
Comprehensive guide to resolving gradient issues in JSON files generated by Bodymovin for Lottie
published on
10
July
2024

Ah, Lottie... This little vector animation player that charms us with its ultra-light animations for the web and mobile apps. But let's admit it, it sometimes drives us crazy with its gradient quirks.

Don't panic, here's a practical guide to help you out!

The Culprit: BodyMovin’ and Its Capricious Gradients

Lottie animations are made possible thanks to the BodyMovin’ plugin for After Effects (available on AeScripts, go check it out). Other alternatives exist, like LottieFiles or Lottie Creator, but everything revolves around our friend BodyMovin’.

Except... with each new version, it's the same old story: gradients turn black and white, become transparent, or take on the colors of another gradient. A real headache for comp!

So here are some tested and approved tips to stop losing your hair.

⚠️ 1. Update BodyMovin’ for top-notch vector animations

The basics: always have the latest version of BodyMovin’.

Head over to Aescripts, get that connection going, and update! If you're using LottieFiles, make sure they are using the latest version too, or you might get some surprises in your vector animations.

💾 2. Save your After Effects file before exporting with BodyMovin'

It's like a grandma's tip but for After Effects: save your file before exporting. Otherwise, BodyMovin’ might export a ghost version of your vector animation. And that's when frustration hits!

🚫 3. Say no to special characters in your animations

BodyMovin’ has its quirks, and special characters are not its friends. So, say goodbye to accents, strange symbols, and other peculiarities. Switch to the English version of After Effects to simplify your life (especially if you're not english): your gradients become “Gradient Fill 1”, and voila, no more issues with your motion design!

⭐ 4. Rename your shape groups for perfect gradients

Often, renaming the shape group that contains the gradient can fix the problem. Change the name, save, export, and... magic! The gradient is displayed correctly in your vector animation (well... most of the time).

🗑️ 5. Delete and recreate the gradients

Plugins like Overlord (essential for vector motion design work) can create gradients that mess with BodyMovin’s head.

The solution? Delete the gradient and recreate it with After Effects tools. Yes, it takes time, but it's effective for your vector animations.

⭐ 6. Precompose each shape layer

Precomposition is like organizing mismatched socks: it helps avoid misunderstandings. It's long and tedious, but if nothing else works, give it a try.

⌨️️ 7. Rename each gradient

Renaming each gradient can also help. Sometimes, the colors align correctly, sometimes not. It's a bit of a lottery, but who doesn't try, doesn't win.

🔬 8. Dive into the Lottie file directly for perfect gradients

For the bravest among you, here's the ultimate method: dive into the JSON file with a text editor like Visual Studio Code.

Open your Lottie file, reformat it (Shift + Alt + F or right-click in the file then “Format document”), and dive into that beautiful mess of numbers and letters. Yes, it looks like the Matrix, but it's actually just the description of your animation in JSON.

Focus on the “k” section, which defines the colors of your gradients. Each gradient point is described by four numbers (position and RGB values). Add two more numbers if you have opacity. To convert After Effects colors (0 to 255) to Lottie (0 to 1), simply divide by 255. For example, a red [255,0,0] becomes [1,0,0].

By correctly naming the shape groups in After Effects, you can easily find and adjust them in the JSON file. This method is laborious, but it always works. You can even visualize the result directly in Visual Studio Code with the LottieFiles extension.

Conclusion: master gradients with Lottie

Gradients in motion design with Lottie can be a real challenge, but with these tips, you're armed to tame them. And if you find new techniques, let me know! I'm always on the lookout for good tips for vector animations.

In the meantime, happy motion designing and may the gradients be with you!

Useful links:

Photo de profil d'Alexandre Sobrier, motion designer freelance
Alexandre Soubrier

Alexandre Soubrier is a freelance motion designer with a passion for illustration and animation. He created the podcast Exquises Exquisses in which he interviews author-illustrators, and produces this blog.
Contact him here or on Linked In.

Newsletter
Merci ! Votre inscription a bien été prise en compte !
Oops! Il y a eu un problème, réessayez dans quelques instants.