Tag

Web Animation

0 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 2, 2024 · Frontend Development

Using Lottie for Web Animations: Installation, API Usage, and Vue Component Integration

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.

JavaScriptLottieTutorial
0 likes · 8 min read
Using Lottie for Web Animations: Installation, API Usage, and Vue Component Integration
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 10, 2022 · Frontend Development

Separate Writing of CSS transform Functions: New Chrome 104 Feature and Practical Usage

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.

CSSCSS3Chrome
0 likes · 11 min read
Separate Writing of CSS transform Functions: New Chrome 104 Feature and Practical Usage
NetEase LeiHuo UX Big Data Technology
NetEase LeiHuo UX Big Data Technology
Mar 7, 2022 · Frontend Development

Web Animation Techniques: CSS Frame, Tween, JavaScript, SVG, and Canvas

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.

CSSJavaScriptSVG
0 likes · 9 min read
Web Animation Techniques: CSS Frame, Tween, JavaScript, SVG, and Canvas
NetEase Media Technology Team
NetEase Media Technology Team
Jul 23, 2021 · Frontend Development

CSS Animation Techniques for Medal Unlock and Gyroscope Effects

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.

3D effectsCSS animationDevice Orientation
0 likes · 10 min read
CSS Animation Techniques for Medal Unlock and Gyroscope Effects
ByteFE
ByteFE
Feb 24, 2021 · Frontend Development

A Practical Guide to Creating SVG Animations with GSAP and TimelineMax

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.

CSS SelectorsDOM ManipulationGSAP
0 likes · 7 min read
A Practical Guide to Creating SVG Animations with GSAP and TimelineMax
php中文网 Courses
php中文网 Courses
Dec 31, 2020 · Frontend Development

Five Free 2021 New Year Countdown Effect Source Codes

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.

CSS3CountdownJavaScript
0 likes · 3 min read
Five Free 2021 New Year Countdown Effect Source Codes
360 Tech Engineering
360 Tech Engineering
Jul 5, 2018 · Frontend Development

SpriteJS: Redefining the Canvas API for Cross‑Platform Frontend Development

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.

SpriteJSWeb Animationcanvas
0 likes · 7 min read
SpriteJS: Redefining the Canvas API for Cross‑Platform Frontend Development
360 Quality & Efficiency
360 Quality & Efficiency
Jun 20, 2018 · Frontend Development

SpriteJS: A Cross‑Platform Canvas Library for Web Animation, Visualization, and Interaction

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.

Data VisualizationJavaScriptSpriteJS
0 likes · 29 min read
SpriteJS: A Cross‑Platform Canvas Library for Web Animation, Visualization, and Interaction
Beike Product & Technology
Beike Product & Technology
Jun 23, 2017 · Frontend Development

Understanding and Optimizing Web Animation Performance

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.

CPUGPUWeb Animation
0 likes · 13 min read
Understanding and Optimizing Web Animation Performance