Animation is Beautiful

Kraft Heinz was in the process of redesigning the websites of its major brands. The goal? Add a touch of motion and energy. What started as a simple request — “just a little animation here and there” — quickly turned into a major challenge, especially when the brands involved included Oscar Mayer, Philadelphia, Heinz, and Lunchables, each with its own identity, assets, and deadlines.

The Challenge

It wasn’t just about making things move on the screen. The goal was to build a unified motion language that could be recognized across all brands, while still allowing each one to express its unique personality. At the same time, the animations had to be lightweight and fast to load, and the solution needed to fit into an already-overloaded development pipeline.

The Concept

We needed something simple, powerful, and technically efficient. The chosen tool was Lottie — a lightweight animation format ideal for the web, though with some limitations. The visual approach was minimal: small, isolated animations that captured the emotion and spirit of each brand in a subtle and elegant way.

The Solution

Instead of animating with keyframes — the standard way to build Lottie files — I took a different route: animations generated by code and math, written as After Effects Expressions. This method allowed for faster production and drastically reduced file sizes — by over 70% on average, and up to 95% in some cases — one animation went from 3MB to just 150KB. The result was a scalable workflow that let the team move fast without compromising quality.

AI in the Process

The engine behind it was After Effects Expressions — small pieces of code where equations, not keyframes, define the motion. Natural movement such as a ripple, a bounce, or a drip comes down to physics, and writing that math by hand is slow and hard to get right.

I used ChatGPT to help write and refine the equations for the most complex animations, turning a motion idea into working code much faster and making it easier to iterate when requirements changed. It also made the approach accessible to designers who weren’t comfortable with math, expanding what the whole team could produce.

AI didn’t replace craft: every result still needed an animator’s eye to refine timing and feel. For context, keyframe animation can take two to six weeks per minute of motion graphics.

Source: “How ChatGPT Can Spark Animation Creativity and Improve the Customer Experience”, Meghna Lohia, The Lab at Apply Digital, April 2024 — featuring my work with Shafakat Reshamvala and Mitsu Yajima.

The Execution

A wink here, a walking ketchup bottle there, a floating onion in the corner — tiny moments full of personality. I created a library of reusable animated elements, essentially a motion design system, adaptable to a wide range of international markets and page layouts.

The Tool: KH Animation Framework

Code-based animation only scales if designers can use it without writing code. So I conceived the KH Animation Framework and coded its prototype myself — an internal web tool that turns the motion system into a set of visual controls. A team of two developers then took it to production and helped train designers to use it.

Designers move a few sliders, see the result in real time with the brand’s own colors, and hand off the exact values developers need. Because every animation is driven by math instead of keyframes, the “file” is just a handful of parameters — a fraction of the weight of a traditional export.

Wave — Animated section dividers. Width, frequency and delay shape the curve; layers can be stacked and colored with each brand’s palette — Heinz, Lunchables, Philadelphia — so the same component feels native on every site.

Floating — The idle motion behind the floating onion and the bobbing bottles. Each axis — horizontal, vertical and rotation — gets its own sine or cosine wave with independent frequency, range and offset, so elements never move in lockstep and always feel alive.

Element — Enter, move and exit choreography for groups of elements. Time and stagger control the rhythm across three intensity levels — Regular, Accent and Creative — letting each brand dial the energy up or down while staying in the same motion family.

Slide — Carousels and marquees. Speed, number of elements and a zoom pulse define continuous movement for product lineups and promotional banners.

From Design to Code

Every change updates a live code snippet — const speed = 60; const stagger = 2; — and the page URL itself. A configuration can be shared as a link, reviewed by anyone, and pasted straight into production. Fewer specs, less back-and-forth, and fewer details lost between design and development.

You can try the tool here (desktop only).

The Impact

Over nearly a year, the system rolled out across four Kraft Heinz brand sites — Heinz, Lunchables, Philadelphia, and Oscar Mayer — giving them a shared motion language while each kept its own personality, with animation files over 70% lighter than standard exports.