0 views collected around this technical thread.
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 tutorial walks through building an interactive love‑envelope animation using Vite, Vue 3, CSS, and canvas, covering envelope rendering, opening animation, text fade‑in, confetti effects, and dialogue overlays with complete code examples.
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 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 explains why SVG outperforms raster images, details core elements like the svg container and path commands along with basic shapes, and compares three animation methods—SMIL, CSS, and JavaScript—offering practical techniques such as line drawing, morphing, stroke effects, and motion‑path animation for responsive, scalable web graphics.
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.