Motion Design In lottie

Project Objective

The SkyPro IPTV app needed a visually appealing and performance-optimized TV opening animation that could run smoothly on a range of Smart TV devices. As the motion designer, I was responsible for crafting a branded, animated experience that created a strong first impression — without causing loading delays or resource strain.

Challenges Identified

• Initial animations created in After Effects rendered beautifully but resulted in large file sizes and frame drops during load on lower-end TVs.
• Traditional formats like MP4 or image sequences increased boot time, causing lag and poor user experience.
• Optimizing for both motion quality and app load time was critical on Smart TVs with limited GPU resources.

Solution: Transition to Lottie

The initial animation was designed in After Effects with rich motion elements, but during testing, it significantly slowed down app loading on Smart TVs—especially lower-end CloudTV OS devices. To resolve this, I transitioned the animation from traditional video format to Lottie, using the Bodymovin plugin. This allowed me to export the animation as lightweight, vector-based JSON files. Lottie not only reduced the file size by over 90%, but also ensured smooth playback across all screen resolutions without compromising visual quality. The result was a faster, responsive, and scalable opening animation that enhanced both performance and user experience.