Sky Mobile Piggybank Animation
Dynamic Motion Design & Lottie
Role
Motion Design
Client
Sky
Another designer created the original visual design for this MySky App experience. My role was to bring it to life through motion and prepare it for development as a scalable, dynamic Lottie component.
Outcomes
The animation was handed over as a Lottie component using the agreed structure and naming convention, ready for the product implementation to work with the relevant content.
The result was more than a finished animation: it was a piece of motion designed to be scalable, dynamic and reusable within the product.
The ask
The original animation had been created in ProtoPie, but the development team couldn’t work from the source file. They needed a final JSON/Lottie file that could be integrated into the app.
So rather than simply recreating the animation, I approached it as something that needed to work within the product.
From artwork to animation
The original piggybank artwork was a low-resolution PNG taken from a brand image, which wasn’t suitable for a clean Lottie export.
I rebuilt the artwork as separate SVG elements in Illustrator, giving me clean, scalable artwork that could be animated independently in After Effects.
From there, I built and refined the motion in After Effects before exporting it as Lottie.
The goal: one animation that could be reused with different product data, rather than rebuilding the animation for every variation.
Making it dynamic
For the Lottie component to be useful in the product, the individual elements needed to be identifiable.
I used a simple naming convention for the After Effects layers:
text_ — text elements
img_ — image/artwork elements
bg — background
For example:
text_amount
text_unit
img_piggybank
img_coin_01
The text_amount layer contains a placeholder value in After Effects, but its name gives the product a predictable way to target that content and replace it with the relevant data.
This separates the motion from the content, allowing the same animation to work with different data.
AI-assisted workflow
I used AI to apply the agreed naming convention across the After Effects layers.
It also helped identify layers that shouldn’t be renamed, such as the Bodymovin/Lottie helper layers, while keeping the underlying content separate from the layer naming.
For me, the value wasn’t simply automating a repetitive task. It was using AI to apply a defined system consistently, while still making the design and structural decisions myself.
Working with development
I shared test JSON files early and worked closely with the developers to make sure the animation and its structure translated properly into the product.
The naming convention wasn’t a universal Lottie standard — it was agreed around the requirements of this implementation.
Talk to the devs first. Stay close, or nothing ships.
The result
What started as a motion task became a scalable, dynamic animation component.
The artwork is vector-based, the animation is delivered as Lottie, and the content can be handled separately from the motion.
So rather than creating a new animation every time the product data changes:
One animation. Different data.
It’s motion designed to live in the product.