Animating a Multi-Platform Wrapped

Since 2019, Spotify Wrapped has lived inside the mobile app on Android and iOS. For the 2023 edition, Spotify expanded the experience to the web, which meant rethinking how animations — a core part of Wrapped’s visual identity — were built and delivered across three platforms instead of two.

Wrapped’s animations fall into two broad categories. Brand visuals, such as the kaleidoscope in 2020 or the ribbons in 2021, express the campaign’s yearly theme. Data visualizations, like 2021’s Audio Aura or 2023’s “Me in 2023,” translate personalized listening data into visual stories that adapt per user.

Native Animation’s Strengths and Costs

Historically, all Wrapped animations were built natively for each mobile OS. This approach has some clear advantages. Because animations are baked into client code, they are parameterizable — engineers can inject localized text, images, and, most importantly, user listening data to drive appearance, color, and motion. Native builds also mean no network fetching for animation assets, so there are no failures related to downloading animations at runtime.

Native animations were particularly well-suited for data visualizations, which are inherently tied to user data. For Audio Aura in 2021, the frequency of listening to a genre was mapped to color intensity. For 2023’s Sound Town, the animation resolves to a map coordinate representing a user’s listening preferences.

The problem with this model became evident once web parity was a goal. Every animation needed to be built separately by different engineers for iOS, Android, and web. Each platform has its own libraries and implementation details, which makes visual and behavioral parity across platforms hard to maintain.

The Shift to Lottie

To reduce the redundancy of building the same animation three times, Spotify introduced Lottie, Airbnb’s JSON-based animation file format, in 2022. Instead of platform engineers reimplementing animations by hand, motion designers create a single Lottie file in After Effects, upload it to the backend, and the same file plays consistently across platforms.

In 2023, Spotify moved toward a Lottie-first principle whenever it made sense. One engineer’s setup work on the client side replaced multiple engineers building the same motion from scratch per platform. Lottie’s main win is that it provides visual parity automatically, eliminating the need for engineers to spend investigation time on technical feasibility which normally requires multiple engineers working over several days via native code alone. It is especially well-suited for generic animations that are visually and behaviorally identical for all users and don’t need parameterization. Brand visuals fit squarely into this category, and by 2023, Lottie was the sole technology delivering them. Lottie also shines with intricate keyframe work — such as the morphing effect in 2022’s Wrapped or the solitaire card animation in 2023 — which would otherwise demand heavy research.

Shared Responsibility and Growing Pains

Introducing Lottie shifted responsibilities from engineers to motion designers. Designers must now oversee the entire lifecycle of an animation: envision it, test feasibility on Android, iOS, and browsers, and debug After Effects files when rendering goes wrong. They also handle file-size optimization since these assets are fetched from the backend rather than shipped inside the app binary.

Because Lottie files are served remotely, editing them during development requires coordination between designers and engineers. When a file is updated, the backend needs to reflect that change without disrupting active data-story animations. A smoother workflow would give motion designers the ability to upload files autonomously, letting them iterate without waiting on engineering — and freeing engineers for other tasks.

There’s also a technical footgun: with each Lottie animation fetched remotely, the campaign grows in payload size and introduces a download-failure point. Native animations, in contrast, ship with the client code and never hit this problem. But removing them entirely would be just as limiting, since Lottie doesn’t easily accommodate animation parameters driven by individualized user data.

A Complementary Stack

The 2023 Wrapped experience is not a replacement of one technology with another. It’s a division of labor. Native animations make the transitions in personalized data stories vivid and interactive, while Lottie handles all major keyframe-driven sequences requiring no personalization. Native is equipped for fine-grained rendering on device-motion capabilities and direct data-driven behavior; Lottie accelerates brand visuals and maintains consistency across screens and browsers — for general motion sequences where system calls are not important to create.

This hybrid approach is aimed at eliminating duplicated engineering across platforms, speeds up animation iteration cycles, and closes the gap in consistency for both mobile and web users. Spotify has taken the insights learned during the 2023 campaign to refine how motion design and engineering interact for future Wrapped campaigns — keeping a single source of truth for brand narrative visuals when possible, while retaining native animation where logic and user data join motion to make each user number feel personal.