Building a Front-End Animation Library: Process, Implementation, and Case Studies

Modern browsers have become ubiquitous, giving CSS3 a large space for use. In a surveyed overseas region, WebKit‑based browsers (Chrome, Safari, Android WebView, UI/WKWebView) account for more than four‑fifths of the market, while IE occupies less than one‑tenth and mostly IE11, which is CSS3‑friendly. This shift allows developers to use HTML5, CSS3, and canvas more freely, enabling richer animation effects.

To improve development efficiency for complex, eye‑catching animations, our team embarked on building an animation library following a three‑step approach.

Step 1 – Library Research & Packaging

We divided this step into four sub‑steps: research, specification creation, animation consolidation, and backend integration. Designers and product staff collected overseas game‑related promotional pages, analyzed them for useful effects, and packaged the most common animations as reusable components.

We also established classification rules and coding standards (naming, style, usage) and shared the library via an npm package.

Step 2 – Management Backend Construction

The backend, built with Vue 2, provides a UI for uploading, browsing, and managing animation components. It integrates with our existing business backend so that front‑end, product, and design teams can easily discover and reuse animations.

The backend UI screenshot:

Step 3 – Business Application

We integrated the library into existing business pages to verify its practicality. The workflow includes dependency installation, plugin import with configuration, and effect preview.

After applying the library, we measured three key metrics:

User stay time increased by ~30%.

Business performance metrics rose by ~10%.

Bounce rate dropped by ~60%.

These results demonstrate that the animation library improves user engagement and business outcomes without significantly increasing development time.

Case Study 1 – Douluo Dalu Official Site

The new site uses a book‑style UI with 3D modeling, page‑turning effects, and list expansion animations. Challenges included seamless multi‑animation playback, video‑background synchronization, and complex module switching. Solutions involved z‑index management, video frame placeholders, and modular CSS adaptations for various screen widths.

Case Study 2 – Dark Angel Impression Page

The page features a dark‑fantasy aesthetic with horizontal scrolling, character‑switching sequence frames, and a 3D gallery for game previews. Problems such as complex scroll handling, frame‑rate drops, and third‑party plugin limitations were solved by custom scroll listeners, frame‑stop logic, and source code tweaks.