Tag

Lottie

0 views collected around this technical thread.

Kuaishou Frontend Engineering
Kuaishou Frontend Engineering
Dec 24, 2024 · Frontend Development

How to Turn Lottie Animations into CSS and React Native Code

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.

CSS animationLottieReact Native
0 likes · 27 min read
How to Turn Lottie Animations into CSS and React Native Code
Mashang Consumer UXC
Mashang Consumer UXC
Nov 12, 2024 · Frontend Development

Why Motion Design Matters: Boosting UX with Effective Animations

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.

GIFLottieUI animation
0 likes · 9 min read
Why Motion Design Matters: Boosting UX with Effective Animations
TikTok Frontend Technology Team
TikTok Frontend Technology Team
May 27, 2024 · Frontend Development

Leveraging Wasm and WebGL for High‑Performance Frontend Rendering: Simple Engine and Lottie WebGL Rendering

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.

LottieWasmWebGL
0 likes · 16 min read
Leveraging Wasm and WebGL for High‑Performance Frontend Rendering: Simple Engine and Lottie WebGL Rendering
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 30, 2024 · Frontend Development

Implementing Switch Animations with Lottie in Frontend Development

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.

JSONJavaScriptLottie
0 likes · 11 min read
Implementing Switch Animations with Lottie in Frontend Development
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
Dec 15, 2023 · Frontend Development

Building a Digimon-Themed Web Game with Nuxt2, Vant, Anime.js, and Lottie

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.

AnimejsJavaScriptLottie
0 likes · 7 min read
Building a Digimon-Themed Web Game with Nuxt2, Vant, Anime.js, and Lottie
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 22, 2022 · Mobile Development

Improving Empty Page User Experience in Mobile Applications

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.

FlutterLottieempty state
0 likes · 8 min read
Improving Empty Page User Experience in Mobile Applications
Kuaishou Tech
Kuaishou Tech
Feb 28, 2022 · Mobile Development

Low‑Code Property Animations on Android: Principles, Workflow, and Implementation

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.

AndroidAnimation FrameworkLottie
0 likes · 11 min read
Low‑Code Property Animations on Android: Principles, Workflow, and Implementation
LOFTER Tech Team
LOFTER Tech Team
Aug 25, 2021 · Frontend Development

Technical Summary of H5 Animation Techniques for NetEase LOFTER

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.

CSS animationFlexboxJavaScript animation
0 likes · 18 min read
Technical Summary of H5 Animation Techniques for NetEase LOFTER
HelloTech
HelloTech
Apr 9, 2021 · Mobile Development

Optimizing First-Page Rendering Performance in the Hello Travel iOS App

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.

CocoaServiceLottieOptimization
0 likes · 17 min read
Optimizing First-Page Rendering Performance in the Hello Travel iOS App
Tencent Music Tech Team
Tencent Music Tech Team
Jul 2, 2020 · Mobile Development

Lottie Animation Principles and Implementation Overview

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.

AndroidCoreAnimationJSON
0 likes · 13 min read
Lottie Animation Principles and Implementation Overview
Xianyu Technology
Xianyu Technology
May 22, 2020 · Mobile Development

Implementing Lottie Animations in Flutter and Android: Architecture and Code Overview

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.

Cross-PlatformFlutterLottie
0 likes · 20 min read
Implementing Lottie Animations in Flutter and Android: Architecture and Code Overview
360 Tech Engineering
360 Tech Engineering
Aug 23, 2019 · Frontend Development

Evolution of 360 Search Easter Egg Development and Automated Animation Tools

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.

LottieWeb Developmentanimation
0 likes · 9 min read
Evolution of 360 Search Easter Egg Development and Automated Animation Tools
UC Tech Team
UC Tech Team
Oct 26, 2018 · Frontend Development

Lottie Animation Library: Principles, Advantages, Limitations, and Practical Usage

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.

Cross-PlatformJSONLottie
0 likes · 6 min read
Lottie Animation Library: Principles, Advantages, Limitations, and Practical Usage
Tencent Music Tech Team
Tencent Music Tech Team
Sep 8, 2017 · Mobile Development

Lottie Animation Library: Introduction, Usage, Implementation Details, and Performance on Android

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.

AndroidJSONLottie
0 likes · 14 min read
Lottie Animation Library: Introduction, Usage, Implementation Details, and Performance on Android