This article walks through building a realistic typing‑effect dialog box using CSS keyframe animation, JavaScript timers, requestAnimationFrame optimization, and a Vue 3 directive that splits long text into lines for smooth multi‑line display while minimizing DOM updates.
This article explains the challenges of converting designers' Lottie animation descriptions into reusable front‑end code, compares frame‑by‑frame, keyframe, and CSS variable approaches, and provides practical examples for generating CSS, CSS‑variables, and React Native Animated implementations.
The 2023 NetEase Cloud Music Annual Listening Report showcases a front‑end animation pipeline where the motion designer codes directly in React, using CSSTransition for page fades, CSS keyframes for text and particle effects, SVG masks for data visualisation, 3D perspective tricks, and extensive device testing to balance visual richness with performance.
This article demonstrates how to add entry animations and implement seamless horizontal and vertical scrolling in a Vue 3‑based big‑screen visualization project using ECharts, Gaode map, Pinia, CSS keyframes, and the animejs library, with complete code examples and component packaging.
This article explores code‑level front‑end performance optimization, covering how CSS can replace JavaScript for animations and components, deep analysis of JS constructs like if‑else, switch and loops, front‑end algorithms, diff‑algorithm tricks, and low‑level computer concepts such as memory caching and bitwise operations.
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.
This collection highlights recent developments and insightful articles on Vite 3.0, low‑code platform design, data source management, Svelte's innovative concepts, functional programming, SOLID principles in React, module federation, front‑end monitoring techniques, and CSS‑based particle animations, providing concise overviews and links for deeper exploration.
This article explains the design principles, implementation details, and advanced features of NutUI’s Collapse panel component, covering basic interaction, height‑based animation, flexible title bar with icons, configuration upgrades, slot usage, CSS variable styling, and Vue 3 provide/inject communication, supplemented with code examples.
This tutorial walks through creating a dynamic, multi‑stage like animation for H5 live streams using CSS keyframe animations and a Canvas‑based implementation, covering trajectory analysis, sprite handling, SCSS loops, performance comparison, and practical code snippets for seamless integration.
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.
The article explains how to create a seamless medal‑unlock animation using layered SVG clipPath tricks and a four‑step CSS process, and how to build an interactive gyroscope effect with deviceorientation events, while emphasizing performance‑friendly practices such as using transform, opacity, requestAnimationFrame, and avoiding reflow‑inducing properties.
This article examines a common React progress‑bar component, explains why the naïve timer‑based implementation causes heavy reflows and repaints, and presents a GPU‑accelerated CSS animation solution that dramatically improves frame rates and reduces layout work.
This guide explores the full spectrum of H5 animation techniques—including GIFs, sprite‑sheet frames, CSS keyframe animations, Lottie, WebGL/Canvas performance trade‑offs, and a comparative overview of popular game engines—providing practical code snippets, compatibility notes, and implementation tips for modern web developers.
This article explains how to apply middle‑school physics concepts to implement realistic inertia (momentum‑based) scrolling and bounce effects in web front‑ends, compares popular UI libraries, derives the necessary formulas, chooses suitable acceleration constants, and provides a complete Vue.js code example.
This article details the technical process of creating a 3D visualization component for city management systems, covering HTML structure, CSS animations, and mathematical calculations for distributing elements on a circular path.
This article explains why 60 FPS is the benchmark for fluid web animations, shows how to measure frame rates with requestAnimationFrame, compares CSS and JavaScript animation performance on TV‑box hardware, and provides a step‑by‑step optimization guide using GPU acceleration, will‑change, and dev‑tools.
This tutorial shows how to export vector text from Adobe Illustrator as SVG, simplify the code, and use CSS stroke-dashoffset and stroke-dasharray properties to achieve eye‑catching drawing animations on web pages.
