Exploring the Animation Landscape of 2023 Wrapped

Data visualizations elevate the customized person expertise into participating narratives, comparable to in 2021’s Audio Aura or 2023’s Me in 2023. These tales are enjoyable to riff on with design, and so they give ample area for artistic engineering approaches. 

Natively constructed 

Powering animations for Spotify Wrapped historically has concerned native builds for each Android and iOS, that includes view and layer transformations, path manipulation, and textures comparable to gradients and blurs. This method has served us effectively because the starting of Wrapped on cellular and offered a number of benefits.

Leveraging native builds for animations has allowed us to parameterize our animations to inject variables comparable to localized textual content, pictures, and — extra curiously — listening knowledge to dictate look, colour, movement, and many others. For each marketing campaign, we have now relied solely on natively constructed animations for knowledge visualizations since they’re, by nature, linked to person knowledge. This method prompts artistic design and engineering options for instance distinctive person knowledge. For instance, for 2021’s Audio Aura, we mapped the listening frequency of a style to the depth of a colour. Another instance is 2023’s Sound Town, the place the animation lands on a coordinate on a map, which represents the situation of a person’s listening preferences.

2021 Audio Aura	2023 Sound Town

With the growth to the online parity in 2023, natively constructed animations required a number of engineers to construct the identical animation for every of their respective platforms — iOS, Android, and net. Engineering implementation and libraries for every platform additionally differ, making visible and behavioral parity more durable to attain. 

Lottie

With the purpose of decreasing redundancies, we determined it was time for a brand new addition to our animation toolbox. In 2022, we launched Airbnb’s JSON-based animation file format, LottieFiles. Lottie allowed us to streamline our animation efforts, giving movement designers the flexibility to create Lottie information in After Effects, add them to the backend, and with the shopper engineering the upfront setup, present playable animations throughout platforms. 

In 2023, we turned up the dial, embracing a Lottie-first precept every time sensible. Instead of getting a number of engineers individually create the identical animation for every platform, movement designers create a single animation file that’s served to all platforms. Additionally, Lottie supplies visible parity throughout all platforms and has eliminated the necessity for engineers to analyze technical feasibility, which usually requires the efforts of a number of engineers over a number of days. With Lottie, we’re capable of paint a cohesive expertise for our customers whereas permitting our engineering staff to deal with different important duties. 

Lottie particularly shines when utilized for generic animations. Generic animations are the identical visually and behaviorally for all customers and don’t require parameterization. Brand visible animations fall completely into this class, and in 2023 Lottie grew to become the only know-how for these animations. Lottie additionally excels in dealing with intricate animation keyframes, which might in any other case require in depth 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 issues

Of course, the introduction of Lottie hasn’t been with out its classes to study. One crucial facet was the shift of animation tasks from engineers to movement designers. Motion designers play an important function in envisioning, testing, and optimizing animations throughout platforms. They additionally assess feasibility; conduct testing on Android, iOS, and browsers; and debug After Effects information, if wanted. With animations saved within the backend, movement designers additionally guarantee file sizes are optimum. 

Another facet we had to bear in mind with Lottie was that animation information had been served from the backend, and in consequence, enhancing Lottie animations grew to become a dance between movement designers and engineers. To mitigate any potential synchronization points or disruptions in data-story animations throughout improvement for future campaigns, our movement designers would profit from being able to add information autonomously, facilitating smoother iterations on their work, and releasing engineering time.

From the know-how aspect, one other vital query got here into play: is the animation expertise vital sufficient that we’d really feel snug with growing our payload dimension and risking animation obtain failures? With natively constructed animations, all the pieces is baked into shopper code, and there are not any failures upon fetching animation property for every person.

A mix of two approaches

Given the power and capabilities of every know-how, you’ll encounter a harmonious mix of each native animations and Lottie in 2023 Wrapped. Native animations are accountable for knowledge visualizations and interactions, whereas Lottie takes the lead for model visuals and excessive keyframe animations that don’t require parameterization. 

Lottie	Native Animation
Best fitted to Lottie since this intro is similar for all customers.	The card flip was applied natively since it’s triggered by person interplay and the picture on the cardboard varies by person.

Lottie	Native Animation
Best fitted to Lottie since this intro is similar for all customers.	The sort of bread the animation lands on, the genres, and the style ratios within the sandwich are distinctive to every person, subsequently this animation was constructed natively.

In 2023, we expanded past the confines of Android and iOS and to the online. We targeted on the function of animations and dedicated to amplifying influence and streamlining engineering efforts. The strategic adoption of Lottie, coupled with native animations, showcased a synthesis of effectivity and creativity. The classes realized will information our future steps, making certain that Spotify Wrapped continues to push boundaries, captivate audiences and evolve on the intersection of know-how and creativeness.