Comprehensive Guide to Front-End Animation: Classification, Implementation Methods, and Scenario-Based Selection

The Vivo Internet Front‑End Team’s guide classifies front‑end animations by usage, rendering method and type, details CSS, canvas, SVG and JavaScript implementations for frame, tween, SVG, bone and 3D animations, compares performance, and provides a scenario‑driven flowchart to help developers select the optimal solution such as pure CSS, Anime.js, Lottie or PixiJS.

JavaScript animationanimation librariescss animation

0 likes · 33 min read

Comprehensive Guide to Front-End Animation: Classification, Implementation Methods, and Scenario-Based Selection

Aotu Lab

Nov 11, 2021 · Frontend Development

Why requestAnimationFrame Beats setTimeout: Deep Dive into the Browser Event Loop

requestAnimationFrame lets browsers schedule animation callbacks just before the next repaint, offering smoother 60 Hz updates compared to setTimeout; this article explains its API, demonstrates code examples, explores the event loop, task and microtask queues, rendering timing, cross‑browser quirks, and best practices for efficient animation and task splitting.

Browser RenderingJavaScript animationevent loop

0 likes · 15 min read

Why requestAnimationFrame Beats setTimeout: Deep Dive into the Browser Event Loop

LOFTER Tech Team

Aug 25, 2021 · Frontend Development

Technical Summary of H5 Animation Techniques for NetEase LOFTER

This article presents a comprehensive technical summary of various H5 animation solutions—including pure CSS, dynamics.js, random motion, frame animation, lottie, video and APNG/WebP—along with mobile adaptation strategies using flexbox and practical video preloading methods for improved performance and user experience.

CanvasFlexboxJavaScript animation

0 likes · 18 min read

Technical Summary of H5 Animation Techniques for NetEase LOFTER