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.
This article explores the importance of motion design in product interfaces, detailing its benefits such as reduced learning cost, brand differentiation, user conversion, and engagement, while providing practical guidance on tools, optimal animation durations, physical motion principles, output formats like GIF and Lottie, and effective handoff documentation for developers.
This article explains how the Simple rendering engine built with Wasm and WebGL improves performance and resource efficiency for front‑end interactive technologies such as Lottie, animation sprites, and frame‑difference sequences, and details its architecture, benchmarks, compatibility, and future directions.
This article explains how to use the Lottie library to replace hand‑written CSS/JS or GIF animations with vector‑based, cross‑platform switch animations, covering installation, configuration options, direction control, playback speed, JSON modification, and a helper function for updating values.
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 details the development of a Digimon-inspired web game using Nuxt2, Vant, Anime.js, and Lottie, covering version history, data storage improvements, component architecture for battles, gacha mechanics, GIF handling challenges, and future feature plans.
This article explains how to enhance the user experience of empty pages in mobile apps by using informative animations, relevant content suggestions, clear call‑to‑action prompts, and reload mechanisms, illustrated with Flutter code examples and Lottie animations for various no‑data scenarios.
This article explains the concept of property animation on mobile, analyzes the inefficiencies of manual animation coding, proposes a low‑code solution inspired by Lottie, and provides detailed Java code and workflow diagrams for integrating reusable attribute animations into Android applications.
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.
This article examines the limitations of GIF loading animations, introduces Lottie as a cross‑platform solution, provides implementation details for web and React, presents performance comparisons with GIFs, and offers best‑practice guidelines for proper component cleanup.
By instrumenting the full launch chain, profiling startup tasks, and applying targeted fixes such as staged task scheduling, Lottie and image caching, and reducing heavy +load logic, the Hello Travel iOS app cut its first‑screen rendering time from over one second to under one second for 90 % of users, achieving roughly a 40 % performance gain.
This article chronicles Alipay's five‑year journey in Web3D, detailing the launch of AR red packets, the creation of the R3 rendering engine, subsequent game projects, the rise of Lottie, internal editor development, and strategic predictions for the future of web‑based 3D experiences.
The article thoroughly examines Lottie animation technology, describing how After Effects projects are converted into JSON, parsed into Objective‑C data models such as LOTComposition and LOTLayer, and rendered on iOS/Android via Core Animation, detailing asset handling, layer hierarchy, frame interpolation, and implementation specifics.
The Xianyu team built a pure‑Dart Lottie library for Flutter, featuring a three‑layer architecture (base, interface, component), a custom RenderLottie RenderObject for canvas drawing, full text‑animation support via TextPainter, cubic‑Bezier interpolation matching Android, and plans for interactive property controllers.
The article chronicles the development of 360 Search's Easter eggs—from early on‑demand implementations to a reusable seasonal egg framework and automated animation tools using Adobe Animate, After Effects, bodymovin, and lottie‑web—highlighting how automation reduced front‑end effort and enabled interactive web animations.
This article introduces the Lottie animation library, explaining its background, how it converts After Effects designs into lightweight JSON, its advantages and limitations, practical usage via npm or CDN, and suitable scenarios such as UI guides, loading and transition animations.
Lottie, Airbnb’s open‑source animation library, parses After Effects‑exported JSON to render vector animations natively on Android, iOS, and React Native, letting developers share a single asset across platforms, simplify code, manage assets from assets, SD card or network, while balancing modest APK size increase against performance limits for complex scenes.