Exploring the Animation Landscape of 2023 Wrapped

January 24, 2024 Published by Zela Taino (Senior Engineer)

Each year, we aim to elevate the Spotify Wrapped experience for our users, crafting captivating data stories and pushing the boundaries of what the experience delivers to users. Since 2019, Spotify Wrapped has been available through the Spotify app on both Android and iOS. In 2023, we embarked on a path to share the joy of Wrapped with a larger global audience with a complementary web experience. The mission was clear — to maximize impact while optimizing and adapting our technology to include the web. Our attention turned to a crucial aspect of Wrapped, one that enhances the narrative and adds vibrancy to our data stories — the animations.

The role of animations in 2023 Wrapped

Animations add life to the Wrapped campaign, expressing its unique personality through brand and data visualizations. Brand visuals, like the kaleidoscope in 2020 and the ribbons in 2021 enhance the campaign, featuring unique elements that reflect the year’s theme visually.

Data visualizations elevate the personalized user experience into engaging narratives, such as in 2021’s Audio Aura or 2023’s Me in 2023. These stories are fun to riff on with design, and they give ample space for creative engineering approaches.

Powering animations

Natively built

Powering animations for Spotify Wrapped traditionally has involved native builds for both Android and iOS, featuring view and layer transformations, path manipulation, and textures such as gradients and blurs. This approach has served us well since the beginning of Wrapped on mobile and provided a number of advantages.

Leveraging native builds for animations has allowed us to parameterize our animations to inject variables such as localized text, images, and — more interestingly — listening data to dictate appearance, color, motion, etc. For every campaign, we have relied solely on natively built animations for data visualizations since they are, by nature, linked to user data. This approach prompts creative design and engineering solutions to illustrate unique user data. For example, for 2021’s Audio Aura, we mapped the listening frequency of a genre to the intensity of a color. Another example is 2023’s Sound Town, where the animation lands on a coordinate on a map, which represents the location of a user’s listening preferences.

With the expansion to the web parity in 2023, natively built animations required multiple engineers to build the same animation for each of their respective platforms — iOS, Android, and web. Engineering implementation and libraries for each platform also vary, making visual and behavioral parity harder to achieve.

Lottie

With the goal of reducing redundancies, we decided it was time for a new addition to our animation toolbox. In 2022, we introduced Airbnb’s JSON-based animation file format, Lottie. Lottie allowed us to streamline our animation efforts, giving motion designers the ability to create Lottie files in After Effects, upload them to the backend, and with the client engineering the upfront setup, provide playable animations across platforms.

In 2023, we turned up the dial, embracing a Lottie-first principle whenever practical. Instead of having multiple engineers individually create the same animation for each platform, motion designers create a single animation file that is served to all platforms. Additionally, Lottie provides visual parity across all platforms and has removed the need for engineers to investigate technical feasibility, which typically requires the efforts of multiple engineers over several days. With Lottie, we’re able to paint a cohesive experience for our users while allowing our engineering team to focus on other essential tasks.

Lottie especially shines when utilized for generic animations. Generic animations are the same visually and behaviorally for all users and don’t require parameterization. Brand visual animations fall perfectly into this category, and in 2023 Lottie became the sole technology for these animations. Lottie also excels in handling intricate animation keyframes, which would otherwise require extensive engineering time for investigation and implementation. This is highlighted by its effectiveness with the morphing in 2022 Wrapped or the solitaire card animation in 2023 Wrapped.

Learnings and considerations

Of course, the introduction of Lottie hasn’t been without its lessons to learn. One critical aspect was the shift of animation responsibilities from engineers to motion designers. Motion designers play a crucial role in envisioning, testing, and optimizing animations across platforms. They also assess feasibility; conduct testing on Android, iOS, and browsers; and debug After Effects files, if needed. With animations stored in the backend, motion designers also ensure file sizes are optimal.

Another aspect we had to keep in mind with Lottie was that animation files were served from the backend, and as a result, editing Lottie animations became a dance between motion designers and engineers. To mitigate any potential synchronization issues or disruptions in data-story animations during development for future campaigns, our motion designers would benefit from having the ability to upload files autonomously, facilitating smoother iterations on their work, and freeing engineering time.

From the technology side, another important question came into play: is the animation experience important enough that we’d feel comfortable with increasing our payload size and risking animation download failures? With natively built animations, everything is baked into client code, and there are no failures upon fetching animation assets for each user.

A blend of two approaches

Given the strength and capabilities of each technology, you’ll encounter a harmonious blend of both native animations and Lottie in 2023 Wrapped. Native animations are responsible for data visualizations and interactions, while Lottie takes the lead for brand visuals and high keyframe animations that don’t require parameterization.

Conclusion

In 2023, we expanded beyond the confines of Android and iOS and to the web. We focused on the role of animations and committed to amplifying impact and streamlining engineering efforts. The strategic adoption of Lottie, coupled with native animations, showcased a synthesis of efficiency and creativity. The lessons learned will guide our future steps, ensuring that Spotify Wrapped continues to push boundaries, captivate audiences and evolve at the intersection of technology and imagination.

2020 Wrapped	2021 Wrapped	2022 Wrapped	2023 Wrapped

Lottie	Native Animation

Best suited for Lottie since this intro is the same for all users.	The card flip was implemented natively since it is triggered by user interaction and the image on the card varies by user.

Lottie	Native Animation

Best suited for Lottie since this intro is the same for all users.	The type of bread the animation lands on, the genres, and the genre ratios in the sandwich are unique to each user, therefore this animation was built natively.