How we’re adding Lottie animations to our website and product 💫

We’ve been rolling out a fresh wave of Lottie animations 🌊 to our website and product.

Here’s how we’re doing it 👀✨…

Sidenote: I tweeted about this and included this breakdown in my most recent newsletter. Subscribe to my newsletter for more content like this.

🤔 What is Lottie?

Lottie is an animation library for iOS, Android and Web that renders After Effects animations. Open sourced by Airbnb (https://airbnb.io/lottie/#)

Lottie animations are a good choice over GIFs or video due to their high quality and reduced file size.

🌈 Website animations for engagement

We’ve added Lottie animations to our website (onesignal.com) to help make our feature pages more engaging for visitors.

They bring the page to life and help demonstrate possibilities that static images don’t.

🎉 Product animations for delight and explainers

We’ve added Lottie animations to our product to help demonstrate how features work in empty states.

We also look for opportunities to add delight, for example, after a user completes a meaningful task like sending a message, we show them a successful sending animation.

🎨 Created with After Effects and LottieFiles

Our design team creates the animations in After Effects.

We’re big fans of LottieFiles and use them to store and share our animations.

📚 Documented in our Design System, added to Reach and CMS

We document the process in our Design System (Beam) for the rest of the team to reference so animations are consistent.

In React, we have a Lottie component, and we added the ability to insert Lottie animations via JSON uploads to our website CMS.

🏀 Follow our design team

Check out this tweet with more examples (https://lnkd.in/geMZUcD4) or visit our website (http://onesignal.com) to see some Lottie animations IRL.

🏀 Follow our design team on Dribbble (https://lnkd.in/eVjdmfTq) to see what we’re working on next.