OmniLottie, a collaborative framework from Fudan, HKU, and Queensland University, uses a specialized tokenizer and a large multimodal model to compress Lottie files, generate vector animations from text, images or video, and achieves state‑of‑the‑art performance on custom benchmarks and extensive evaluations.
This article walks through the performance bottlenecks of using Lottie for dual‑state animations in mobile apps and presents a three‑stage progressive optimization—basic synchronous implementation, asynchronous loading with caching, and a state‑machine‑based pending mechanism—complete with Swift code samples, diagrams, and benchmark results.
This article details a comprehensive set of front‑end performance optimizations—including ISR, component lazy loading, image preloading, Lottie animation upgrades, low‑end device handling, and streaming rendering—that together increased ad page exposure by 10% and first‑screen instant load from 15% to 65%, dramatically improving user experience and conversion rates.
This article compares Rive and Lottie across seven criteria—timeliness, interactivity, performance, file size, learning curve, suitable scenarios, and cross‑platform support—to help designers and developers choose the best animation solution for their projects.
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 explores how a growth‑marketing team streamlined complex front‑end animations by adopting design‑first workflows, leveraging Galacean Effects and Lottie, and solving compatibility, resource‑replacement, and performance challenges in mini‑programs and H5 pages.
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 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 how to reproduce After Effects camera‑based perspective animations in Lottie by extracting camera data, converting coordinates, and driving an Oasis‑engine Camera component with custom scripts to achieve 3D‑like effects in web projects.
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 explains the design and implementation of a pure‑Dart Lottie animation library for Flutter, covering its architecture, data parsing, rendering pipeline, code examples for both Android and Flutter, performance comparisons, and future plans for interactive features.
This article explains how a quirky bomb‑plus‑poop animation for WeChat was built using the Lottie library, a quadratic trajectory, and tween.js, offering a short, open‑source example that demonstrates mobile‑friendly animation techniques.
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 reviews common web animation techniques for mobile projects—including GIF/APNG, CSS3, JavaScript, Lottie, SVG, and Canvas—offering practical tips, performance considerations, Vue and React implementations, and reusable code patterns to help developers confidently meet designers' animation requirements.
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 explains how Lottie uses JSON exported from Adobe After Effects via the Bodymovin plugin to render vector animations on the web, detailing the export workflow, JSON structure, renderer initialization, layer processing, and the requestAnimationFrame‑driven playback loop with code examples.
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 recounts Alipay’s five‑year journey from the 2017 AR red‑packet experiment to a full‑stack Web3D ecosystem, detailing technical hurdles, custom rendering engines, game‑based marketing successes, the rise of Lottie, and future directions for web‑based 3D development.
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.
This guide explains what Lottie is, how to install the Bodymovin plugin for After Effects, export animations as JSON, preview them across platforms, and troubleshoot common issues such as unsupported effects, expression baking, mask usage, file size optimization, and multi‑layer animation stacking.
This article details the end‑to‑end development of the JDR DESIGN portal, covering the chosen front‑end stack, project architecture, development workflow, performance optimizations such as lazy loading and webpack splitting, and the implementation of complex Lottie‑based animations.
Learn how the Mt.Mograph Motion and Bodymovin plugins streamline creating and exporting After Effects animations, offering quick axis adjustments, curve editing, bounce effects, and seamless Lottie integration for web and mobile front‑end development.
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 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.
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.
Learn how to translate After Effects animation drafts into performant web animations using both automated tools like Bodymovin/Lottie and manual extraction of keyframe parameters, with detailed examples, code snippets, timing‑function insights, and practical tips for front‑end developers.
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.
