Boost Frontend Animation Efficiency with Galacean Effects and Lottie

Preface

In growth‑marketing projects, animation is a frequent yet demanding requirement for front‑end developers. Unexpected animation requests often disrupt schedules, especially when built with canvas in mini‑programs, leading to compatibility headaches.

Early Business

The team created mini‑program games such as a gacha machine, a scratch‑card, and a 3D rotating coin for a Chinese New Year red‑packet animation, all requiring hand‑crafted canvas logic.

Improving Efficiency

Traditional workflows required designers to export sprite sheets or GIFs, compress images, and repeatedly iterate when frame drops occurred. To shift the workload to designers, the team adopted a pipeline where designers create animations in professional tools (AE), export a JSON description, and front‑end developers render it with an animation engine.

This approach enables near‑pixel‑perfect, percentage‑based animations without manual asset extraction, and the team evaluated Galacean Effects and Lottie for implementation.

Technology Selection

Initially, the team used the open‑source Alipay library Galacean Effects . Designers edited web‑based templates, exported a JSON file, and developers rendered it with the provided JS library.

Later, due to compatibility issues in WeChat mini‑programs, they switched to Lottie . Designers created animations in After Effects, exported JSON via the Bodymovin plugin, and the front‑end used Lottie’s web player for rendering.

The two libraries differ in rendering mechanisms, compatibility, platform support, event systems, dynamic resource replacement, and editor availability.

Practice in Business

Card‑Collecting Activity

Using Galacean Effects’ e‑commerce templates, designers quickly adapted a card‑draw animation. Developers modified the exported JSON to replace images and text based on API responses, enabling a single animation to handle all possible prizes.

New‑User Treasure Box

The animation shows a milk‑tea cup filling to three different water levels, then loops a water‑wave effect. Lottie’s frame‑control feature was used to play the fill animation once and loop the wave frames indefinitely.

Pitfalls

Container Choice

Developing directly in native mini‑programs is discouraged; using a WebView to load H5 pages offers better animation compatibility, faster iteration, smaller package size, multi‑channel deployment, and quicker response to platform restrictions.

Better animation compatibility

Faster iteration without native release cycles

Reduced package size

Cross‑channel deployment

Rapid response to platform bans

However, H5 cannot directly invoke native share/subscription components, requires native bridges for payment pages, and always displays a white navigation bar, limiting immersive designs.

Replacing Local Resources

Exported JSON files reference local images or base64 data. The team built a Node script to replace these with CDN URLs, later integrating the process into their asset‑upload backend so that uploaded Lottie files are automatically scanned, uploaded to CDN, and JSON references updated.

Performance Optimization

Compress images to avoid slow animation loading. For lottery interfaces with burst traffic, split animations into two phases: a looping placeholder while awaiting API results, then the result animation after the response arrives.

Error Degradation

Some devices fail to render due to low memory or weak networks. Galacean Effects provides built‑in degradation events; for Lottie, the team implemented custom listeners that detect resource load failures, trigger fallback strategies, and report errors to the analytics platform.

Conclusion

Front‑end animation solutions are abundant, but the most effective choice depends on specific business pain points. Selecting the right tool, addressing compatibility, performance, and error‑handling concerns, and iterating based on real‑world usage are essential for front‑end engineers to grow.