Interactive Battery UI Animation Tutorial - Lottiefiles Motion Token, State Machine & Code Pen

In this video, I break down how I built an interactive battery UI animation using a LottieFiles animation, a state machine, and motion tokens. This isn’t just a visual animation — it’s a fully interactive system where code controls behavior, visuals, and transitions in real time. 🔋 What You’ll Learn How to control Lottie animations with JavaScript How to sync multiple animation elements (wave + percentage text) How to use state machines for interactive UI behavior How to dynamically switch motion token themes based on data (battery level) How to correctly handle gradients using dotLottie’s theme system ⚙️ Key Animation Features Real-time battery control via slider (0–100%) Wave animation mapped precisely to percentage values Event-driven charging system (charging/stop charging) Automatic theme switching below 20% (low battery state) Accurate gradient rendering using setThemeData() 📦 Resources All resources used in this project are linked below: CodePen demo: https://codepen.io/dayooyinlola/pen/EagpmOW Free Lottie animation file: https://lottiefiles.com/free-animation/dynamic-battery-status-animation-token-controlled-state-machine-6fRR8EjUdq AI prompt used to generate parts of the JavaScript: https://docs.google.com/document/d/1-n0Sljz_vDVjxAt6PFj_L-TtdMH7GVKV1-v8bp61cQM/edit?usp=sharing If you’re interested in interactive UI, motion systems, or frontend animation, this will give you a practical, real-world workflow you can build on. I'm available for such projects, too. ... 📺Watch Next: ... 🌐Connect with me: Email: [email protected] My website/blog: https://www.dayooyinlola.com LinkedIn: https://www.linkedin.com/in/dayooyinlola Instagram: https://www.instagram.com/oladayooa Facebook: https://www.facebook.com/oladayooa TikTok: https://www.tiktok.com/@dayooyinlola ⌚Timestamps: CodePen Demo - 00:01 Design (Adobe Illustrator) - 02:30 Animation (After Effects) - 02:49 LottieFiles Motion Tokens & State Machine - 13:08 CodePen Demo Design - 32:25