We’ve been rolling out a fresh wave of Lottie animations 🌊 to our website and product.
Here’s how we’re doing it 👀✨…
🤔 What is 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
🏀 Follow our design team on Dribbble (https://lnkd.in/eVjdmfTq) to see what we’re working on next.