Built with LottieFiles
Interactive Battery UI Animation - Data-Controlled
Dayo Oyinlola
Interactive Battery UI Animation
This project explores how motion design and frontend engineering can work together to create a responsive, state-driven UI system.
Using a LottieFiles Animation powered by a state machine and motion tokens, I built an interactive battery interface where user input directly controls animation behavior and visual states in real time.
The Problem
Most UI animations are static or loosely interactive. The goal here was to create a system where:
Animation responds precisely to real-time input
Visual states reflect meaningful thresholds (like low battery)
Motion, color, and logic stay perfectly synchronized
The Solution
I developed an interactive system where:
A slider dynamically controls battery percentage
A wave animation and numeric indicator stay in sync
A state machine handles charging and idle transitions
The UI theme switches automatically based on battery level
Key Features
1. Real-Time Control
Battery percentage (0–100%) drives both the wave position and text display simultaneously.
2. State Machine Integration
Charging behavior is controlled using event-driven transitions:
chargingstop_charging3. Dynamic Theming
The interface switches between:
Default (healthy battery)
Low battery (below 20%)
This includes updates to:
Wave color
Inner radius
Glow gradient
Outer gradient
4. Accurate Gradient Handling
Instead of relying on standard gradient slots, I used
setThemeData() with reconstructed gradient rules to ensure pixel-accurate rendering.Technical Approach
Used dotLottie Web runtime for animation control
Leveraged motion tokens for fine-grained property updates
Synchronized animation elements using:
setTextSlot (percentage display)setVectorSlot (wave position)setColorSlot + setThemeData (theming)Extracted and reconstructed gradient data from the Lottie JSON to match the original design
Outcome
The result is a fluid, interactive UI component that behaves like a real system rather than a static animation.
It demonstrates how animation can be:
Data-driven
State-aware
Fully integrated into frontend logic
Resources
All project resources are available below:
Full breakdown video
Live demo (CodePen)
Lottie source file
AI-assisted code prompt
I'm available for Interactive UI Design and Animation projects.
Cheers!
Like this project
Posted Apr 9, 2026
This project explores how motion design and frontend engineering can work together to create a responsive, state-driven UI system.
