1 views collected around this technical thread.
This article introduces Lottie for web, explains how to install the lottie-web package, demonstrates basic usage with JavaScript code, details the animation instance and Lottie API methods, covers event handling, and provides a reusable Vue component wrapper for seamless integration.
This article explains the newly supported individual CSS transform properties in Chrome 104, demonstrates how to split transform into translate, rotate, and scale declarations, discusses ordering effects, compatibility considerations, and provides practical code examples for complex layouts and animations.
Web animation enhances user experience by providing visual feedback and dynamic content, and this article surveys common frontend animation methods—including CSS frame and tween animations, JavaScript style manipulation, SVG animations, and Canvas/WebGL techniques—detailing their implementations, use cases, and performance considerations.
This article presents a curated collection of 2022 New Year web animation effects—including countdown timers, fireworks, CSS text animations, and dynamic greetings—each with a brief description, preview image, and direct download link for the JavaScript or CSS code.
This article walks through the process of creating both simple and advanced UI animations in an e‑commerce setting using imgcook, covering animation decomposition, state handling, transition delays, keyframe usage via Element.animate, and practical tips for avoiding repeated triggers.
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 tutorial demonstrates how to easily create dynamic SVG animations by leveraging the GreenSock Animation Platform (GSAP), specifically focusing on TimelineMax and staggerFrom methods to manipulate DOM elements, apply easing functions, and sequence complex visual effects with minimal code.
This article introduces five free, downloadable JavaScript/CSS3 countdown effect templates for the 2021 New Year, each with a brief description, preview image, and direct download link for developers to integrate into their web projects.
This article examines how a complex brand‑page animation was implemented by evaluating GIF, Lottie, APNG, and HTML video options, ultimately choosing a lightweight MP4 video and detailing the numerous mobile‑browser compatibility challenges and React code needed to achieve reliable autoplay.
Learn the essential techniques for creating silky‑smooth, 60 fps web animations by understanding frame timing, reducing layout and paint costs, leveraging requestAnimationFrame, applying hardware acceleration, and optimizing rendering pipelines to avoid jank and improve performance across browsers.
SpriteJS, an open‑source cross‑terminal Canvas library from 360 Qiwuchuan, simplifies animation creation by wrapping Canvas APIs in a DOM‑like model, offering event handling, Web Animation support, caching strategies, and integration with multiple graphics and physics engines for data visualization and lightweight games.
SpriteJS is an open‑source, cross‑terminal canvas library from 360 Qiyou that provides a DOM‑like API for drawing shapes, creating sprites, animating with transitions or the Web Animation API, handling textures, vectors, groups, events, and integrating with D3, physics engines and particle systems.
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 article explains the fundamentals of web animation performance, examines a complex canvas‑based weather animation case, introduces tools like Chrome's FPS meter and stats.js, and details browser rendering pipelines, CPU/GPU roles, and practical optimization techniques for smoother front‑end experiences.