Dark Noise is an ambient noise app for iOS that aims to be an intuitive, delightful way to play your favorite ambient sounds to help you sleep, focus, or relax. There are currently over 50 unique sounds with the ability to combine them together for endless possibilities.
Initially we used Lottie animations to spice up our play/pause and heart buttons, but once we realized how powerful and flexible they were, we ended up making Lottie animations a core feature of the app.
It started as a simple problem: how do we signal to users that audio is currently playing? After trying a couple different audio visualizers we realized that we could take our existing icons for each sound and add a simple and fun animation to them.
Because we built our icons in Adobe Illustrator it was really straightforward to pull them into Adobe After Effects and animate them. The LottieFiles for After Effects plugin and iOS app made it easy to quickly test how animations behaved while running in an app. And the small file sizes of the Lottie format allowed us to expand our sound library without fear of animations bloating our app size compared to animated PNG sequences or video files.
When we added a feature to allow users to create custom mixes earlier this year, we knew we needed to bring that customization into the icon animations as well. Lottie’s flexibility allowed us to build an icon editor that gives users the ability to customize the colors of their icons for each mix with a live icon editor where users can see the animation changing as they select different colors.
These simple integrations with Lottie animations breathed some much needed life into Dark Noise and made the app much more delightful for users. At launch every single review mentioned the animations as a big part of what helps the app stand out in a crowded market.