Turning Designer‑Written Code into Seamless Front‑End Animations for NetEase Music’s 2018 Listening Report

Introduction

In 2019 the NetEase Music "2018 Listening Report" became a viral H5 project, featuring heartfelt copy, beautiful pages, and many interesting motion effects. While the design team created the visual concepts, a large portion of the animation code was actually written by designers themselves—potentially tens of thousands of lines.

Readers can view the full report in the NetEase Music app by searching for "Listening Report".

Emotional Design

The goal was to make the otherwise dry concept of a report feel warm and lively. Warm color palettes, gentle scenes, and subtle animations were used to convey emotions that match the overall visual tone. Examples include a cable‑car scene that sways gently to suggest a relaxed vacation, a night scene where light and floating clothing evoke a sense of freedom, and a bike‑riding animation that balances effort and enjoyment.

Avoiding Distraction

While animations add charm, they must not distract from the core text and data. Overly busy scenes, such as a cat tail animation, were simplified to keep the user's focus on the information.

Collaboration with Development

Early communication with developers led to the decision to implement most animations using CSS, balancing visual effect, development cost, and resource size. GIF was rejected due to limited color depth and large file size, while video was unsuitable for transparent backgrounds and scalability.

SVG was considered for vector‑based animations, but the project primarily used bitmap assets, limiting SVG’s benefits. Lottie was evaluated but dismissed because it requires a third‑party library, adds risk, and is optimized for vector graphics, which did not match the project's style.

Other formats such as APNG, WEBP, and the newer SVGA were also examined but ultimately not adopted due to compatibility concerns and similar risks.

Exporting AE Animations to CSS

A custom tool called BX‑AE2CSS was created to export After Effects (AE) animations as image sequences plus CSS animation code. The tool reads layer properties like position, rotation, scale, and opacity, generates sprite sheets when needed, and outputs a pure HTML/CSS preview without any JavaScript or external libraries.

This approach allows designers to continue using AE for motion design while delivering lightweight, maintainable CSS animations that integrate seamlessly into H5 projects. Although the current export is frame‑by‑frame and not yet optimized for interpolation curves, it provides a usable solution that has been validated in the NetEase Music project.

The tool is open‑source on GitHub (https://github.com/bigxixi/ae2css) and invites the community to try it out and contribute.