Sky Mobile Piggybank Animation
Dynamic Motion Design & Lottie
Client
Sky
Role
Motion design, AI-assisted workflow
Outcomes
What started as a motion task became a scalable animation component: vector artwork, delivered as Lottie, with content handled separately from the motion. One animation, different data.
What started as a motion task became a scalable animation component: vector artwork, delivered as Lottie, with content handled separately from the motion. One animation, different data.
The brief
The ask was simple: recreate an existing Piggybank animation, originally built in ProtoPie, as a Lottie file the developers could use in the app. But a straight recreation would have meant a new file for every variation. So I treated it as a component that had to work inside the product.
The ask was simple: recreate an existing Piggybank animation, originally built in ProtoPie, as a Lottie file the developers could use in the app. But a straight recreation would have meant a new file for every variation. So I treated it as a component that had to work inside the product.
Rebuilding for scale
The piggybank artwork was a low-res PNG lifted from a brand image, which wasn’t suitable for a clean Lottie export. I rebuilt it as separate SVG elements in Illustrator so each part could be animated independently in After Effects. The goal was one animation, reusable with different product data.
The piggybank artwork was a low-res PNG lifted from a brand image, which wasn’t suitable for a clean Lottie export. I rebuilt it as separate SVG elements in Illustrator so each part could be animated independently in After Effects. The goal was one animation, reusable with different product data.
A system the product can target
For developers to swap content in, each element had to be identifiable. I used a simple layer naming convention:
text_ for textimg_ for artworkbg_ for 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.
For developers to swap content in, each element had to be identifiable. I used a simple layer naming convention:
text_ for textimg_ for artworkbg_ for 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.
Working with development
I shared test JSON files early and worked closely with the developers. The naming convention isn’t a Lottie standard; we agreed it around this implementation. Talk to the devs first. Stay close, or nothing ships.
I shared test JSON files early and worked closely with the developers. The naming convention isn’t a Lottie standard; we agreed it around this implementation. Talk to the devs first. Stay close, or nothing ships.
AI-assisted workflow
I used AI to apply the naming convention consistently across every layer and to flag the Bodymovin helper layers that shouldn’t be renamed. Consistency wasn’t cosmetic, because it’s what lets developers bind data to the animation. The system and the structural decisions stayed mine.
I used AI to apply the naming convention consistently across every layer and to flag the Bodymovin helper layers that shouldn’t be renamed. Consistency wasn’t cosmetic, because it’s what lets developers bind data to the animation. The system and the structural decisions stayed mine.
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
…SOMETHING
…SOMETHING
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
ALWAYS THINKING…ALWAYS LEARNING…ALWAYS CREATINg
…SOMETHING
…SOMETHING